I have been using the arrow-up icon from the Wix Studio library, which is a bit distracting and unappealing to the eye, so I designed and imported my element.
How I did it:
The design can be done in Illustrator and exported as SVG. When you save-as in Illustrator, you can see the code or use that code and paste it in the HTML editor, but Wix allows you to bring the SVG directly. Then, I use codes to make it fade to 20% and “onViewportIn” and solid “onMouseIn”, same with “onMoseOut” back to 20% fade, pinned the SVG to the page. Make sure no images are used and that it is pure vector. In my case, I used JavaScript to give it a drop shadow and blur to specific areas of the design. In my website, there are many SVG motion animations. I would. I would be glad to share how they were done.
Here is the code for the SVG with the extras:
<svg id="to-top-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 160 150" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" project-id="8e78b198cf37463ebf2bf1c596f6f6bb" export-id="f5c26002a861444b9460ce6f72879c8b" cached="false"><defs><filter id="to-top-icon-s-path1-filter" x="-150%" y="-150%" width="400%" height="400%"><feGaussianBlur id="to-top-icon-s-path1-filter-drop-shadow-0-blur" in="SourceAlpha" stdDeviation="3,3"/><feOffset id="to-top-icon-s-path1-filter-drop-shadow-0-offset" dx="0" dy="0" result="tmp"/><feFlood id="to-top-icon-s-path1-filter-drop-shadow-0-flood" flood-color="#000"/><feComposite id="to-top-icon-s-path1-filter-drop-shadow-0-composite" operator="in" in2="tmp"/><feMerge id="to-top-icon-s-path1-filter-drop-shadow-0-merge" result="result"><feMergeNode id="to-top-icon-s-path1-filter-drop-shadow-0-merge-node-1"/><feMergeNode id="to-top-icon-s-path1-filter-drop-shadow-0-merge-node-2" in="SourceGraphic"/></feMerge></filter><linearGradient id="to-top-icon-s-path2-fill" x1="12.976099" y1="65.95" x2="98.83699" y2="65.95" spreadMethod="pad" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0)"><stop id="to-top-icon-s-path2-fill-0" offset="0%" stop-color="#c1c1c1"/><stop id="to-top-icon-s-path2-fill-1" offset="0%" stop-color="#c9c9c9"/><stop id="to-top-icon-s-path2-fill-2" offset="0%" stop-color="#a8a8a8"/><stop id="to-top-icon-s-path2-fill-3" offset="8%" stop-color="#c1c1c1"/><stop id="to-top-icon-s-path2-fill-4" offset="29.0566%" stop-color="#e3e3e3"/><stop id="to-top-icon-s-path2-fill-5" offset="58.692%" stop-color="#efefef"/><stop id="to-top-icon-s-path2-fill-6" offset="100%" stop-color="#e3e3e3"/></linearGradient><filter id="to-top-icon-s-path3-filter" x="-150%" y="-150%" width="400%" height="400%"><feGaussianBlur id="to-top-icon-s-path3-filter-inner-shadow-0-blur" in="SourceAlpha" stdDeviation="1,1"/><feOffset id="to-top-icon-s-path3-filter-inner-shadow-0-offset" dx="0" dy="0" result="tmp"/><feComposite id="to-top-icon-s-path3-filter-inner-shadow-0-composite" operator="arithmetic" k2="-1" k3="1" in2="SourceGraphic"/><feColorMatrix id="to-top-icon-s-path3-filter-inner-shadow-0-color-matrix" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/><feMerge id="to-top-icon-s-path3-filter-inner-shadow-0-merge" result="result"><feMergeNode id="to-top-icon-s-path3-filter-inner-shadow-0-merge-node-1" in="SourceGraphic"/><feMergeNode id="to-top-icon-s-path3-filter-inner-shadow-0-merge-node-2"/></feMerge></filter><linearGradient id="to-top-icon-s-path3-fill" x1="0.15127" y1="0.916252" x2="0.84873" y2="0.083748" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="to-top-icon-s-path3-fill-0" offset="0%" stop-color="#1d5695"/><stop id="to-top-icon-s-path3-fill-1" offset="34%" stop-color="#3573ac"/><stop id="to-top-icon-s-path3-fill-2" offset="57%" stop-color="#1f97e4"/><stop id="to-top-icon-s-path3-fill-3" offset="80.3373%" stop-color="#38c3ff"/><stop id="to-top-icon-s-path3-fill-4" offset="100%" stop-color="#0084e1"/></linearGradient><filter id="to-top-icon-s-ellipse1-filter" x="-150%" y="-150%" width="400%" height="400%"><feGaussianBlur id="to-top-icon-s-ellipse1-filter-blur-0" stdDeviation="0.2,0.2" result="result"/></filter><linearGradient id="to-top-icon-s-ellipse1-fill" x1="0.275573" y1="1" x2="0.68891" y2="0" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="to-top-icon-s-ellipse1-fill-0" offset="0%" stop-color="#fff"/><stop id="to-top-icon-s-ellipse1-fill-1" offset="14%" stop-color="#f8f8f9"/><stop id="to-top-icon-s-ellipse1-fill-2" offset="27%" stop-color="#f2f2f4"/><stop id="to-top-icon-s-ellipse1-fill-3" offset="52%" stop-color="#dee0e3"/><stop id="to-top-icon-s-ellipse1-fill-4" offset="81%" stop-color="#d6d6d6"/><stop id="to-top-icon-s-ellipse1-fill-5" offset="100%" stop-color="#bababa"/></linearGradient><linearGradient id="to-top-icon-s-ellipse2-fill" x1="0.275573" y1="1" x2="0.68891" y2="0" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0 0)"><stop id="to-top-icon-s-ellipse2-fill-0" offset="0%" stop-color="#fff"/><stop id="to-top-icon-s-ellipse2-fill-1" offset="14%" stop-color="#f8f8f9"/><stop id="to-top-icon-s-ellipse2-fill-2" offset="27%" stop-color="#f2f2f4"/><stop id="to-top-icon-s-ellipse2-fill-3" offset="52%" stop-color="#dee0e3"/><stop id="to-top-icon-s-ellipse2-fill-4" offset="76%" stop-color="#d3d1d1"/><stop id="to-top-icon-s-ellipse2-fill-5" offset="100%" stop-color="#aeabab"/></linearGradient><filter id="to-top-icon-s-path4-filter" x="-150%" y="-150%" width="400%" height="400%"><feGaussianBlur id="to-top-icon-s-path4-filter-inner-shadow-0-blur" in="SourceAlpha" stdDeviation="2,2"/><feOffset id="to-top-icon-s-path4-filter-inner-shadow-0-offset" dx="0" dy="0" result="tmp"/><feComposite id="to-top-icon-s-path4-filter-inner-shadow-0-composite" operator="arithmetic" k2="-1" k3="1" in2="SourceGraphic"/><feColorMatrix id="to-top-icon-s-path4-filter-inner-shadow-0-color-matrix" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/><feMerge id="to-top-icon-s-path4-filter-inner-shadow-0-merge" result="result"><feMergeNode id="to-top-icon-s-path4-filter-inner-shadow-0-merge-node-1" in="SourceGraphic"/><feMergeNode id="to-top-icon-s-path4-filter-inner-shadow-0-merge-node-2"/></feMerge></filter></defs><g id="to-top-icon-u-layer_1" transform="matrix(-1.78 0 0 1.78 183.822-42.480007)"><path id="to-top-icon-s-path1" d="M22.2,101.7l42.227301-.2c19.7,0,35.7-16,35.7-35.6v0c0-19.7-16-35.6-35.6-35.6L22.2,30.3c-8.2,0-8.3-6.6-8.3-6.6v84.6c0,0,0-6.6,8.3-6.6v0Z" transform="matrix(.98 0 0 0.98-.779008 1.32)" filter="url(#to-top-icon-s-path1-filter)" fill="#a8a8a8"/><path id="to-top-icon-s-path2" d="M19.827874,96.1l37.23427-.1c16.6,0,30.1-13.5,30.1-30.1v0c0-16.6-13.5-30.1-30.1-30.1h-37.23427c-7,0-7-5.6-7-5.6v71.5c0,0,0-5.6,7-5.6v0Z" transform="matrix(1.13 0 0 1.13-1.82-8.58)" fill="url(#to-top-icon-s-path2-fill)"/><g id="to-top-icon-s-g1" transform="matrix(.89 0 0 0.89-9.144555-.749992)"><path id="to-top-icon-s-path3" d="M55.26016,66c0-18.19,14.74591-32.9359,32.9359-32.9359s32.9359,14.74591,32.9359,32.9359-14.74591,32.9359-32.9359,32.9359-32.9359-14.74591-32.9359-32.9359Zm32.9359,27.35212c15.10615,0,27.35211-12.24596,27.35211-27.35211s-12.24596-27.35211-27.35211-27.35211-27.35211,12.24596-27.35211,27.35211s12.24596,27.35211,27.35211,27.35211Z" transform="translate(-8.19606 9)" filter="url(#to-top-icon-s-path3-filter)" fill="url(#to-top-icon-s-path3-fill)" stroke-width="0"/><ellipse id="to-top-icon-s-ellipse1" rx="29.803529" ry="29.803529" transform="matrix(.92 0 0 0.92 80 75)" filter="url(#to-top-icon-s-ellipse1-filter)" fill="url(#to-top-icon-s-ellipse1-fill)" stroke-width="0.75"/><ellipse id="to-top-icon-s-ellipse2" rx="29.803529" ry="29.803529" transform="matrix(-.856053-.24346 0.24346-.856053 80 75)" fill="url(#to-top-icon-s-ellipse2-fill)" stroke-width="0.75"/><path id="to-top-icon-s-path4" d="M25.46836,69.0452c0,2.14839-1.74161,3.89-3.89,3.89h-.00057c-2.14839,0-3.89-1.74161-3.89-3.89v-16.50839l-5.2353,5.2353c-1.51914,1.51914-3.98215,1.51914-5.50129,0l-.00041-.00041c-1.51914-1.51914-1.51914-3.98215,0-5.50129L18.82328,40.39792c.76054-.76054,1.75765-1.14033,2.75446-1.13935.99703-.00114,1.99442.37864,2.75513,1.13935L36.20536,52.27041c1.51914,1.51914,1.51914,3.98215,0,5.50129l-.00041.00041c-1.51914,1.51914-3.98215,1.51914-5.50129,0l-5.2353-5.2353v16.50839Z" transform="translate(58.421927 18.903115)" filter="url(#to-top-icon-s-path4-filter)" fill="#6e718a" stroke-width="0"/></g></g></svg>
Here is the link to my website where I used it:
https://www.virtualimageinc.com/graphic-design]
