How to draw logo in html on hover - html

http://www.webdesignerdepot.com/
this website has logo when you hover it it draws itself i don't have faint idea how to do it. Do you use svg adobe ilustrator. I heaven t came across anything


It's a SVG element, you can use a lot of different tools for this.
You can check out these links for an example:
http://davidwalsh.name/svg-animation
http://codepen.io/ghepting/pen/xnezB
<svg xmlns="http://www.w3.org/2000/svg" viewBox="34.924 351.353 548.489 159.86">
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M51.494,355.859c-0.361,6.059-0.928,154.471,0.112,139.244"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M78.591,407.725c1.312,22.307-22.823,30.685-40.917,38.995v0.438c28.433,6.559,63.44,14.872,83.997,37.178"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M107.581,428.161c-10.663-3.553-25.783,30.933-12.163,31.759c9.906,0.412,10.873-18.834,13.134-26.911 c-5.65,11.058,3.828,48.292,20.075,6.995c-11.509,10.832,17.602,55.514,27.12-39.959c-2.612,27.794-5.091,45.328,6.053,56.885 c9.493,9.906,24.097,5.309,26.899-6.503c9.349-39.39,2.886-89.151-4.863-88.502c-7.76,0.648-12.929,44.588-4.217,79.835 c2.759,11.161,9.906,22.289,23.114,24.354c14.859,2.475,13.208-12.385,17.335-21.466c1.238,5.367,1.238,11.971,7.842,12.795 c7.429,1.238,9.492-9.906,14.446-9.906c2.063,0,4.127,4.129,6.192,4.541c3.302,1.238,3.715-0.412,7.017-1.651 c19.812-6.19,17.879-0.059,38.517-0.059"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M137.931,434.742c14.447-2.475,28.894-3.714,43.753-4.128"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M323.739,390.271c7.861-15.198-23.06-13.102-28.826-1.571c-13.101,26.204,37.734,46.643,44.023,68.653 c9.435,33.017-49.264,34.063-67.605,21.487c-11.53-8.386-2.096-13.626,8.385-16.771"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M355.25,448.722c-5.261,16.234,3.377,51.195,12.721,59.741c0,0,0.649-26.498-10.497-40.877"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M366.466,462.687c6.728,0.814,33.816,1.509,39.618-16.217c5.733-17.524-34.122-12.104-46.724-6.919 c-4.088,1.683-12.966,5.606-12.708,12.208c0.535,13.62,37.153,12.974,56.324,8.02s23.665-9.646,25.908-14.53 c-4.859,0.813-5.232,10.987-1.495,14.243c4.86,4.069,6.729-2.442,9.718-6.104c0.747,3.256,1.494,6.104,2.989,8.952 c3.738-2.848,5.608-10.173,10.841-9.766c4.485,0,3.991,5.186,8.477,5.594c4.111,0.408,8.078-11.094,22.939-10.447 c-8.399-1.615-24.232,8.725-13.569,12.278c11.309,2.907,13.178-9.46,14.674-14.343c1.494-5.29,6.729-39.826,0.748-43.896 c-4.485-2.849-5.232,5.696-5.607,9.359c-1.12,11.395,2.617,32.093,10.093,40.64c7.476,8.952,26.537,12.207,32.892-1.628 c4.861-10.986-8.597-17.498-10.091-5.289c-2.99,23.195,22.56,15.073,30.566,7.922c13.571-12.116,11.147-86.235,2.259-86.761 c-8.071-0.478-24.718,94.514,36.346,102.269"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M432.622,431.008c0.373-0.407,0.373-1.222,0.373-2.035"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M130.66,421.731c0.373-0.407,0.373-1.221,0.373-2.035"/>
</svg>

Related

Clipped SVG path rendering issue in Chrome only when stroke width uses 2px to render

