Каков простой код javascript для запуска SVG-анимации при загрузке страницы?

Question

Хорошо. Я поигрался с svgartista. net, и он дает вам код SVG и код CSS. Но чего он не дает, так это кода Javascript для запуска анимации при загрузке страницы.

Вот пример. Во-первых, код SVG.

<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 218 71" style="enable-background:new 0 0 218 71;" xml:space="preserve" width="218" height="71">
<style type="text/css">
    .st0{display:none;}
    .st1{display:inline;}
    .st2{fill:#0071BC;stroke:#0071BC;stroke-width:0.5;stroke-miterlimit:10;}
    .st3{display:none;fill:#0071BC;stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;}
    .st4{display:inline;fill:#0071BC;stroke:#0071BC;stroke-width:0.369;stroke-miterlimit:10;}
    .st5{display:inline;fill:#0071BC;stroke:#0071BC;stroke-width:0.5;stroke-miterlimit:10;}
    .st6{stroke:#FF0000;stroke-miterlimit:10;}
</style>
<g id="Layer_1" class="st0">
    <g class="st1">
        <path d="M-132.49,78V34.78h24.95v5.04h-19.41v13.99h17.14v5.04h-17.14V78H-132.49z" class="svg-elem-1"></path>
        <path d="M-88.52,44.61v5.36h-1.7c-3.28,0-6.17,1.95-6.17,7.81V78h-5.17V44.86h3.91l0.69,4.35h0.38c0.82-2.52,2.46-5.1,5.61-5.1
            C-89.59,44.1-88.52,44.61-88.52,44.61z" class="svg-elem-2"></path>
        <path d="M-61.93,61.43c0,11.91-4.1,17.33-11.84,17.33s-11.84-5.42-11.84-17.33s4.1-17.33,11.84-17.33S-61.93,49.52-61.93,61.43z
             M-80.21,60.23v2.39c0,7.62,2.14,11.53,6.43,11.53s6.43-3.91,6.43-11.53v-2.39c0-7.62-2.14-11.53-6.43-11.53
            S-80.21,52.61-80.21,60.23z" class="svg-elem-3"></path>
        <path d="M-20.17,54.12V78h-5.17V54.5c0-4.6-1.83-5.8-4.28-5.8c-3.09,0-5.67,3.34-5.67,9.07V78h-5.17V54.5c0-4.6-1.83-5.8-4.28-5.8
            c-3.09,0-5.73,3.34-5.73,9.07V78h-5.17V44.86h3.91l0.69,3.84h0.38c1.76-3.28,4.41-4.6,7.56-4.6c3.28,0,5.86,1.39,7.06,4.79
            c1.76-3.15,4.91-4.79,8.06-4.79C-23.31,44.1-20.17,46.75-20.17,54.12z" class="svg-elem-4"></path>
        <path d="M20.72,68.36H3.58L0.62,78h-5.54L8.81,34.78h7.12L29.67,78h-5.99L20.72,68.36z M5.1,63.32h14.05L13.29,44.1
            c-0.44-1.45-1.01-4.79-1.01-4.79h-0.25c0,0-0.57,3.4-1.01,4.79L5.1,63.32z" class="svg-elem-5"></path>
        <path d="M54.55,78h-3.91l-0.69-3.84h-0.38c-1.83,3.28-4.73,4.6-8,4.6c-4.98,0-8.19-2.65-8.19-10.02V44.86h5.17v23.5
            c0,4.6,1.89,5.8,4.66,5.8c3.28,0,6.17-3.34,6.17-9.07V44.86h5.17V78z" class="svg-elem-6"></path>
        <path d="M67.21,44.86h4.47v4.6h-4.47v21.67c0,1.95,1.01,3.02,2.96,3.02h1.51v3.59c-0.88,0.5-2.46,0.88-3.72,0.88
            c-4.54,0-5.92-3.84-5.92-7.62V49.46h-2.84v-4.6h2.84l1.13-9.2h4.03V44.86z" class="svg-elem-7"></path>
        <path d="M81.64,48.33h0.38c1.7-2.96,4.16-4.22,7.43-4.22c4.98,0,8.19,2.65,8.19,10.02V78h-5.17V54.5c0-4.6-1.89-5.8-4.66-5.8
            c-3.28,0-6.17,3.34-6.17,9.07V78h-5.17V32.45h5.17V48.33z" class="svg-elem-8"></path>
        <path d="M127.63,61.43c0,11.91-4.1,17.33-11.84,17.33s-11.84-5.42-11.84-17.33s4.1-17.33,11.84-17.33S127.63,49.52,127.63,61.43z
             M109.36,60.23v2.39c0,7.62,2.14,11.53,6.43,11.53s6.43-3.91,6.43-11.53v-2.39c0-7.62-2.14-11.53-6.43-11.53
            S109.36,52.61,109.36,60.23z" class="svg-elem-9"></path>
        <path d="M146.97,44.61v5.36h-1.7c-3.28,0-6.17,1.95-6.17,7.81V78h-5.17V44.86h3.91l0.69,4.35h0.38c0.82-2.52,2.46-5.1,5.61-5.1
            C145.9,44.1,146.97,44.61,146.97,44.61z" class="svg-elem-10"></path>
    </g>
    <g class="st1">
        <path class="st2 svg-elem-11" d="M243.89,48.27c-1.05-6.33-4.9-12.27-10.74-15.12c-4.84-2.36-10.15-2.63-15.42-2.07
            c5.59-3.19,10.78-7.13,14.1-12.62c2.3-3.8,4.89-10.35,1.17-14.08c-1.85-1.85-4.82-2.78-7.33-3.23c-2.71-0.49-5.42-0.46-8.14-0.06
            c-6.52,0.95-12.63,3.96-18.3,7.19c-1.68,0.96-0.17,3.55,1.51,2.59c0.12-0.07,0.25-0.14,0.37-0.21c-5.26,16.51-2.26,34-2.52,50.97
            c-0.07,4.4-0.39,8.79-1.11,13.12c-1.36,0.27-1.75,2.51-0.12,2.92c0.11,0.03,0.21,0.05,0.32,0.08c0.44,0.41,1.11,0.57,1.64,0.38
            c7.52,1.66,15.44,2,22.91-0.09c6.7-1.87,12.81-5.79,17.02-11.36C243.26,61.39,244.99,54.83,243.89,48.27z M223.38,74.55
            c-7.4,2.55-15.37,2.37-22.95,0.76c2.71-16.59-0.53-33.39,0.89-50.07c0.42-4.87,1.31-9.67,2.84-14.31
            c0.25-0.75-0.09-1.31-0.61-1.61c7.84-4.19,17.77-8.12,26.01-3.72c2.43,1.3,2.54,3.55,1.93,6c-0.49,1.95-1.29,3.79-2.34,5.5
            c-2.2,3.57-5.42,6.43-8.85,8.8c-4.06,2.8-8.49,5.02-12.95,7.11c-1.6,0.75-0.43,3.09,1.16,2.74c6.67-1.46,13.93-3.01,20.65-0.97
            c5.81,1.77,9.87,6.48,11.41,12.27C243.84,59.38,234.65,70.67,223.38,74.55z"></path>
        <path class="st2 svg-elem-12" d="M250.2,57.95c4.21-1.47,8.43-2.94,12.64-4.41c3.15-1.1,7.53-1.91,9.62-4.79c1.8-2.5,0.84-5.56-1.59-7.18
            c-2.47-1.65-5.63-1.81-8.45-1.21c-6.36,1.36-11.98,5.61-15.39,11.1c-3.06,4.94-5.35,12.91-1.19,17.91
            c2.86,3.44,7.4,2.48,11.1,1.23c4.87-1.65,9.74-3.31,14.61-4.97c1.82-0.62,1.04-3.52-0.8-2.89c-3.56,1.21-7.11,2.42-10.67,3.63
            c-1.66,0.56-3.32,1.15-4.99,1.69c-1.58,0.5-3.37,1.06-5.02,0.61c-2.55-0.69-3.37-3.56-3.43-5.9c-0.06-2.55,0.64-5.17,1.72-7.47
            c2.26-4.82,6.28-8.81,11.2-10.9c2.22-0.94,4.83-1.72,7.25-1.24c1.53,0.31,4.29,1.36,3.45,3.42c-0.5,1.23-2.04,1.87-3.21,2.31
            c-1.88,0.72-3.8,1.34-5.7,2c-3.98,1.39-7.97,2.78-11.95,4.17C247.59,55.69,248.37,58.58,250.2,57.95L250.2,57.95z"></path>
        <path class="st2 svg-elem-13" d="M297.93,42.44c-6.31-4.72-14.97-0.64-17.86,6.02c-0.36,0.83-0.62,1.68-0.84,2.55
            c-0.51-2.41-0.87-4.86-1.08-7.33c-0.16-1.91-3.16-1.93-3,0c0.55,6.6,2.07,13.04,4.61,19.16c0.72,1.73,3.46,1.11,2.89-0.8
            c-1.88-6.38-1.37-14.61,5.42-17.83c2.59-1.23,5.61-1.11,7.98,0.56c2.08,1.47,3.3,3.89,4.07,6.25c0.98,3.04,1.35,6.23,1.53,9.41
            c0.11,1.92,3.11,1.93,3,0C304.3,54.2,303.33,46.47,297.93,42.44z"></path>
        <path class="st2 svg-elem-14" d="M357.65,48c-0.17-3.21-0.75-6.44-1.17-9.63c-0.46-3.46-0.94-6.91-1.45-10.36c-0.99-6.66-2.1-13.3-3.28-19.92
            c0.24-0.11,0.45-0.29,0.63-0.56c1.29-2.03-0.8-4.74-3.09-4.03c-0.82,0.26-1.2,1.02-1.05,1.85c2.5,13.53,4.59,27.14,6.23,40.81
            c0.25,2.05,0.47,4.39-0.51,6.31c-1.26,2.46-3.39,0.31-4.56-1.08c-2.24-2.67-4.44-5.38-6.67-8.06c-1.03-1.25-2.07-2.5-3.1-3.75
            c-0.88-1.07-1.87-2.2-3.41-2c-1.46,0.19-2.16,1.45-2.63,2.7c-0.69,1.83-1.31,3.69-1.96,5.53c-0.88,2.49-1.77,4.98-2.65,7.47
            c-6.35-14.49-9.66-30.24-9.73-46.07c-0.01-1.93-3.01-1.93-3,0c0.07,17.56,4.06,34.96,11.6,50.81c0.6,1.26,2.35,0.75,2.74-0.36
            c1.2-3.38,2.4-6.75,3.6-10.13c0.54-1.54,1.09-3.07,1.63-4.61c0.24-0.68,0.58-1.39,0.76-2.1c0.1-0.43,0.03-0.32,0.23,0.05
            c0.18,0.34,0.61,0.72,0.85,1.02c2.22,2.69,4.44,5.38,6.67,8.06c1.06,1.28,2.11,2.59,3.19,3.85c0.9,1.05,1.93,2.07,3.26,2.55
            C355.95,58.22,357.85,51.87,357.65,48z"></path>
        <path class="st2 svg-elem-15" d="M363.9,31.84c1.12,6.17,2.24,12.34,3.36,18.51c0.14,0.8,1.11,1.25,1.85,1.05c0.84-0.23,1.19-1.05,1.05-1.85
            c-1.12-6.17-2.24-12.34-3.36-18.51c-0.14-0.8-1.11-1.25-1.85-1.05C364.11,30.23,363.76,31.04,363.9,31.84L363.9,31.84z"></path>
        <path class="st2 svg-elem-16" d="M363.3,16.78c-0.35,0.71-0.7,1.42-1.05,2.14c-0.11,0.17-0.17,0.36-0.18,0.56c-0.04,0.2-0.04,0.4,0.03,0.6
            c0.1,0.35,0.36,0.73,0.69,0.9c0.35,0.18,0.77,0.28,1.16,0.15c0.36-0.12,0.73-0.34,0.9-0.69c0.35-0.71,0.7-1.42,1.05-2.14
            c0.11-0.17,0.17-0.36,0.18-0.56c0.04-0.2,0.04-0.4-0.03-0.6c-0.1-0.35-0.36-0.73-0.69-0.9c-0.35-0.18-0.77-0.28-1.16-0.15
            C363.84,16.2,363.47,16.43,363.3,16.78L363.3,16.78z"></path>
        <path class="st3 svg-elem-17" d="M395.22,43.73c-1.27-3.18-0.56-6.6-0.85-9.92c-0.23-2.71-1.32-5.56-3.48-7.32c-2.33-1.9-5.35-1.92-7.7-0.01
            c-2.39,1.95-3.69,5.34-4.49,8.22c-0.14,0.52-0.27,1.04-0.37,1.57c-0.28-1.64-0.45-3.3-0.51-4.97c-0.06-1.93-3.06-1.93-3,0
            c0.17,5.26,1.39,10.37,3.55,15.17c0.3,0.67,1.25,0.89,1.87,0.61c0.72-0.32,1-1.01,0.87-1.77c-0.49-2.75-0.45-5.61,0.13-8.35
            c0.52-2.5,1.4-5.24,3-7.28c1.3-1.66,3.24-2.28,4.9-0.75c1.63,1.51,2.22,3.74,2.29,5.88c0.11,3.26-0.34,6.6,0.9,9.71
            c0.3,0.75,1,1.28,1.85,1.05C394.89,45.38,395.53,44.49,395.22,43.73z"></path>
        <path class="st2 svg-elem-18" d="M424.36,15.21c-3.95,1.14-7.9,2.27-11.85,3.41c-0.17-8.27-0.34-16.53-0.52-24.8c-0.04-1.93-3.04-1.93-3,0
            c0.18,8.55,0.36,17.11,0.53,25.66c-4.24,1.22-8.48,2.44-12.72,3.66c-1.85,0.53-1.06,3.43,0.8,2.89c4-1.15,7.99-2.3,11.99-3.45
            c0.13,6.03,0.25,12.05,0.38,18.08c0.04,1.93,3.04,1.93,3,0c-0.13-6.31-0.26-12.63-0.39-18.94c4.19-1.21,8.39-2.42,12.58-3.62
            C427.01,17.57,426.22,14.68,424.36,15.21z"></path>
        <path class="st3 svg-elem-19" d="M447.2,31.4c-0.62-0.63-1.49-0.5-2.12,0c-2.65,2.11-5.56,3.9-8.63,5.33c-1.54,0.72-3.14,1.41-4.78,1.85
            c-1.04,0.28-2.5,0.45-3.15-0.63c-0.77-1.29-0.12-3.15,0.67-4.62c0.09-0.01,0.17-0.02,0.26-0.04c6.81-1.67,12.75-6.24,16.12-12.38
            c0.54-0.99-0.14-2.26-1.3-2.26c-3.67-0.01-6.91,1.62-9.7,3.9c-2.67,2.17-5.24,4.95-7.13,7.83c-1.54,2.36-2.95,5.76-1.77,8.55
            c0.61,1.44,1.96,2.49,3.5,2.77c2.09,0.37,4.14-0.43,6.04-1.19c4.34-1.73,8.33-4.08,11.97-6.99
            C447.84,33.01,447.72,31.93,447.2,31.4z M435.77,25.46c1.6-1.43,3.4-2.64,5.41-3.3c-2.37,3.12-5.53,5.57-9.13,7.1
            C433.21,27.9,434.49,26.62,435.77,25.46z"></path>
        <path class="st2 svg-elem-20" d="M472.62,9.82c-8.48-0.7-16.22,5.34-19.13,13.04c-0.42-1.91-0.84-3.82-1.26-5.72
            c-0.42-1.88-3.31-1.09-2.89,0.8c1.14,5.18,2.28,10.36,3.43,15.55c0.48,1.88,3.31,1.08,2.89-0.8c-2.54-10,6.78-20.71,16.97-19.86
            C474.55,12.98,474.54,9.98,472.62,9.82z"></path>
    </g>
    <path class="st4 svg-elem-21" d="M428.19,28.9c3.11-1.08,6.22-2.17,9.33-3.25c2.33-0.81,5.56-1.41,7.1-3.54c1.33-1.84,0.62-4.11-1.17-5.3
        c-1.82-1.22-4.15-1.34-6.24-0.89c-4.7,1-8.84,4.14-11.36,8.19c-2.26,3.65-3.95,9.53-0.88,13.22c2.11,2.54,5.46,1.83,8.19,0.91
        c3.6-1.22,7.19-2.44,10.79-3.67c1.34-0.46,0.77-2.6-0.59-2.14c-2.63,0.89-5.25,1.78-7.87,2.68c-1.23,0.42-2.45,0.85-3.68,1.25
        c-1.16,0.37-2.49,0.78-3.71,0.45c-1.88-0.51-2.49-2.63-2.53-4.36c-0.05-1.88,0.48-3.82,1.27-5.51c1.67-3.56,4.64-6.5,8.26-8.05
        c1.64-0.7,3.56-1.27,5.35-0.91c1.13,0.23,3.17,1,2.55,2.53c-0.37,0.91-1.51,1.38-2.37,1.71c-1.39,0.53-2.81,0.99-4.21,1.47
        c-2.94,1.03-5.88,2.05-8.82,3.08C426.27,27.24,426.84,29.37,428.19,28.9L428.19,28.9z"></path>
    <path class="st5 svg-elem-22" d="M394.62,27.3c-6.31-4.72-14.97-0.64-17.86,6.02c-0.36,0.83-0.62,1.68-0.84,2.55
        c-0.51-2.41-0.87-4.86-1.08-7.33c-0.16-1.91-3.16-1.93-3,0c0.55,6.6,2.07,13.04,4.61,19.16c0.72,1.73,3.46,1.11,2.89-0.8
        c-1.88-6.38-1.37-14.61,5.42-17.83c2.59-1.23,5.61-1.11,7.98,0.56c2.08,1.47,3.3,3.89,4.07,6.25c0.98,3.04,1.35,6.23,1.53,9.41
        c0.11,1.92,3.11,1.93,3,0C401,39.06,400.02,31.33,394.62,27.3z"></path>
</g>
<g id="Layer_2">
    <g>
        <path class="st6 svg-elem-23" d="M14.68,54.76V11.54h26.65v5.04H20.23v13.55h18.33v5.04H20.23v14.55h21.48v5.04H14.68z"></path>
        <path class="st6 svg-elem-24" d="M60.48,37.56l9.7,17.2h-6.24l-6.49-12.1l-6.68,12.1h-5.67L54.75,38l-9.2-16.38h6.24l5.99,11.34l6.17-11.34
            h5.8L60.48,37.56z"></path>
        <path class="st6 svg-elem-25" d="M94.63,30.12v18.59c0,1.58,0.88,2.21,1.76,2.21h2.02v3.59c-0.57,0.31-1.76,0.76-3.4,0.76
            c-2.71,0-4.6-1.64-5.23-4.1h-0.32c-1.7,2.71-4.6,4.35-8.06,4.35c-3.28,0-8.69-1.32-8.69-9.32c0-9.14,7.12-11.09,16.76-11.09v-4.28
            c0-3.15-1.01-5.36-5.23-5.36c-3.91,0-5.1,2.71-5.1,5.23v0.76h-5.1c-0.06-0.38-0.06-0.82-0.06-1.39c0-6.05,4.41-9.2,10.65-9.2
            C91.29,20.86,94.63,24.26,94.63,30.12z M89.46,39.7c-6.74,0-11.34,1.01-11.34,6.17c0,3.78,1.58,5.04,4.47,5.04
            c3.28,0,6.87-2.71,6.87-8.19V39.7z"></path>
        <path class="st6 svg-elem-26" d="M138.54,30.88v23.88h-5.17v-23.5c0-4.6-1.83-5.8-4.28-5.8c-3.09,0-5.67,3.34-5.67,9.07v20.22h-5.17v-23.5
            c0-4.6-1.83-5.8-4.28-5.8c-3.09,0-5.73,3.34-5.73,9.07v20.22h-5.17V21.62h3.91l0.69,3.84h0.38c1.76-3.28,4.41-4.6,7.56-4.6
            c3.28,0,5.86,1.39,7.06,4.79c1.76-3.15,4.91-4.79,8.06-4.79C135.39,20.86,138.54,23.51,138.54,30.88z"></path>
        <path class="st6 svg-elem-27" d="M168.53,38.25c0,12.03-4.41,17.26-9.89,17.26c-3.21,0-5.92-1.39-7.06-3.65h-0.32v13.8h-5.17V21.62H150
            l0.69,3.84h0.31c1.58-3.02,4.22-4.6,7.25-4.6C164.56,20.86,168.53,26.09,168.53,38.25z M151.26,36.99v2.39
            c0,7.62,1.95,11.53,5.92,11.53s5.92-3.28,5.92-11.53v-2.39c0-8.25-1.95-11.53-5.92-11.53S151.26,29.37,151.26,36.99z"></path>
        <path class="st6 svg-elem-28" d="M179.36,54.76h-5.17V9.2h5.17V54.76z"></path>
        <path class="st6 svg-elem-29" d="M208.53,36.42v3.28h-17.96c0.06,7.75,2.33,11.21,7.25,11.21c3.28,0,5.61-2.83,5.61-7.43h5.1
            c0,7.43-4.41,12.03-10.84,12.03c-8.25,0-12.54-5.04-12.54-17.33c0-11.91,4.16-17.33,12.48-17.33
            C204.88,20.86,208.53,25.33,208.53,36.42z M190.64,35.1h12.47c0-6.3-1.89-9.64-5.48-9.64C193.03,25.46,191.08,28.74,190.64,35.1z"></path>
    </g>
</g>
</svg>

И CSS код

/***************************************************
 * Generated by SVG Artista on 8/5/2020, 8:05:40 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  stroke-dashoffset: 172.62001037597656px;
  stroke-dasharray: 172.62001037597656px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-2 {
  stroke-dashoffset: 98.26860809326172px;
  stroke-dasharray: 98.26860809326172px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-3 {
  stroke-dashoffset: 161.44317626953125px;
  stroke-dasharray: 161.44317626953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-4 {
  stroke-dashoffset: 253.32933044433594px;
  stroke-dasharray: 253.32933044433594px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-5 {
  stroke-dashoffset: 212.95826721191406px;
  stroke-dasharray: 212.95826721191406px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-6 {
  stroke-dashoffset: 166.6034698486328px;
  stroke-dasharray: 166.6034698486328px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg-elem-6 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-7 {
  stroke-dashoffset: 116.26506042480469px;
  stroke-dasharray: 116.26506042480469px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

svg.active .svg-elem-7 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-8 {
  stroke-dashoffset: 191.52976989746094px;
  stroke-dasharray: 191.52976989746094px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg-elem-8 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-9 {
  stroke-dashoffset: 161.44320678710938px;
  stroke-dasharray: 161.44320678710938px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .svg-elem-9 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-10 {
  stroke-dashoffset: 98.26860809326172px;
  stroke-dasharray: 98.26860809326172px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

svg.active .svg-elem-10 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-11 {
  stroke-dashoffset: 482.4691162109375px;
  stroke-dasharray: 482.4691162109375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.active .svg-elem-11 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-12 {
  stroke-dashoffset: 207.15650939941406px;
  stroke-dasharray: 207.15650939941406px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}

svg.active .svg-elem-12 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-13 {
  stroke-dashoffset: 133.1724090576172px;
  stroke-dasharray: 133.1724090576172px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .svg-elem-13 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-14 {
  stroke-dashoffset: 303.4800109863281px;
  stroke-dasharray: 303.4800109863281px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

svg.active .svg-elem-14 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-15 {
  stroke-dashoffset: 49.04837417602539px;
  stroke-dasharray: 49.04837417602539px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.active .svg-elem-15 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-16 {
  stroke-dashoffset: 16.232245445251465px;
  stroke-dasharray: 16.232245445251465px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
}

svg.active .svg-elem-16 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-17 {
  stroke-dashoffset: 112.50839233398438px;
  stroke-dasharray: 112.50839233398438px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
}

svg.active .svg-elem-17 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-18 {
  stroke-dashoffset: 159.33145141601562px;
  stroke-dasharray: 159.33145141601562px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
}

svg.active .svg-elem-18 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-19 {
  stroke-dashoffset: 133.2128448486328px;
  stroke-dasharray: 133.2128448486328px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
}

svg.active .svg-elem-19 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-20 {
  stroke-dashoffset: 92.67521667480469px;
  stroke-dasharray: 92.67521667480469px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
}

svg.active .svg-elem-20 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-21 {
  stroke-dashoffset: 153.4391632080078px;
  stroke-dasharray: 153.4391632080078px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
}

svg.active .svg-elem-21 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-22 {
  stroke-dashoffset: 133.1741180419922px;
  stroke-dasharray: 133.1741180419922px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
}

svg.active .svg-elem-22 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-23 {
  stroke-dashoffset: 221.3599853515625px;
  stroke-dasharray: 221.3599853515625px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6399999999999997s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6399999999999997s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
}

svg.active .svg-elem-23 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-24 {
  stroke-dashoffset: 155.54933166503906px;
  stroke-dasharray: 155.54933166503906px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.76s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.76s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
}

svg.active .svg-elem-24 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-25 {
  stroke-dashoffset: 184.92225646972656px;
  stroke-dasharray: 184.92225646972656px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.88s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.88s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
}

svg.active .svg-elem-25 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-26 {
  stroke-dashoffset: 253.2868194580078px;
  stroke-dasharray: 253.2868194580078px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s;
}

svg.active .svg-elem-26 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-27 {
  stroke-dashoffset: 198.46755981445312px;
  stroke-dasharray: 198.46755981445312px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.12s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.12s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
}

svg.active .svg-elem-27 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-28 {
  stroke-dashoffset: 103.45999145507812px;
  stroke-dasharray: 103.45999145507812px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2399999999999998s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2399999999999998s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s;
}

svg.active .svg-elem-28 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-29 {
  stroke-dashoffset: 181.11129760742188px;
  stroke-dasharray: 181.11129760742188px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.36s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6000000000000005s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.36s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6000000000000005s;
}

svg.active .svg-elem-29 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

Оттуда сайт говорит использовать Javascript для загрузки .active css на загрузка страницы. Я просто не знаю, как это сделать.

Answer 1

Оттуда сайт предлагает использовать Javascript для загрузки .active css при загрузке страницы. Я просто не знаю, как это сделать.

Эта фраза сбивает с толку и вводит в заблуждение. Здесь нечего "загружать". Что вам нужно сделать, так это добавить класс active к элементу <svg> для постепенного появления или удалить его для постепенного исчезновения.

вот небольшой фрагмент, чтобы сделать это одним нажатием кнопки, просто для начала:

// find the svg-element
const svg = document.querySelector('svg');

window.onload = function() {
  svg.classList.add("active");
}

document.querySelector("button").onclick = function() {
  svg.classList.toggle("active");
}

const svg = document.querySelector('svg');

window.onload = function() {
  svg.classList.add("active");
}

document.querySelector("button").onclick = function() {
  svg.classList.toggle("active");
}

/***************************************************
 * Generated by SVG Artista on 8/5/2020, 8:05:40 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  stroke-dashoffset: 172.62001037597656px;
  stroke-dasharray: 172.62001037597656px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-2 {
  stroke-dashoffset: 98.26860809326172px;
  stroke-dasharray: 98.26860809326172px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-3 {
  stroke-dashoffset: 161.44317626953125px;
  stroke-dasharray: 161.44317626953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-4 {
  stroke-dashoffset: 253.32933044433594px;
  stroke-dasharray: 253.32933044433594px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-5 {
  stroke-dashoffset: 212.95826721191406px;
  stroke-dasharray: 212.95826721191406px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-6 {
  stroke-dashoffset: 166.6034698486328px;
  stroke-dasharray: 166.6034698486328px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg-elem-6 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-7 {
  stroke-dashoffset: 116.26506042480469px;
  stroke-dasharray: 116.26506042480469px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

svg.active .svg-elem-7 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-8 {
  stroke-dashoffset: 191.52976989746094px;
  stroke-dasharray: 191.52976989746094px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg-elem-8 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-9 {
  stroke-dashoffset: 161.44320678710938px;
  stroke-dasharray: 161.44320678710938px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .svg-elem-9 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-10 {
  stroke-dashoffset: 98.26860809326172px;
  stroke-dasharray: 98.26860809326172px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

svg.active .svg-elem-10 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-11 {
  stroke-dashoffset: 482.4691162109375px;
  stroke-dasharray: 482.4691162109375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.active .svg-elem-11 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-12 {
  stroke-dashoffset: 207.15650939941406px;
  stroke-dasharray: 207.15650939941406px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}

svg.active .svg-elem-12 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-13 {
  stroke-dashoffset: 133.1724090576172px;
  stroke-dasharray: 133.1724090576172px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .svg-elem-13 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-14 {
  stroke-dashoffset: 303.4800109863281px;
  stroke-dasharray: 303.4800109863281px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

svg.active .svg-elem-14 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-15 {
  stroke-dashoffset: 49.04837417602539px;
  stroke-dasharray: 49.04837417602539px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.active .svg-elem-15 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-16 {
  stroke-dashoffset: 16.232245445251465px;
  stroke-dasharray: 16.232245445251465px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
}

svg.active .svg-elem-16 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-17 {
  stroke-dashoffset: 112.50839233398438px;
  stroke-dasharray: 112.50839233398438px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
}

svg.active .svg-elem-17 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-18 {
  stroke-dashoffset: 159.33145141601562px;
  stroke-dasharray: 159.33145141601562px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
}

svg.active .svg-elem-18 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-19 {
  stroke-dashoffset: 133.2128448486328px;
  stroke-dasharray: 133.2128448486328px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
}

svg.active .svg-elem-19 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-20 {
  stroke-dashoffset: 92.67521667480469px;
  stroke-dasharray: 92.67521667480469px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
}

svg.active .svg-elem-20 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-21 {
  stroke-dashoffset: 153.4391632080078px;
  stroke-dasharray: 153.4391632080078px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
}

svg.active .svg-elem-21 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-22 {
  stroke-dashoffset: 133.1741180419922px;
  stroke-dasharray: 133.1741180419922px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
}

svg.active .svg-elem-22 {
  stroke-dashoffset: 0;
  fill: rgb(0, 113, 188);
}

svg .svg-elem-23 {
  stroke-dashoffset: 221.3599853515625px;
  stroke-dasharray: 221.3599853515625px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6399999999999997s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6399999999999997s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
}

svg.active .svg-elem-23 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-24 {
  stroke-dashoffset: 155.54933166503906px;
  stroke-dasharray: 155.54933166503906px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.76s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.76s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
}

svg.active .svg-elem-24 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-25 {
  stroke-dashoffset: 184.92225646972656px;
  stroke-dasharray: 184.92225646972656px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.88s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.88s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
}

svg.active .svg-elem-25 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-26 {
  stroke-dashoffset: 253.2868194580078px;
  stroke-dasharray: 253.2868194580078px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s;
}

svg.active .svg-elem-26 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-27 {
  stroke-dashoffset: 198.46755981445312px;
  stroke-dasharray: 198.46755981445312px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.12s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
}

svg.active .svg-elem-27 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-28 {
  stroke-dashoffset: 103.45999145507812px;
  stroke-dasharray: 103.45999145507812px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2399999999999998s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2399999999999998s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s;
}

svg.active .svg-elem-28 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

svg .svg-elem-29 {
  stroke-dashoffset: 181.11129760742188px;
  stroke-dasharray: 181.11129760742188px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.36s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6000000000000005s;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.36s, fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6000000000000005s;
}

svg.active .svg-elem-29 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}

<button>
<svg viewBox="0 0 218 71" width="218" height="71">
  <g stroke="red">
    <path class="st6 svg-elem-23"
          d="M14.68 54.76V11.54h26.65v5.04h-21.1v13.55h18.33v5.04H20.23v14.55h21.48v5.04H14.68z" />
    <path class="st6 svg-elem-24"
          d="M60.48 37.56l9.7 17.2h-6.24l-6.49-12.1-6.68 12.1H45.1L54.75 38l-9.2-16.38h6.24l5.99 11.34 6.17-11.34h5.8l-9.27 15.94z" />
    <path class="st6 svg-elem-25"
          d="M94.63 30.12v18.59c0 1.58.88 2.21 1.76 2.21h2.02v3.59c-.57.31-1.76.76-3.4.76-2.71 0-4.6-1.64-5.23-4.1h-.32c-1.7 2.71-4.6 4.35-8.06 4.35-3.28 0-8.69-1.32-8.69-9.32 0-9.14 7.12-11.09 16.76-11.09v-4.28c0-3.15-1.01-5.36-5.23-5.36-3.91 0-5.1 2.71-5.1 5.23v.76h-5.1c-.06-.38-.06-.82-.06-1.39 0-6.05 4.41-9.2 10.65-9.2 6.66-.01 10 3.39 10 9.25zm-5.17 9.58c-6.74 0-11.34 1.01-11.34 6.17 0 3.78 1.58 5.04 4.47 5.04 3.28 0 6.87-2.71 6.87-8.19V39.7z" />
    <path class="st6 svg-elem-26"
          d="M138.54 30.88v23.88h-5.17v-23.5c0-4.6-1.83-5.8-4.28-5.8-3.09 0-5.67 3.34-5.67 9.07v20.22h-5.17v-23.5c0-4.6-1.83-5.8-4.28-5.8-3.09 0-5.73 3.34-5.73 9.07v20.22h-5.17V21.62h3.91l.69 3.84h.38c1.76-3.28 4.41-4.6 7.56-4.6 3.28 0 5.86 1.39 7.06 4.79 1.76-3.15 4.91-4.79 8.06-4.79 4.66 0 7.81 2.65 7.81 10.02z" />
    <path class="st6 svg-elem-27"
          d="M168.53 38.25c0 12.03-4.41 17.26-9.89 17.26-3.21 0-5.92-1.39-7.06-3.65h-.32v13.8h-5.17V21.62H150l.69 3.84h.31c1.58-3.02 4.22-4.6 7.25-4.6 6.31 0 10.28 5.23 10.28 17.39zm-17.27-1.26v2.39c0 7.62 1.95 11.53 5.92 11.53s5.92-3.28 5.92-11.53v-2.39c0-8.25-1.95-11.53-5.92-11.53s-5.92 3.91-5.92 11.53z" />
    <path class="st6 svg-elem-28"
          d="M179.36 54.76h-5.17V9.2h5.17v45.56z" />
    <path class="st6 svg-elem-29"
          d="M208.53 36.42v3.28h-17.96c.06 7.75 2.33 11.21 7.25 11.21 3.28 0 5.61-2.83 5.61-7.43h5.1c0 7.43-4.41 12.03-10.84 12.03-8.25 0-12.54-5.04-12.54-17.33 0-11.91 4.16-17.33 12.48-17.33 7.25.01 10.9 4.48 10.9 15.57zm-17.89-1.32h12.47c0-6.3-1.89-9.64-5.48-9.64-4.6 0-6.55 3.28-6.99 9.64z" />
  </g>
</svg>
</button>

Пришлось вырезать SVG, чтобы он поместился в этот фрагмент кода. Остальное все равно не видно. И терпения, у анимации большие задержки. Почти 3 секунды.

Изменить: сгенерированный код ... плохой.

Около 70% из CSS повторяется без надобности. Сокращено.

И SVG тоже можно оптимизировать, проверьте https://jakearchibald.github.io/svgomg/

const svg = document.querySelector('svg');

window.onload = function() {
  svg.classList.add("active");
}

document.querySelector("button").onclick = function() {
  svg.classList.toggle("active");
}

/* the redundant part: */
svg path {
  fill: transparent;
  transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715), 
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715);
}

svg.active path {
  stroke-dashoffset: 0;
  fill: #000;
}

/* 
  Here were a lot of useless animations defined, 
  for elements that are never visible 
  display: none; 
*/

/* the details for each specific animation (for actually visible elements) */
.svg-elem-23 {
  stroke-dashoffset: 221.3599853515625px;
  stroke-dasharray: 221.3599853515625px;
  transition-delay: 2.6399999999999997s, 3s;
}

.svg-elem-24 {
  stroke-dashoffset: 155.54933166503906px;
  stroke-dasharray: 155.54933166503906px;
  transition-delay: 2.76s, 3.1000000000000005s;
}

.svg-elem-25 {
  stroke-dashoffset: 184.92225646972656px;
  stroke-dasharray: 184.92225646972656px;
  transition-delay: 2.88s, 3.2s;
}

.svg-elem-26 {
  stroke-dashoffset: 253.2868194580078px;
  stroke-dasharray: 253.2868194580078px;
  transition-delay: 3s, 3.3s;
}

.svg-elem-27 {
  stroke-dashoffset: 198.46755981445312px;
  stroke-dasharray: 198.46755981445312px;
  transition-delay: 3.12s, 3.4000000000000004s;
}

.svg-elem-28 {
  stroke-dashoffset: 103.45999145507812px;
  stroke-dasharray: 103.45999145507812px;
  transition-delay: 3.2399999999999998s, 3.5s;
}

.svg-elem-29 {
  stroke-dashoffset: 181.11129760742188px;
  stroke-dasharray: 181.11129760742188px;
  transition-delay: 3.36s, 3.6000000000000005s;
}

<button>
  <svg viewBox="0 0 218 71" width="218" height="71">
    <g stroke="red">
      <path class="svg-elem-23"
            d="M14.68 54.76V11.54h26.65v5.04h-21.1v13.55h18.33v5.04H20.23v14.55h21.48v5.04H14.68z" />
      <path class="svg-elem-24"
            d="M60.48 37.56l9.7 17.2h-6.24l-6.49-12.1-6.68 12.1H45.1L54.75 38l-9.2-16.38h6.24l5.99 11.34 6.17-11.34h5.8l-9.27 15.94z" />
      <path class="svg-elem-25"
            d="M94.63 30.12v18.59c0 1.58.88 2.21 1.76 2.21h2.02v3.59c-.57.31-1.76.76-3.4.76-2.71 0-4.6-1.64-5.23-4.1h-.32c-1.7 2.71-4.6 4.35-8.06 4.35-3.28 0-8.69-1.32-8.69-9.32 0-9.14 7.12-11.09 16.76-11.09v-4.28c0-3.15-1.01-5.36-5.23-5.36-3.91 0-5.1 2.71-5.1 5.23v.76h-5.1c-.06-.38-.06-.82-.06-1.39 0-6.05 4.41-9.2 10.65-9.2 6.66-.01 10 3.39 10 9.25zm-5.17 9.58c-6.74 0-11.34 1.01-11.34 6.17 0 3.78 1.58 5.04 4.47 5.04 3.28 0 6.87-2.71 6.87-8.19V39.7z" />
      <path class="svg-elem-26"
            d="M138.54 30.88v23.88h-5.17v-23.5c0-4.6-1.83-5.8-4.28-5.8-3.09 0-5.67 3.34-5.67 9.07v20.22h-5.17v-23.5c0-4.6-1.83-5.8-4.28-5.8-3.09 0-5.73 3.34-5.73 9.07v20.22h-5.17V21.62h3.91l.69 3.84h.38c1.76-3.28 4.41-4.6 7.56-4.6 3.28 0 5.86 1.39 7.06 4.79 1.76-3.15 4.91-4.79 8.06-4.79 4.66 0 7.81 2.65 7.81 10.02z" />
      <path class="svg-elem-27"
            d="M168.53 38.25c0 12.03-4.41 17.26-9.89 17.26-3.21 0-5.92-1.39-7.06-3.65h-.32v13.8h-5.17V21.62H150l.69 3.84h.31c1.58-3.02 4.22-4.6 7.25-4.6 6.31 0 10.28 5.23 10.28 17.39zm-17.27-1.26v2.39c0 7.62 1.95 11.53 5.92 11.53s5.92-3.28 5.92-11.53v-2.39c0-8.25-1.95-11.53-5.92-11.53s-5.92 3.91-5.92 11.53z" />
      <path class="svg-elem-28"
            d="M179.36 54.76h-5.17V9.2h5.17v45.56z" />
      <path class="svg-elem-29"
            d="M208.53 36.42v3.28h-17.96c.06 7.75 2.33 11.21 7.25 11.21 3.28 0 5.61-2.83 5.61-7.43h5.1c0 7.43-4.41 12.03-10.84 12.03-8.25 0-12.54-5.04-12.54-17.33 0-11.91 4.16-17.33 12.48-17.33 7.25.01 10.9 4.48 10.9 15.57zm-17.89-1.32h12.47c0-6.3-1.89-9.64-5.48-9.64-4.6 0-6.55 3.28-6.99 9.64z" />
    </g>
  </svg>
</button>