I designed a vector loader animation composed of 3 separate SVG elements using SVGator’s GUI. I exported each as SVG+Javascript, and chose to separate the elements because each uses a different loading/playing function.
When I copied the code into CodePen and my website, all 3 elements loaded perfectly on desktop. But when testing on mobile (iOS15 Chrome & Safari), the #battery and #cells elements load perfectly, but the #rings element fails to load no matter what.
I’ve even tried uploading the #rings file to my CMS to use as an html object’s data source, but the same thing happened: worked on desktop, failed on mobile. Also occurs when you go to the file on my domain.
Code for the #rings SVG is pasted below, but more easily readable on the CodePen link (also linked above).
<svg id="rings" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><defs><filter id="rings-outerring-filter" x="-400%" width="600%" y="-400%" height="600%"><feGaussianBlur id="rings-outerring-filter-drop-shadow-0-blur" in="SourceAlpha" stdDeviation="25,25"/><feOffset id="rings-outerring-filter-drop-shadow-0-offset" dx="0" dy="0" result="tmp"/><feFlood id="rings-outerring-filter-drop-shadow-0-flood" flood-color="rgba(0,25,249,0.93)"/><feComposite id="rings-outerring-filter-drop-shadow-0-composite" operator="in" in2="tmp"/><feMerge id="rings-outerring-filter-drop-shadow-0-merge"><feMergeNode id="rings-outerring-filter-drop-shadow-0-merge-node-1"/><feMergeNode id="rings-outerring-filter-drop-shadow-0-merge-node-2" in="SourceGraphic"/></feMerge><feGaussianBlur id="rings-outerring-filter-drop-shadow-1-blur" in="result" stdDeviation="0,0"/><feOffset id="rings-outerring-filter-drop-shadow-1-offset" dx="0" dy="0" result="tmp"/><feFlood id="rings-outerring-filter-drop-shadow-1-flood" flood-color="#0019f9"/><feComposite id="rings-outerring-filter-drop-shadow-1-composite" operator="in" in2="tmp"/><feMerge id="rings-outerring-filter-drop-shadow-1-merge" result="result"><feMergeNode id="rings-outerring-filter-drop-shadow-1-merge-node-1"/><feMergeNode id="rings-outerring-filter-drop-shadow-1-merge-node-2" in="result"/></feMerge></filter><radialGradient id="rings-outerring-stroke" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"><stop id="rings-outerring-stroke-0" offset="65%" stop-color="rgba(0,11,255,0)"/><stop id="rings-outerring-stroke-1" offset="100%" stop-color="rgba(0,5,255,0.89)"/></radialGradient><filter id="rings-innerring-filter" x="-400%" width="600%" y="-400%" height="600%"><feGaussianBlur id="rings-innerring-filter-drop-shadow-0-blur" in="SourceAlpha" stdDeviation="15.75,15.75"/><feOffset id="rings-innerring-filter-drop-shadow-0-offset" dx="0" dy="0" result="tmp"/><feFlood id="rings-innerring-filter-drop-shadow-0-flood" flood-color="rgba(0,124,208,0.86)"/><feComposite id="rings-innerring-filter-drop-shadow-0-composite" operator="in" in2="tmp"/><feMerge id="rings-innerring-filter-drop-shadow-0-merge"><feMergeNode id="rings-innerring-filter-drop-shadow-0-merge-node-1"/><feMergeNode id="rings-innerring-filter-drop-shadow-0-merge-node-2" in="SourceGraphic"/></feMerge><feGaussianBlur id="rings-innerring-filter-drop-shadow-1-blur" in="result" stdDeviation="0,0"/><feOffset id="rings-innerring-filter-drop-shadow-1-offset" dx="0" dy="0" result="tmp"/><feFlood id="rings-innerring-filter-drop-shadow-1-flood" flood-color="#007cd0"/><feComposite id="rings-innerring-filter-drop-shadow-1-composite" operator="in" in2="tmp"/><feMerge id="rings-innerring-filter-drop-shadow-1-merge" result="result"><feMergeNode id="rings-innerring-filter-drop-shadow-1-merge-node-1"/><feMergeNode id="rings-innerring-filter-drop-shadow-1-merge-node-2" in="result"/></feMerge></filter><radialGradient id="rings-innerring-stroke" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"><stop id="rings-innerring-stroke-0" offset="58%" stop-color="rgba(9,0,255,0)"/><stop id="rings-innerring-stroke-1" offset="100%" stop-color="rgba(0,163,255,0.75)"/></radialGradient></defs><g id="rings-ringsnull" transform="translate(.000004-.499999)"><g id="rings-outernull" transform="matrix(1.33 0 0 1.33-175.300928-73.656168)"><ellipse id="rings-outerring" rx="152.5" ry="152.5" transform="matrix(-.75 0 0 0.75 319.614966 243.797835)" paint-order="stroke fill markers" filter="url(#rings-outerring-filter)" fill="none" fill-rule="evenodd" stroke="url(#rings-outerring-stroke)" stroke-width="20" stroke-linecap="round" stroke-miterlimit="958.19" stroke-dashoffset="958" stroke-dasharray="958.19"/></g><g id="rings-innernull" transform="matrix(1.33 0 0 1.33-175.660519-73.294673)"><ellipse id="rings-innerring" rx="152.321205" ry="152.321205" transform="matrix(.63 0 0 0.63 319.749057 243.663741)" paint-order="stroke fill markers" filter="url(#rings-innerring-filter)" fill="none" fill-rule="evenodd" stroke="url(#rings-innerring-stroke)" stroke-width="20" stroke-linecap="round" stroke-miterlimit="957.06" stroke-dashoffset="957" stroke-dasharray="957.06"/></g></g><script><![CDATA[(function(s,i,u,o,c,w,d,t,n,x,e,p){w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s'].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"rings","animations":[{"elements":{"rings-outernull":{"transform":{"data":{"o":{"x":249.786969,"y":250.594965,"type":"corner"},"s":{"x":1.33,"y":1.33},"t":{"x":-319.61496,"y":-243.797844}},"keys":{"r":[{"t":0,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":1200,"v":90,"e":[0.445,0.05,0.55,0.95]},{"t":3000,"v":180,"e":[0.445,0.05,0.55,0.95]},{"t":4800,"v":270,"e":[0.445,0.05,0.55,0.95]},{"t":6000,"v":0}]}}},"rings-outerring":{"stroke-dashoffset":[{"t":0,"v":958,"e":[0.445,0.05,0.55,0.95]},{"t":2950,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":3050,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":6000,"v":958}]},"rings-innernull":{"transform":{"data":{"o":{"x":249.605733,"y":250.778104,"type":"corner"},"s":{"x":1.33,"y":1.33},"t":{"x":-319.749062,"y":-243.663742}},"keys":{"r":[{"t":0,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":1500,"v":90,"e":[0.445,0.05,0.55,0.95]},{"t":3000,"v":180,"e":[0.445,0.05,0.55,0.95]},{"t":4500,"v":270,"e":[0.445,0.05,0.55,0.95]},{"t":6000,"v":0}]}}},"rings-innerring":{"stroke-dashoffset":[{"t":0,"v":957,"e":[0.445,0.05,0.55,0.95]},{"t":2950,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":3050,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":6000,"v":957}]}},"s":"MDNA1M2E4TTRmOUTFhMjlmOGVhAMTk2OWM5YjRNmNjc2MzVkNWWQ1ZDU5QjRmOOTE5NjlmOTJRDOTBYYTE5NjlVjOWI0ZkU2NzTVhNWU1OTRmOJTZhMTkyOWY4XZWExOTY5YzlHiYTA0ZjY3NWPQ1OUk0ZjkzOTTY5OTk5NGY2JNzVlNTk0ZjhKlOTlhMTkyOWWZNOWI4ZVdhMVTkyNGZLNjdhNMTlmYTI5MjUX5NGZhMDlkOTEI5MjkxNGY2NTzVlYWE/"}],"options":"MDAAxMDg4MmZEODDA4MTZlN2Y4WMUwyZjQ3MmYF3OTdjNmU3MTGJmOGE/"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2021-10-11',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')]]></script></svg>
I’ve been getting a certification in JS on Codecademy but can’t seem to figure this out, and I’ve been trying for two days straight.