Context:
I am rendering a line chart with a curved path.
The path extends beyond the clipped rect mask / viewbox as I had to animate a zooming effect to a smaller range on the x axis. As such the path is quite large.
Issue:
The "zoomed in" path renders with a broken stroke (see image B).
Issue only happens when:
in Chrome, Mac.
more than 2 pixels required to render the path (if the stroke is thin enough requiring only one pixel to render the stroke appears fine - (see image A) I was able to find this out when moving the window from my low resolution monitor over to my retina display. You can also notice the issue when zooming into the path.
When the path is large AND "scaled in / only showing a small section within the viewbox". If some of the plots beyond the viewbox area are removed then the path renders correctly.
Other browsers tested: Safari, Firefox. (Mac) These browsers render the path correctly.
Has anyone come across this issue and know of any fixes?
I have tried, using a thin stroke and adding drop-shadow filter which helps on low res screens but still breaks on zoom or some monitors with different resolution settings. Shadow only does not work as it requires a stroke to apply the effect.
Here is the codepen:
https://codepen.io/althea16/pen/yLxLRBP
<svg viewBox="0 0 536 383" width="536" height="383"
xmlns="http://www.w3.org/2000/svg">
<g class="wrapper" transform="translate(40,20)">
<g class="axis x" transform="translate(0,343)" fill="none" font-size="10" font-family="sans-serif"
text-anchor="middle">
<path class="domain text-divider" stroke="currentColor" d="M0,6V0H436.00848388671875V6"></path>
<g class="tick text-secondary" opacity="1" transform="translate(22, 0)">
<line stroke="currentColor" y2="6" class="hidden"></line><text fill="currentColor" y="9"
dy="0.71em">08:45</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(133, 0)">
<line stroke="currentColor" y2="6" class="hidden"></line><text fill="currentColor" y="9" dy="0.71em">09
AM</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(244, 0)">
<line stroke="currentColor" y2="6" class="hidden"></line><text fill="currentColor" y="9"
dy="0.71em">09:15</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(355, 0)">
<line stroke="currentColor" y2="6" class="hidden"></line><text fill="currentColor" y="9"
dy="0.71em">09:30</text>
</g>
</g>
<g class="axis y" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
<path class="domain text-divider" stroke="currentColor" d="M-6,343.9985656738281H0V0H-6"></path>
<g class="tick text-secondary" opacity="1" transform="translate(0, 330)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.1</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 283)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.2</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 237)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.3</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 191)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.4</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 145)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.5</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 98)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.6</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 52)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.7</text>
</g>
<g class="tick text-secondary" opacity="1" transform="translate(0, 6)">
<line stroke="currentColor" x2="-6" class="hidden"></line><text fill="currentColor" x="-9"
dy="0.32em">15.8</text>
</g>
</g>
<defs>
<clipPath id="clip">
<rect width="440" height="345" transform="translate(0, -1)"></rect>
</clipPath>
</defs>
<g class="lines" stroke="red" stroke-effect="non-scaling-stroke" stroke-width="2" clip-path="url(#clip)">
<path
d="M-3877882,7311C-3874338,7311,-3870794,7311,-3867250,7311C-3863706,7311,-3860162,7311,-3856618,7311C-3853074,7311,-3849530,7311,-3845986,7311C-3842442,7311,-3838898,7311,-3835354,7311C-3831810,7311,-3828266,7311,-3824722,7311C-3821178,7311,-3817634,7311,-3814090,7311C-3810546,7311,-3807002,7311,-3803458,7311C-3799914,7311,-3796370,7311,-3792826,7311C-3789281.9999999995,7311,-3785737.9999999995,7311,-3782193.9999999995,7311C-3778649.9999999995,7311,-3775105.9999999995,7311,-3771561.9999999995,7311C-3768017.9999999995,7311,-3764473.9999999995,7311,-3760929.9999999995,7311C-3757385.9999999995,7311,-3753841.9999999995,7311,-3750297.9999999995,7311C-3746753.9999999995,7311,-3743209.9999999995,7311,-3739666,7311C-3736122,7311,-3732578,7311,-3729034,7311C-3725490,7311,-3721946,7311,-3718402,7311C-3714858,7311,-3711314,7311,-3707770,7311C-3704226,7311,-3700682,7311,-3697138,7311C-3693594,7311,-3690050,7311,-3686506,7311C-3682962,7311,-3679418,7311,-3675874,7311C-3672330,7311,-3668786,7311,-3665242,7311C-3661698,7311,-3658154,7311,-3654610,7311C-3651066,7311,-3647522,7311,-3643978,7311C-3640434,7311,-3636890,7311,-3633346,7311C-3629802,7311,-3626258,7311,-3622714,7311C-3619170,7311,-3615626,7311,-3612082,7311C-3608538,7311,-3604994,7311,-3601450,7311C-3597906,7311,-3594362,7311,-3590818,7311C-3587274,7311,-3583730,7311,-3580186,7311C-3576642,7311,-3573098,7311,-3569554,7311C-3566010,7311,-3562466,7311,-3558922,7311C-3555378,7311,-3551834,7311,-3548290,7311C-3544746,7311,-3541202,7311,-3537657.9999999995,7311C-3534113.9999999995,7311,-3530569.9999999995,7311,-3527025.9999999995,7311C-3523481.9999999995,7311,-3519937.9999999995,7311,-3516393.9999999995,7311C-3512849.9999999995,7311,-3509305.9999999995,7311,-3505761.9999999995,7311C-3502217.9999999995,7311,-3498673.9999999995,7311,-3495130,7311C-3491586,7311,-3488042,7311,-3484498,7311C-3480954,7311,-3477410,7311,-3473866,7311C-3470322,7311,-3466778,7311,-3463234,7311C-3459690,7311,-3456146,7311,-3452602,7311C-3449058,7311,-3445514,7311,-3441970,7311C-3438426,7311,-3434882,7311,-3431338,7311C-3427794,7311,-3424250,7311,-3420706,7311C-3417162,7311,-3413618,7311,-3410074,7311C-3406530,7311,-3402986,7311,-3399442,7311C-3395898,7311,-3392354,7311,-3388810,7311C-3385266,7311,-3381722,7311,-3378178,7311C-3374634,7311,-3371090,7311,-3367546,7311C-3364002,7311,-3360458,7311,-3356914,7311C-3353370,7311,-3349826,7311,-3346282,7311C-3342738,7311,-3339194,7311,-3335650,7311C-3332106,7311,-3328562,7311,-3325018,7311C-3321474,7311,-3317930,7311,-3314386,7311C-3310842,7311,-3307298,7311,-3303754,7311C-3300210,7311,-3296666,7311,-3293122,7311C-3289578,7311,-3286033.9999999995,7311,-3282489.9999999995,7311C-3278945.9999999995,7311,-3275401.9999999995,7311,-3271857.9999999995,7311C-3268313.9999999995,7311,-3264769.9999999995,7311,-3261225.9999999995,7311C-3257681.9999999995,7311,-3254137.9999999995,7311,-3250593.9999999995,7311C-3247049.9999999995,7311,-3243505.9999999995,7311,-3239961.9999999995,7311C-3236417.9999999995,7311,-3232873.9999999995,7311,-3229329.9999999995,7311C-3225785.9999999995,7311,-3222241.9999999995,7311,-3218698,7311C-3215154,7311,-3211610,7311,-3208066,7311C-3204522,7311,-3200978,7311,-3197434,7311C-3193890,7311,-3190346,7311,-3186802,7311C-3183258,7311,-3179714,7311,-3176170,7311C-3172626,7311,-3169082,7311,-3165538,7311C-3161994,7311,-3158450,7311,-3154906,7311C-3151362,7311,-3147818,7311,-3144274,7311C-3140730,7311,-3137186,7311,-3133642,7311C-3130098,7311,-3126554,7311,-3123010,7311C-3119466,7311,-3115922,7311,-3112378,7311C-3108834,7311,-3105290,7311,-3101746,7311C-3098202,7311,-3094658,7311,-3091114,7311C-3087570,7311,-3084026,7311,-3080482,7311C-3076938,7311,-3073394,7311,-3069850,7311C-3066306,7311,-3062762,7311,-3059218,7311C-3055674,7311,-3052130,7311,-3048586,7311C-3045042,7311,-3041498,7311,-3037954,7311C-3034410,7311,-3030866,7311,-3027322,7311C-3023778,7311,-3020234,7311,-3016690,7311C-3013146,7311,-3009602,7311,-3006058,7311C-3002514,7311,-2998970,7311,-2995426,7311C-2991882,7311,-2988338,7311,-2984794,7311C-2981250,7311,-2977706,7311,-2974162,7311C-2970618,7311,-2967074,7311,-2963530,7311C-2959986,7311,-2956442,7311,-2952898,7311C-2949354,7311,-2945810,7311,-2942266,7311C-2938722,7311,-2935178,7311,-2931634,7311C-2928090,7311,-2924546,7311,-2921002,7311C-2917458,7311,-2913914,7311,-2910370,7311C-2906826,7311,-2903282,7311,-2899738,7311C-2896194,7311,-2892650,7311,-2889106,7311C-2885562,7311,-2882018,7311,-2878474,7311C-2874930,7311,-2871386,7311,-2867842,7311C-2864298,7311,-2860754,7311,-2857210,7311C-2853666,7311,-2850122,7311,-2846578,7311C-2843034,7311,-2839490,7311,-2835946,7311C-2832402,7311,-2828858,7311,-2825314,7311C-2821770,7311,-2818226,7311,-2814682,7311C-2811138,7311,-2807594,7311,-2804050,7311C-2800506,7311,-2796962,7311,-2793418,7311C-2789874,7311,-2786330,7311,-2782786,7311C-2779242,7311,-2775698,7311,-2772154,7311C-2768610,7311,-2765066,7311,-2761522,7311C-2757978,7311,-2754434,7311,-2750890,7311C-2747346,7311,-2743802,7311,-2740258,7311C-2736714,7311,-2733170,7311,-2729626,7311C-2726082,7311,-2722538,7311,-2718994,7311C-2715450,7311,-2711906,7311,-2708362,7311C-2704818,7311,-2701274,7311,-2697730,7311C-2694186,7311,-2690642,7311,-2687098,7311C-2683554,7311,-2680010,7311,-2676466,7311C-2672922,7311,-2669378,7311,-2665834,7311C-2662290,7311,-2658746,7311,-2655202,7311C-2651658,7311,-2648114,7311,-2644570,7311C-2641026,7311,-2637482,7311,-2633938,7311C-2630394,7311,-2626850,7311,-2623306,7311C-2619762,7311,-2616218,7311,-2612674,7311C-2609130,7311,-2605586,7311,-2602042,7311C-2598498,7311,-2594954,7311,-2591410,7311C-2587866,7311,-2584322,9332,-2580778,9332C-2577234,9332,-2573690,6012.999999999999,-2570146,5949C-2566602,5885,-2563058,5917,-2559514,5853C-2555970,5789,-2552426,3225,-2548882,3225C-2545338,3225,-2541794,5772,-2538250,5772C-2534706,5772,-2531162,3889.5,-2527618,2989C-2524074,2088.5,-2520530,985.6666666666666,-2516986,369C-2513442,-247.66666666666663,-2509898,-711,-2506354,-711C-2502810,-711,-2499266,263.33333333333337,-2495722,552C-2492178,840.6666666666665,-2488634,708.3333333333333,-2485090,1020.9999999999999C-2481546,1333.6666666666667,-2478002,3737,-2474458,3881C-2470914,4025,-2467370,3987,-2463826,4097C-2460282,4207,-2456738,4277,-2453194,4541C-2449650,4805,-2446106,5681,-2442562,5681C-2439018,5681,-2435474,5474.333333333332,-2431930,5394C-2428386,5313.666666666667,-2424842,5329,-2421298,5199C-2417754,5069,-2414210,3075,-2410666,3075C-2407122,3075,-2403578,3980,-2400034,3980C-2396490,3980,-2392946,3377.833333333333,-2389402,2854C-2385858,2330.1666666666665,-2382314,837,-2378770,837C-2375226,837,-2371682,1414,-2368138,1414C-2364594,1414,-2361050,841,-2357506,841C-2353962,841,-2350418,1826.8333333333335,-2346874,2619C-2343330,3411.1666666666665,-2339786,4864.833333333333,-2336242,5594C-2332698,6323.166666666666,-2329154,6994,-2325610,6994C-2322066,6994,-2318522,5326.166666666667,-2314978,4744C-2311434,4161.833333333333,-2307890,3800.166666666666,-2304346,3500.9999999999995C-2300802,3201.833333333333,-2297258,3317,-2293714,2949C-2290170,2581,-2286626,982,-2283082,982C-2279538,982,-2275994,1984,-2272450,1984C-2268906,1984,-2265362,-2244.6666666666665,-2261818,-2944C-2258274,-3643.333333333333,-2254730,-3992.9999999999995,-2251186,-3992.9999999999995C-2247642,-3992.9999999999995,-2244098,-2769,-2240554,-2769C-2237010,-2769,-2233466,-3447,-2229922,-3447C-2226378,-3447,-2222834,-1810,-2219290,-1810C-2215746,-1810,-2212202,-1996.6666666666667,-2208658,-2106C-2205114,-2215.3333333333335,-2201570,-2466,-2198026,-2466C-2194482,-2466,-2190938,1603,-2187394,1603C-2183850,1603,-2180306,1571.6666666666667,-2176762,1509C-2173218,1446.333333333333,-2169674,-1575.6666666666665,-2166130,-2576C-2162586,-3576.333333333333,-2159042,-4493,-2155498,-4493C-2151954,-4493,-2148410,-4178,-2144866,-4178C-2141322,-4178,-2137778,-5005,-2134234,-5005C-2130690,-5005,-2127146,-4076.333333333333,-2123602,-3923C-2120058,-3769.666666666666,-2116514,-3846.333333333333,-2112970,-3693C-2109426,-3539.666666666666,-2105882,-2787.333333333333,-2102338,-2596C-2098794,-2404.6666666666665,-2095250,-2309,-2091706,-2309C-2088162,-2309,-2084617.9999999998,-2321.666666666666,-2081073.9999999998,-2347C-2077529.9999999998,-2372.333333333333,-2073985.9999999998,-4339,-2070441.9999999998,-4339C-2066897.9999999998,-4339,-2063353.9999999998,-3494,-2059809.9999999998,-3494C-2056266,-3494,-2052722,-3680.6666666666665,-2049178,-4006C-2045634,-4331.333333333333,-2042090,-5446,-2038546,-5446C-2035002,-5446,-2031458,-3705.9999999999995,-2027914,-3705.9999999999995C-2024370,-3705.9999999999995,-2020826,-6174,-2017282,-6174C-2013738,-6174,-2010194,-6165,-2006650,-6165C-2003106,-6165,-1999562,-7385.333333333332,-1996018,-7747C-1992474,-8108.666666666666,-1988930,-7942.999999999999,-1985386,-8335C-1981842,-8727,-1978298,-11704,-1974754,-11704C-1971210,-11704,-1967666,-9294,-1964122,-9294C-1960577.9999999998,-9294,-1957033.9999999998,-10520,-1953489.9999999998,-10520C-1949945.9999999998,-10520,-1946401.9999999998,-8857.5,-1942857.9999999998,-8099.999999999999C-1939313.9999999998,-7342.5,-1935769.9999999998,-7154.666666666667,-1932226,-5975C-1928682,-4795.333333333333,-1925138,-1123.3333333333333,-1921594,-1021.9999999999999C-1918050,-920.6666666666665,-1914506,-870,-1910962,-870C-1907418,-870,-1903874,-2114,-1900330,-2114C-1896786,-2114,-1893242,-1568.9999999999998,-1889698,-1568.9999999999998C-1886154,-1568.9999999999998,-1882610,-2135,-1879066,-2135C-1875522,-2135,-1871978,-1491,-1868434,-1491C-1864890,-1491,-1861346,-2678,-1857802,-2678C-1854258,-2678,-1850714,1364,-1847170,1520C-1843626,1676,-1840082,1597.9999999999998,-1836538,1754C-1832993.9999999998,1910,-1829449.9999999998,3352,-1825905.9999999998,3352C-1822361.9999999998,3352,-1818817.9999999998,952,-1815273.9999999998,952C-1811730,952,-1808186,1938.9999999999998,-1804642,1938.9999999999998C-1801098,1938.9999999999998,-1797554,1918.333333333333,-1794010,1876.9999999999998C-1790466,1835.6666666666665,-1786922,1195,-1783378,1195C-1779834,1195,-1776290,1580.9999999999998,-1772746,1580.9999999999998C-1769202,1580.9999999999998,-1765658,1469.6666666666667,-1762114,1247C-1758570,1024.3333333333333,-1755026,164,-1751482,164C-1747938,164,-1744394,185,-1740850,227C-1737306,269,-1733762,2544,-1730218,2544C-1726674,2544,-1723130,1005,-1719586,841C-1716042,677,-1712498,759,-1708954,595C-1705409.9999999998,431,-1701865.9999999998,-1429.8333333333333,-1698321.9999999998,-2012.9999999999998C-1694777.9999999998,-2596.166666666667,-1691233.9999999998,-2904,-1687690,-2904C-1684146,-2904,-1680602,-2566,-1677058,-2566C-1673514,-2566,-1669970,-2832,-1666426,-2832C-1662882,-2832,-1659338,1308,-1655794,1308C-1652250,1308,-1648706,162,-1645162,162C-1641618,162,-1638074,2450,-1634530,2450C-1630986,2450,-1627442,2320.6666666666665,-1623898,2062C-1620354,1803.3333333333335,-1616810,589,-1613266,589C-1609722,589,-1606178,4182,-1602634,4182C-1599090,4182,-1595546,2707,-1592002,2707C-1588458,2707,-1584914,3032.666666666666,-1581369.9999999998,3357.9999999999995C-1577825.9999999998,3683.3333333333335,-1574281.9999999998,4659,-1570737.9999999998,4659C-1567193.9999999998,4659,-1563649.9999999998,1938.333333333333,-1560105.9999999998,1163C-1556561.9999999998,387.66666666666674,-1553017.9999999998,0,-1549474,0C-1545930,0,-1542386,353.33333333333337,-1538842,565C-1535298,776.6666666666666,-1531754,1270,-1528210,1270C-1524666,1270,-1521122,989,-1517578,989C-1514034,989,-1510490,1842,-1506946,1842C-1503402,1842,-1499858,1765.333333333333,-1496314,1612C-1492770,1458.6666666666667,-1489226,663,-1485682,663C-1482138,663,-1478594,714.3333333333334,-1475050,817C-1471506,919.6666666666665,-1467962,1138.5,-1464418,1451C-1460874,1763.5,-1457330,2692,-1453786,2692C-1450242,2692,-1446698,2032.1666666666667,-1443154,1516C-1439610,999.8333333333331,-1436066,-405,-1432522,-405C-1428978,-405,-1425434,-291.3333333333333,-1421890,-180C-1418346,-68.66666666666667,-1414802,196.33333333333331,-1411258,263C-1407714,329.66666666666663,-1404170,296.3333333333333,-1400626,363C-1397082,429.66666666666663,-1393538,730,-1389994,730C-1386450,730,-1382906,264,-1379362,264C-1375818,264,-1372274,2222.333333333333,-1368730,2525C-1365186,2827.666666666666,-1361642,2979,-1358098,2979C-1354554,2979,-1351010,2975,-1347466,2975C-1343922,2975,-1340378,3069.166666666666,-1336834,3147C-1333290,3224.833333333333,-1329746,3331.8333333333335,-1326202,3442C-1322658,3552.166666666666,-1319114,3808,-1315570,3808C-1312026,3808,-1308482,3601.666666666666,-1304938,3419C-1301394,3236.333333333333,-1297850,2712,-1294306,2712C-1290762,2712,-1287218,3307.8333333333335,-1283674,3664C-1280130,4020.166666666666,-1276586,4661,-1273042,4849C-1269498,5037,-1265954,5131,-1262410,5131C-1258866,5131,-1255322,4663.833333333333,-1251778,4529C-1248234,4394.166666666666,-1244690,4460,-1241146,4322C-1237602,4184,-1234058,3361,-1230514,3361C-1226970,3361,-1223426,4312,-1219882,4312C-1216338,4312,-1212794,2624.1666666666665,-1209250,1781C-1205706,937.8333333333333,-1202162,-747,-1198618,-747C-1195074,-747,-1191530,-87,-1187986,-87C-1184442,-87,-1180898,-1254,-1177354,-2568C-1173810,-3882,-1170266,-7970.999999999999,-1166722,-7970.999999999999C-1163178,-7970.999999999999,-1159634,-6260,-1156090,-6260C-1152546,-6260,-1149002,-6949.666666666667,-1145458,-7436.999999999999C-1141914,-7924.333333333332,-1138370,-9184,-1134826,-9184C-1131282,-9184,-1127738,-6041,-1124194,-5835C-1120650,-5629,-1117106,-5526,-1113562,-5526C-1110018,-5526,-1106474,-9113.333333333334,-1102930,-9194C-1099386,-9274.666666666666,-1095842,-9315,-1092298,-9315C-1088754,-9315,-1085210,-6710.333333333332,-1081666,-5971C-1078122,-5231.666666666666,-1074578,-5601.333333333333,-1071034,-4862C-1067490,-4122.666666666667,-1063946,192,-1060402,2893C-1056858,5594,-1053314,11344,-1049770,11344C-1046226,11344,-1042681.9999999999,4802,-1039137.9999999999,4802C-1035593.9999999999,4802,-1032049.9999999999,5863.333333333333,-1028506,6277C-1024962,6690.666666666666,-1021418,6810,-1017874,7284C-1014330,7758,-1010786,9121,-1007242,9121C-1003698,9121,-1000154,8240.833333333334,-996610,7929C-993066,7617.166666666667,-989522,7249.999999999999,-985978,7249.999999999999C-982433.9999999999,7249.999999999999,-978889.9999999999,7864.666666666666,-975345.9999999999,8048C-971801.9999999999,8231.333333333334,-968258,8350,-964714,8350C-961170,8350,-957626,8312,-954082,8304C-950538,8296,-946994,8292,-943450,8292C-939906,8292,-936362,10013.5,-932818,10545C-929274,11076.5,-925730,11481,-922186,11481C-918641.9999999999,11481,-915097.9999999999,10545.666666666666,-911553.9999999999,10080C-908009.9999999999,9614.333333333334,-904466,8967,-900922,8687C-897378,8407,-893834,8483.666666666666,-890290,8267C-886746,8050.333333333332,-883202,7387,-879658,7387C-876114,7387,-872570,7745,-869026,7745C-865482,7745,-861938,6658,-858394,6658C-854849.9999999999,6658,-851305.9999999999,7709,-847761.9999999999,7709C-844218,7709,-840674,7027.666666666667,-837130,6530C-833586,6032.333333333332,-830042,4723,-826498,4723C-822954,4723,-819410,5853,-815866,5853C-812322,5853,-808778,5534,-805234,5534C-801690,5534,-798146,6439,-794602,6439C-791057.9999999999,6439,-787513.9999999999,5455,-783969.9999999999,5455C-780425.9999999999,5455,-776882,5843.333333333333,-773338,5852C-769794,5860.666666666666,-766250,5856.333333333332,-762706,5865C-759162,5873.666666666667,-755618,7130.999999999999,-752074,7130.999999999999C-748530,7130.999999999999,-744986,6067,-741442,6067C-737898,6067,-734354,6487,-730810,6548.999999999999C-727266,6611,-723722,6580,-720178,6642C-716634,6704,-713090,7175.666666666666,-709546,7274.999999999999C-706002,7374.333333333333,-702458,7424,-698914,7424C-695370,7424,-691826,6477,-688282,6477C-684738,6477,-681194,6904.166666666667,-677650,7186C-674106,7467.833333333333,-670562,7513.333333333333,-667018,8167.999999999999C-663474,8822.666666666666,-659930,11566,-656386,11566C-652842,11566,-649298,10835,-645754,10835C-642210,10835,-638666,10849,-635122,10877C-631578,10905,-628034,12500,-624490,12500C-620946,12500,-617402,11245,-613858,11245C-610314,11245,-606770,11675,-603226,11675C-599682,11675,-596138,11283.666666666666,-592594,11219C-589050,11154.333333333332,-585506,11122,-581962,11122C-578418,11122,-574874,11129,-571330,11143C-567786,11157,-564242,11455,-560698,11455C-557154,11455,-553610,10960,-550066,10960C-546522,10960,-542978,11195.166666666666,-539434,11499C-535890,11802.833333333334,-532346,12783,-528802,12783C-525258,12783,-521713.99999999994,12779.999999999998,-518169.99999999994,12779.999999999998C-514626,12779.999999999998,-511082,13028,-507538,13028C-503994,13028,-500450,12991.999999999998,-496906,12958C-493361.99999999994,12924,-489817.99999999994,12913.333333333332,-486274,12824C-482730,12734.666666666666,-479186,12242.333333333332,-475642,12116.999999999998C-472098,11991.666666666666,-468554,12054.333333333332,-465010,11929C-461465.99999999994,11803.666666666664,-457921.99999999994,10960,-454378,10960C-450834,10960,-447290,11323,-443746,11323C-440202,11323,-436658,10822,-433114,10822C-429569.99999999994,10822,-426025.99999999994,10964,-422482,10964C-418938,10964,-415394,10308.166666666664,-411850,9967C-408306,9625.833333333332,-404762,9238.833333333332,-401218,8917C-397673.99999999994,8595.166666666666,-394129.99999999994,8314.333333333334,-390586,8036C-387042,7757.666666666666,-383498,7548.499999999999,-379954,7247C-376410,6945.5,-372866,6757.5,-369322,6227C-365778,5696.5,-362234,4857.5,-358690,4063.9999999999995C-355146,3270.5,-351602,1466,-348058,1466C-344514,1466,-340970,1881,-337426,1881C-333882,1881,-330338,1843,-326794,1843C-323250,1843,-319706,1950.9999999999998,-316162,2167C-312618,2383,-309074,3214.9999999999995,-305530,3214.9999999999995C-301986,3214.9999999999995,-298442,2718.833333333333,-294898,1935C-291354,1151.1666666666665,-287810,-1488,-284266,-1488C-280722,-1488,-277178,-625,-273634,-625C-270090,-625,-266546,-907.4999999999999,-263002,-1061C-259458,-1214.5,-255914,-1546,-252370,-1546C-248826,-1546,-245282,724,-241738,724C-238194,724,-234650,-965,-231105.99999999997,-965C-227562,-965,-224018,-755.9999999999999,-220474,-755.9999999999999C-216929.99999999997,-755.9999999999999,-213386,-1132,-209842,-1132C-206298,-1132,-202754,-829,-199209.99999999997,-829C-195666,-829,-192122,-2500,-188578,-2500C-185034,-2500,-181490,-202.99999999999997,-177946,-202.99999999999997C-174402,-202.99999999999997,-170858,-1412,-167314,-1813C-163770,-2214,-160226,-2609,-156682,-2609C-153138,-2609,-149594,-2176,-146050,-2176C-142506,-2176,-138962,-2633.5,-135418,-3037C-131874,-3440.5,-128330,-4597,-124785.99999999999,-4597C-121242,-4597,-117697.99999999999,-3547.333333333333,-114154,-3152.9999999999995C-110609.99999999999,-2758.666666666666,-107066,-2231,-103522,-2231C-99978,-2231,-96434,-3814,-92890,-3814C-89346,-3814,-85802,-3429.9999999999995,-82258,-2662C-78714,-1893.9999999999998,-75170,1306,-71626,1314C-68082,1322,-64537.99999999999,1326,-60993.99999999999,1326C-57450,1326,-53906,996,-50362,909.9999999999999C-46818,823.9999999999999,-43274,780.9999999999999,-39730,780.9999999999999C-36186,780.9999999999999,-32641.999999999996,1861,-29098,1861C-25554,1861,-22010,22,-18466,22C-12310.666666666668,22,-6155.333333333332,267,0,267C2.333333333333333,267,4.666666666666666,250,7,250C9.666666666666664,250,12.333333333333334,268.7047619047619,14.999999999999998,276C17.333333333333332,282.3833333333333,19.666666666666668,292,22,292C24.666666666666668,292,27.333333333333332,291,29.999999999999996,291C32.33333333333333,291,34.666666666666664,297.5,37,301C39.333333333333336,304.5,41.666666666666664,306.09722222222223,44,312C46.666666666666664,318.7460317460317,49.333333333333336,341,52,341C54.333333333333336,341,56.66666666666666,322,59,322C61.33333333333333,322,63.66666666666666,324,66,324C68.66666666666667,324,71.33333333333333,308,74,308C76.33333333333333,308,78.66666666666667,344,81,344C83.66666666666666,344,86.33333333333333,295,89,295C91.33333333333333,295,93.66666666666666,299,96,299C98.33333333333333,299,100.66666666666666,297.6666666666667,102.99999999999999,295C105.66666666666667,291.95238095238096,108.33333333333331,272.76190476190476,111,272C113.33333333333331,271.3333333333333,115.66666666666667,271,118,271C120.66666666666666,271,123.33333333333331,271,126,271C128.33333333333334,271,130.66666666666663,251.66666666666663,133,245C135.33333333333334,238.33333333333331,137.66666666666663,231,140,231C142.66666666666666,231,145.33333333333334,289,148,289C150.33333333333334,289,152.66666666666666,262.6666666666667,155,258C157.33333333333334,253.33333333333331,159.66666666666666,255.66666666666666,162,251C164.66666666666663,245.66666666666663,167.33333333333331,230.35238095238094,170,215C172.33333333333334,201.56666666666663,174.66666666666663,179.0722222222222,177,167C179.66666666666666,153.2031746031746,182.33333333333334,143.28571428571428,185,141C187.33333333333331,139,189.66666666666663,140,192,138C194.33333333333334,136,196.66666666666666,121.39722222222221,199,114C201.66666666666666,105.54603174603173,204.33333333333331,102.90793650793651,207,91C209.33333333333334,80.58055555555555,211.66666666666663,55.833333333333336,214,49.99999999999999C216.66666666666663,43.33333333333333,219.33333333333331,40,222,40C224.33333333333331,40,226.66666666666663,97,229,97C231.33333333333334,97,233.66666666666663,61,236,61C238.66666666666666,61,241.33333333333331,80,244,80C246.33333333333331,80,248.66666666666663,64,251,64C253.33333333333331,64,255.66666666666666,74,258,74C260.6666666666667,74,263.3333333333333,69,266,59C268.3333333333333,50.25,270.6666666666667,29.65555555555555,273,20C275.66666666666663,8.965079365079367,278.33333333333326,0,281,0C283.3333333333333,0,285.6666666666667,2.333333333333333,288,5C290.3333333333333,7.666666666666666,292.66666666666663,9.825,295,16C297.6666666666667,23.057142857142857,300.3333333333333,47,303,47C305.3333333333333,47,307.6666666666667,45.666666666666664,310,43C312.33333333333326,40.333333333333336,314.6666666666667,26,317,26C319.6666666666667,26,322.3333333333333,50.476190476190474,325,52C327.3333333333333,53.33333333333333,329.66666666666663,53.099999999999994,332,54C334.66666666666663,55.02857142857142,337.33333333333326,55.34603174603174,340,58C342.3333333333333,60.32222222222222,344.6666666666667,68,347,68C349.33333333333326,68,351.66666666666663,21,354,21C356.6666666666667,21,359.3333333333333,21,362,21C364.3333333333333,21,366.66666666666663,33.5,369,37C371.66666666666663,41,374.33333333333326,43,377,43C379.33333333333326,43,381.6666666666667,20,384,20C386.33333333333326,20,388.6666666666667,29.999999999999996,391,29.999999999999996C393.6666666666667,29.999999999999996,396.3333333333333,20,399,20C401.33333333333326,20,403.6666666666667,32,405.99999999999994,38C408.33333333333326,44,410.66666666666663,56,413,56C415.6666666666667,56,418.3333333333333,49.25714285714285,421,42C423.33333333333326,35.65,425.6666666666667,17,428,17C430.66666666666663,17,433.33333333333326,32,436,32C438.33333333333326,32,440.6666666666667,32,442.99999999999994,32"
style="stroke: rgb(1, 204, 122); fill: none;"></path>
</g>
</g>
</svg>

Fascinating problem. I can't see the solution myself but have tried to simplify what you've done into a very simple demo by removing rounded decimals and reducing your paths down to the bare minimum.
It appears that the path off the viewbox is causing the problem, i.e. these two:
-3877882,100C-1067490,-4122,-1063946,192,-1060402,2893C-1056858,5594,-1053314,11344,-1049770,11344
but it shouldn't render poorly like that. Would be interested to see the solution. Chrome can be so fussy with SVG.
https://codepen.io/PotatoTrade_/pen/eYLYbLe

SVG renders correctly in live server but shows up as an error on html webpage

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 596.97 663.91" style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24 264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/></g>
</g>
</svg>
I'm trying to insert an animated logo into my website. The logo is animated correctly and after having rendered it in CodePen I thought that it was all okay but for some reason on actual websites it just shows an error. Like so:
This page contains the following errors:
error on line 75 at column 6: Opening and ending tag mismatch: svg line 0 and g
Below is a rendering of the page up to the first error.
Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 596.97 663.91" style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24 264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/></g>
</g>
</svg>

There was an extra group closing tag at the end and The XML declaration had some error though I'm not sure what that was about. Any way this below code works fine now.
Enjoy :)
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build
0) -->
<svg version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 596.97 663.91"
style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-
linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-
dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24
264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-
linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/>
</g>
</svg>

CSS: transition only affecting last element

So I have 3 social media buttons on my website. I am adding a hover effect to them so yhey would turn red with a smooth transition effect.
But for some reason the transition effect is onlty applied to the last svg icon..
Why and how can I change it so it will be applied to all of them
<div class="socials">
<svg xmlns="http://www.w3.org/2000/svg" width="25.029" height="25.029" viewBox="0 0 25.029 25.029">
<g id="Icon_feather-instagram" data-name="Icon feather-instagram" transform="translate(1.5 1.5)">
<path id="Path_1" data-name="Path 1" d="M8.507,3H19.522a5.507,5.507,0,0,1,5.507,5.507V19.522a5.507,5.507,0,0,1-5.507,5.507H8.507A5.507,5.507,0,0,1,3,19.522V8.507A5.507,5.507,0,0,1,8.507,3Z" transform="translate(-3 -3)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Path_2" data-name="Path 2" d="M20.829,15.695a4.406,4.406,0,1,1-3.712-3.712,4.406,4.406,0,0,1,3.712,3.712Z" transform="translate(-5.408 -5.374)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Path_3" data-name="Path 3" d="M26.25,9.75h0" transform="translate(-9.177 -4.793)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</g>
</svg>
</div>
<div class="socials">
<svg xmlns="http://www.w3.org/2000/svg" width="24.797" height="26.183" viewBox="0 0 24.797 26.183">
<path id="Icon_feather-github" data-name="Icon feather-github" d="M10.71,21.316C5.2,22.968,5.2,18.562,3,18.011M18.42,24.62V20.357a3.712,3.712,0,0,0-1.035-2.875c3.459-.386,7.093-1.7,7.093-7.71a5.991,5.991,0,0,0-1.651-4.13,5.584,5.584,0,0,0-.1-4.153s-1.3-.386-4.307,1.63a14.738,14.738,0,0,0-7.71,0C7.7,1.1,6.4,1.489,6.4,1.489a5.584,5.584,0,0,0-.1,4.153A5.992,5.992,0,0,0,4.652,9.805c0,5.97,3.635,7.281,7.093,7.71a3.712,3.712,0,0,0-1.035,2.842V24.62" transform="translate(-1.181 0.063)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</svg>
</div>
<div class="socials">
<svg xmlns="http://www.w3.org/2000/svg" width="23.131" height="23.131" viewBox="0 0 23.131 23.131">
<path id="Icon_awesome-linkedin" data-name="Icon awesome-linkedin" d="M21.478,2.25H1.647A1.659,1.659,0,0,0,0,3.918v19.8a1.659,1.659,0,0,0,1.647,1.668H21.478a1.664,1.664,0,0,0,1.652-1.668V3.918A1.664,1.664,0,0,0,21.478,2.25ZM6.991,22.076H3.563V11.038H7V22.076ZM5.277,9.53A1.988,1.988,0,1,1,7.264,7.542,1.989,1.989,0,0,1,5.277,9.53ZM19.842,22.076H16.413v-5.37c0-1.28-.026-2.927-1.781-2.927-1.786,0-2.06,1.394-2.06,2.835v5.463H9.144V11.038h3.289v1.508h.046a3.611,3.611,0,0,1,3.248-1.781c3.47,0,4.115,2.287,4.115,5.261Z" transform="translate(0 -2.25)" fill="#fff"/>
</svg>
</div>
.socials:hover path{
fill: #FF4141;
transition: 0.5s ease;
}

It's because they have none as the initial value for the property fill, while the last one has #FFF. It's impossible to make a transition from no value. Replacing fill="none" by fill="#fff" in the path tags worked for me.
If you need them to be transparent, you can use a rgba value instead (rgba(255,255,255,0)).

Putting an outline on a mask in a SVG

Is it possible to put an outline or something on a mask so that you can actually see where the mask is? I have an element that I'm trying to mask, but I can't actually see if lining up to where it should.
What I'm trying to do is use the endScreen ID as a mask and using the startOrder ID for the object being masked. Right not it's masking it, but not correctly and it would be nice to visibly be able to see the mask where it is in the design.
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<style>
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
</style>
<defs>
<mask id="button-mask" width="1" height="1">
<path d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" />
<circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
<path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
<circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
<path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
</svg>

Define the path you want to use for the mask first as a template by itself, without any presentation attribute, and then reference it twice: first, inside the mask with fill="white", and then again with fill="none" stroke="blue" on top off your grafic.
You'll note your path isn't closed, but obviously a fill will create an implicit close between the endpoints, which the stroke doesn't show. An easy solution that changes effectively nothing for your mask is to add a z command at the end of the path definition.
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<defs>
<path id="shape" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
<mask id="button-mask" width="1" height="1">
<use href="#shape" fill="white" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" />
<circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
<path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
<circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
<path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
<use href="#shape" fill="none" stroke="blue" />
</svg>
It might be worth noting that this is a solution only fitting for your specific situation. If the mask had a stroke defined, another stroke around that one cannot be shown like that. Effectively, the technique is more fit for a clip-path (that is pure form) than a mask (which is a arbitrary grafical structure).

svg code HTML 5 path golden spiral

i am looking to create a text animation along a spiral path
something on the lines of this http://www.html5canvastutorials.com/labs/html5-canvas-spiral-text/
my attempt is to make the path a golden spiral instead of the one in the above code. the svg code for the golden spiral is given below... i have tried replacing the path data, but only the first curve loads...
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1024px" height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="ARC">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M32,87.344c0,327.678,265.635,593.313,593.313,593.313"/>
</g>
<g id="ARC_1_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M625.313,680.656C827.829,680.656,992,516.485,992,313.969"/>
</g>
<g id="ARC_2_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M992,313.969c0-125.162-101.464-226.625-226.625-226.625"/>
</g>
<g id="ARC_3_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M765.375,87.344c-77.354,0-140.063,62.708-140.063,140.062"/>
</g>
<g id="ARC_4_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M625.313,227.406c0,47.808,38.756,86.563,86.563,86.563"/>
</g>
<g id="ARC_5_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M711.876,313.969c29.546,0,53.499-23.953,53.499-53.5"/>
</g>
<g id="ARC_6_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M765.375,260.47c0-18.261-14.804-33.064-33.064-33.064"/>
</g>
<g id="ARC_7_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M732.311,227.406c-11.286,0-20.435,9.149-20.435,20.435"/>
</g>
</svg>

Simply append the paths' d attribute and delete the rest of your arcs:
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M32,87.344c0,327.678,265.635,593.313,593.313,593.313
M625.313,680.656C827.829,680.656,992,516.485,992,313.969
M992,313.969c0-125.162-101.464-226.625-226.625-226.625
M765.375,87.344c-77.354,0-140.063,62.708-140.063,140.062
M625.313,227.406c0,47.808,38.756,86.563,86.563,86.563
M711.876,313.969c29.546,0,53.499-23.953,53.499-53.5
M765.375,260.47c0-18.261-14.804-33.064-33.064-33.064
M732.311,227.406c-11.286,0-20.435,9.149-20.435,20.435
"/>