Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Handwriting Animation</title>
  </head>
  <body>
    <main>
      
      <button id="restart">Do it again</button>

      <figure>
        <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 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
        <style type="text/css">
          
            .st0{clip-path:url(#SVGID_00000023246831468938226260000001078923984882804376_);fill:none;stroke:#231F20;stroke-width:50;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st1{clip-path:url(#SVGID_00000158710063624278205500000002583441121233317533_);fill:none;stroke:#231F20;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st2{clip-path:url(#SVGID_00000050652653085156465570000007381406609089576096_);fill:none;stroke:#231F20;stroke-width:50;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st3{clip-path:url(#SVGID_00000060006237212945702320000010450972080131470994_);fill:none;stroke:#231F20;stroke-width:42;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st4{clip-path:url(#SVGID_00000119080723530271294550000004030190334361256850_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st5{clip-path:url(#SVGID_00000024724343978686256530000002742285304139421111_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st6{clip-path:url(#SVGID_00000078735746394336606640000012822781753520848022_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st7{clip-path:url(#SVGID_00000183938321699886119260000010737163416165107358_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st8{clip-path:url(#SVGID_00000144312296452406557470000011212800993866217096_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st9{clip-path:url(#SVGID_00000081627440285294304480000006775546882008280249_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st10{clip-path:url(#SVGID_00000134249297276338281640000012796787566790191250_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st11{clip-path:url(#SVGID_00000147918117298605530630000013220707359503871377_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st12{clip-path:url(#SVGID_00000106866482051923921820000003253947469628129442_);fill:none;stroke:#231F20;stroke-width:50;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st13{clip-path:url(#SVGID_00000058550270251040270790000000280965721320567715_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st14{clip-path:url(#SVGID_00000082365232056881939650000012642379456123733643_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st15{clip-path:url(#SVGID_00000062904061403993615380000012458613989642652603_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st16{clip-path:url(#SVGID_00000163046582517764405640000014953523586106058126_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st17{clip-path:url(#SVGID_00000054265449111382875270000001027295703734134401_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st18{clip-path:url(#SVGID_00000096764027194267531190000002690875225165934497_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st19{clip-path:url(#SVGID_00000030449460682360247620000003746996566295204537_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st20{clip-path:url(#SVGID_00000173124862543888435760000010383021836053587128_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st21{clip-path:url(#SVGID_00000154419544598592138250000014480639257678024373_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st22{clip-path:url(#SVGID_00000099657932945519288000000000597334751057040787_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st23{clip-path:url(#SVGID_00000150060469961912071560000005517576188384741018_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st24{clip-path:url(#SVGID_00000172439775566248606170000001111980932529675958_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
          
            .st25{clip-path:url(#SVGID_00000133504148524815780940000011120240225245573777_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        </style>
        <g id="character-W">
          <g id="character-W-1">
            <defs>
              <path id="SVGID_1_" d="M500.6,658.6l3.9-4.9c2.1-2.7,2-6.5-0.2-9.1l0,0h-2.7c-0.8-0.2-1.7-0.8-2.6-1.7c-1.3-1.3-2.4-3.1-3.5-5.2
                s-1.9-4.4-2.7-6.8c-0.7-2.4-1.2-4.6-1.5-6.6c-0.4-3.3-1-8.6-1.6-15.9c-0.6-7.3-1.3-15.5-2-24.7s-1.5-18.8-2.3-28.8
                c-0.8-10.1-1.6-19.5-2.3-28.4c-0.7-8.9-1.3-16.7-1.8-23.3c-0.6-6.6-1-11.2-1.3-13.7c-0.9-7.1-2.9-13.2-6-18.4
                c-3-5.1-6.6-9.3-10.8-12.6c-4.1-3.2-8.6-5.5-13.3-6.8c-4.7-1.3-9.1-1.7-13.3-1.1c-1.3,0.2-2.8,0.5-4.4,1.1
                c-5.2,1-10.7,2.5-16.3,4.4c-5.6,1.9-11.7,4-18.2,6.1s-13.6,4.2-21.4,6.3c-7.7,2-16.2,3.7-25.4,4.9c-5.5,0.7-9.7,0.6-12.7-0.3
                s-5.3-2.1-7-3.5s-3.1-2.6-4.3-3.8c-1.2-1.2-2.7-1.7-4.7-1.4c-1.3,0.2-1.9,1.4-1.8,3.6c0.1,2.3,0.9,5,2.3,8.1
                c1.4,3.2,3.6,6.6,6.4,10.2c2.8,3.7,6.3,6.9,10.2,9.7c4,2.8,8.6,5,13.7,6.6c5.2,1.6,10.9,2,17.2,1.1c6.6-0.9,12.8-2,18.5-3.5
                c5.7-1.4,11.1-3,16.1-4.7c5.1-1.7,9.9-3.3,14.5-5c4.6-1.6,9.1-3,13.5-4.1c1.6,12.1,3,24.2,4.1,36.3c1.1,12.1,2.1,23.7,3.1,34.6
                c1,11,1.8,21.1,2.7,30.4c0.8,9.3,1.7,17.2,2.5,23.6c0.9,6.6,2.7,13,5.5,19.2s6.2,11.6,10.3,16.1c4.1,4.6,8.8,8.1,14,10.6
                s10.8,3.4,16.7,2.6c0.8-0.1,1.6-0.2,2.2-0.3c0.7-0.1,1.4-0.3,2.2-0.5l1.5-0.2C497.8,658.9,500.6,658.6,500.6,658.6z"/>
            </defs>
            <clipPath id="SVGID_00000015356536331628120730000007376495372048214146_">
              <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000015356536331628120730000007376495372048214146_);fill:none;stroke:#231F20;stroke-width:50;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M328.2,474.7c40.7,23.1,47,22,115.7-5.1c28.9-13.5-6.7,175.2,56.7,185.1"/>
          </g>
          <g id="character-W-2">
            <defs>
              <path id="SVGID_00000021797955550655693980000003472043716512256669_" d="M521.2,593.6c-1.5,11.7-3.3,22.3-5.6,31.9
                c-2.3,9.5-4.7,17.4-7.5,23.6c-2.4,5.4-4.9,8.5-7.5,9.6l3.7-14c1.9-4.5,3.6-10.6,5.2-18.5c1.5-7.9,2.9-16.7,4.2-26.4
                c1.2-9.7,2.3-19.7,3.2-30.2s1.6-20.5,2-30c0.5-9.6,0.8-18.2,0.8-26c0.1-7.7,0-13.7-0.2-17.9c-0.5-2.8-1.1-5.2-1.7-7.3
                c-0.6-2.1-0.8-3.8-0.7-5.2c0.2-1.4,1-2.4,2.5-3.1c1.3-0.6,3.3-1,6-1.4c1-0.1,2,0.6,2.2,1.6C531.4,497.7,522.6,582.4,521.2,593.6z
                "/>
            </defs>
            <clipPath id="SVGID_00000074426951435733016690000006015678838654011809_">
              <use xlink:href="#SVGID_00000021797955550655693980000003472043716512256669_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000074426951435733016690000006015678838654011809_);fill:none;stroke:#231F20;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M503,652.7c16-46.8,27.6-148.3,19.6-176.3"/>
          </g>
          <g id="character-W-3">
            <defs>
              <path id="SVGID_00000054955149782665835140000004926232007721721478_" d="M570.2,567.5c-0.6-4.5-1.1-8.5-1.5-12
                c-0.4-3.6-0.8-7.1-1.3-10.7c-0.5-3.6-0.9-7.4-1.4-11.5s-1.1-9-1.8-14.6c-0.7-5.1-2.3-10.1-4.8-15s-5.4-9.2-8.8-13.1
                c-3.4-3.8-7.1-6.8-11.2-9c-4.1-2.1-7.9-3.1-11.6-3c-3.7,0.3-6.2,0.8-7.7,1.5s-2.3,1.7-2.5,3.1s0.1,3.1,0.7,5.2
                c0.6,2.1,1.2,4.5,1.7,7.3c0.2,4.2,0.3,10.1,0.2,17.9c-0.1,7.7,4.6,45.3,4.6,45.3s6.1,31.7,9.9,43.3c3.8,11.6,8,20.8,12.5,27.7
                s9.4,11.6,14.5,14.1s10.3,3.4,15.6,2.7c1-0.1,1.9-0.3,2.7-0.5s1.6-0.4,2.4-0.7c0.7-0.2,1.3-1.2,1.8-2.5c1.1-3,1.2-6.3,0.5-9.5
                C581.7,619.7,570.8,572.1,570.2,567.5z"/>
            </defs>
            <clipPath id="SVGID_00000134957159940694638270000001999664591053076889_">
              <use xlink:href="#SVGID_00000054955149782665835140000004926232007721721478_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000134957159940694638270000001999664591053076889_);fill:none;stroke:#231F20;stroke-width:50;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M528.5,486.5c25.4,56,13.4,124.4,57.4,152.3"/>
          </g>
          <g id="character-W-4">
            <defs>
              <path id="SVGID_00000078763426381912164950000007702283811173118364_" d="M577.4,646.6c1-0.1,1.9-0.3,2.7-0.5s1.6-0.4,2.4-0.7
                c6.5-1.5,12.9-5,19-10.5c6.2-5.4,11.8-12.2,17-20.4c5.1-8.2,9.7-17.4,13.8-27.7s7.4-21.2,9.9-32.6c2.5-11.4,4.1-23.1,4.8-35.1
                c0.7-11.9,0.3-23.5-1.2-34.8c-2.7-20-6.8-36.6-12.4-49.8c-5.6-13.2-11.8-23.6-18.6-31.3c-6.7-7.7-13.6-12.9-20.6-15.8
                c-7-2.8-13.3-3.9-19-3.1c-3.8,0.5-5.8,1.6-6.1,3.2s0.5,4.1,2.5,7.4s4.7,7.4,8.2,12.4s7.2,11.1,10.9,18.3
                c3.7,7.2,7.3,15.7,10.6,25.5c3.3,9.7,5.8,20.9,7.5,33.4c1.1,8.1,1.7,16.9,1.9,26.5c0.2,9.6,0,19.3-0.6,29.2s-1.6,19.7-3,29.4
                s-3.1,18.7-5,26.9s-4.1,15.5-6.6,21.7C592.9,624.4,577.4,646.6,577.4,646.6z"/>
            </defs>
            <clipPath id="SVGID_00000065757367994642657400000007874406906497485440_">
              <use xlink:href="#SVGID_00000078763426381912164950000007702283811173118364_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000065757367994642657400000007874406906497485440_);fill:none;stroke:#231F20;stroke-width:42;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M585.9,638.8c0,0,97.9-152.3-8.3-247.5"/>
          </g>
        </g>
        <g id="character-A">
          <g id="character-A-1">
            <defs>
              <path id="SVGID_00000053535185229213954940000005116387409966332607_" d="M720.7,569.2c-0.6,3.2-2.4,14-2.9,16s-1.2,4.4-2.1,7.3
                c-0.9,2.9-1.9,6.1-3.2,9.6c-1.2,3.5-2.7,6.8-4.5,9.8s-3.9,5.6-6.4,7.9c-2.5,2.3-5.4,3.6-8.7,4c-5,0.6-9.7,0.4-14.2-0.8
                s-8.6-3.5-12.4-6.8c-3.7-3.4-6.9-8-9.5-13.8s-4.5-13-5.6-21.6c-1-8.1-1.1-17.3-0.2-27.5s3.1-19.9,6.5-29.2s8.1-17.3,14.2-24
                c6-6.7,13.6-10.7,22.9-11.9c6.4-0.8,12.3-1.4,17.7-1.7c5.3-0.3,10.1,0.5,14.3,2.2s7.6,4.9,10.4,9.5c2.8,4.6,4.8,11.4,5.9,20.5
                c0.1,0.9-0.3,1.9-1.3,2.8c-0.7,0.6-1.4,1.1-2.2,1.5c-1.3,0.5-2.4,0.6-3.5,0.3c-1-0.3-1.5-1.1-1.7-2.4c-0.2-1.5-0.6-3.6-1.2-6.4
                c-0.6-2.8-1.5-5.6-2.7-8.3c-1.2-2.8-2.6-5.2-4.3-7.1c-1.7-2-3.7-2.8-6-2.5c-6.1,0.8-11.6,4.1-16.5,9.8c-4.9,5.8-8.9,13.1-12,22.1
                s-5.2,19-6.3,30.1s-0.9,22.3,0.6,33.7c0.3,2.3,0.7,4.9,1.2,7.7s1.2,5.3,2.1,7.7c0.9,2.3,2,4.2,3.4,5.7s3,2.1,4.8,1.9
                c1.2-0.2,2.4-1.6,3.7-4.4c1.3-2.8,2.6-6.3,3.8-10.7s2.3-9.1,3.3-14.3s1.8-10.2,2.4-15.2c0.6-5,1.1-9.5,1.4-13.7
                c0.3-4.2,0.3-7.3,0-9.5c-0.1-1.2-0.2-2.6-0.3-4.2c-0.1-1.7,0.3-3.3,1-4.8s2-2.9,3.9-4.2c0,0,0,0,0.1,0c3.5-2.3,8.1,0.7,7.6,4.8
                C722.6,553.1,721.2,566,720.7,569.2z"/>
            </defs>
            <clipPath id="SVGID_00000076565911876307879240000012804802039011953844_">
              <use xlink:href="#SVGID_00000053535185229213954940000005116387409966332607_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000076565911876307879240000012804802039011953844_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M738.6,516.2c0,0-10.4-47.1-47.9-14c-43.2,38.2-12.6,160.2,15.9,103.2c0,0,11.7-29.8,13.6-63.6"/>
          </g>
          <g id="character-A-2">
            <defs>
              <path id="SVGID_00000052808683036919632590000002375631811535718558_" d="M712,547.5c-0.1-1.2-0.2-2.6-0.3-4.2
                c-0.1-1.7,0.3-3.3,1-4.8s2-2.9,3.9-4.2c1.9-1.2,4.7-2.1,8.5-2.6c7.6-1,13.2-0.3,16.9,2s5.7,4.8,6,7.4l0.5,4
                c0.7,4.3,1.5,10,2.5,17.2c0.9,7.2,2.1,14.3,3.4,21.2c1.3,7,2.8,13,4.5,18s3.5,7.4,5.5,7.1c0.8-0.1,2-2.2,3.5-6.4
                c1.5-4.1,3-9.3,4.7-15.5c1.6-6.2,3.3-12.9,5.1-20.3c1.7-7.4,3.3-14.3,4.7-20.8s2.6-12.1,3.6-16.7c1-4.7,1.6-7.5,1.8-8.6
                c0.2-1.4,0.6-2.4,1.4-3.1c0.8-0.7,1.5-1,2.3-1s1.4,0.4,1.9,1.1c0.5,0.8,0.7,1.9,0.6,3.5c0,1-0.4,4.1-1.2,9.1
                c-0.8,5.1-1.9,11.2-3.3,18.3c-1.4,7.2-3.1,14.9-5.1,23.2c-1.9,8.3-4.2,16.2-6.7,23.6c-2.5,7.4-5.2,13.9-8.2,19.5
                s-6.1,9.2-9.4,10.8c-0.8,0.6-2.1,1-3.9,1.3c-4,0.5-7.6-0.2-10.8-2.3c-3.2-2-6.2-4.7-8.8-7.9c-2.7-3.3-5.1-6.9-7.1-10.9
                s-3.8-7.7-5.2-11.2c-1.5-3.4-2.6-6.3-3.4-8.6C719.9,583.3,714,567.8,712,547.5z"/>
            </defs>
            <clipPath id="SVGID_00000057866652038593130940000010431533104366364813_">
              <use xlink:href="#SVGID_00000052808683036919632590000002375631811535718558_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000057866652038593130940000010431533104366364813_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M728.7,541.8c0,0,20.2,107.5,37.2,71.1s24.7-88.1,24.7-88.1"/>
          </g>
        </g>
        <g id="character-N">
          <g id="character-N-1">
            <defs>
              <path id="SVGID_00000079464445712724348190000004408983184745861005_" d="M813.3,605.6c0.3,1.6-0.8,3.2-2.4,3.4l0,0
                c-6,0.7-11.2-0.9-15.6-4.6c-4.5-3.8-8.3-8.7-11.5-14.7s-5.8-12.7-7.8-20s-3.6-14.2-4.8-20.7s-2-12-2.4-16.6s-0.7-7.2-0.8-7.8
                c-0.1-1.2-0.3-1.9-0.6-2.3c-0.3-0.4-0.7-0.8-1.1-1.1c-0.5-0.4-0.8-0.7-1.1-1.1c-0.3-0.4-0.5-1.2-0.6-2.3
                c-0.1-1.2,1.7-2.3,5.4-3.4c3.7-1.1,7.9-1.7,12.5-1.8s8.9,0.6,12.9,2c4,1.5,6.3,4.2,6.7,8.2c0.2,1.3,0.4,3.8,0.7,7.3
                c0.3,3.6,0.6,7.5,1,11.7c0.3,4.2,0.7,8.4,1,12.3C805.1,558.1,811.9,597.8,813.3,605.6z"/>
            </defs>
            <clipPath id="SVGID_00000171713554687619078880000013100451149496487808_">
              <use xlink:href="#SVGID_00000079464445712724348190000004408983184745861005_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000171713554687619078880000013100451149496487808_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M783,521.4c0,0,4.4,55.1,25.4,77.1"/>
          </g>
          <g id="character-N-2">
            <defs>
              <path id="SVGID_00000160876805035339528150000015668620362928367744_" d="M836.2,504.8c-1.4,7-3,14.4-4.5,22.4s-3,16-4.5,24.2
                c-1.5,8.1-3,15.8-4.5,22.9c-1.5,7.1-3,13.5-4.5,19s-2.9,9.6-4.3,12.1c0,1.2-0.6,2.1-1.7,2.7l-0.7,0.1c-0.2,0.1-0.8-0.2-1.5-0.8
                c-4.8-3.8-7-10-5.9-15.9c1.9-10.1,4.9-25.1,5.9-30.1c1.5-7,3-14.4,4.8-22.1c1.7-7.7,3.7-15.3,5.8-22.9c2.1-7.6,4.4-14.7,6.7-21.3
                c2.4-6.6,4.8-12.3,7.5-17.1c2.6-4.8,5.3-8.2,8.1-10.2c0.3-0.4,0.9-0.8,1.9-1.2c0.5-0.2,0.9-0.4,1.3-0.5c0.4-0.1,0.9-0.2,1.4-0.3
                C848.3,465.6,841,480.3,836.2,504.8z"/>
            </defs>
            <clipPath id="SVGID_00000166658156891830164140000001999741934765142205_">
              <use xlink:href="#SVGID_00000160876805035339528150000015668620362928367744_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000166658156891830164140000001999741934765142205_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M808.5,598.5c0,0,17.2-117.1,43.8-129.4"/>
          </g>
          <g id="character-N-3">
            <defs>
              <path id="SVGID_00000105412474612906916700000006014685221286704825_" d="M843.9,467.7c0.3-0.4,0.9-0.8,1.9-1.2
                c0.5-0.2,0.9-0.4,1.3-0.5c0.4-0.1,0.9-0.2,1.4-0.3c0.8-0.1,1.6-0.2,2.4-0.3c0.7-0.1,1.5-0.1,2.4,0c3.8-0.4,6.2-0.3,7.1,0.4
                c4.1,0.7,7.9,2,11.4,3.9s5.4,4.3,5.7,7.3c0.2,2,0.2,5,0,9.1s-0.5,8.7-0.8,13.9c-0.3,5.2-0.7,10.8-1.2,16.7
                c-0.4,5.9-0.8,11.7-1.1,17.2c-0.3,5.6-0.5,10.8-0.6,15.7s0,8.9,0.4,12c1.1,9.4,2.2,16.6,3.2,21.4c1.1,4.8,2.1,8.4,3,10.9
                c0.9,2.4,1.7,4.2,2.3,5.3c0.7,1.1,1.1,2.6,1.3,4.4c0.2,1.8-1.6,3-5.5,3.4s-8.4-0.5-13.4-2.7s-9.9-6.3-14.5-12.1
                s-7.5-13.9-8.7-24.3c-0.8-7-1.3-14.1-1.6-21.6c-0.3-7.4-0.4-14.7-0.4-21.8s0.2-13.9,0.5-20.3
                C840.7,497.7,841.1,469.7,843.9,467.7z"/>
            </defs>
            <clipPath id="SVGID_00000045609066869271829200000018440741996490372225_">
              <use xlink:href="#SVGID_00000105412474612906916700000006014685221286704825_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000045609066869271829200000018440741996490372225_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M859.7,469.1c0,0-20.3,103.9,16,133.7"/>
          </g>
        </g>
        <g id="character-D">
          <g id="character-D-1">
            <defs>
              <path id="SVGID_00000142173284081519838320000016138786942749484701_" d="M956,463.8c0.3-9.4,0.8-18.8,1.4-28.1
                c0.6-9.3,1.1-17.8,1.6-25.2c0.5-7.5,0.9-13.6,1.2-18.3c0.3-4.7,0.5-7.2,0.5-7.6c-0.1-1,0-2.3,0.4-3.8s1.7-2.4,4-2.6
                c1.2-0.1,3.3,0.2,6.3,0.8c3.1,0.6,6.2,1.6,9.4,2.8c3.2,1.2,6.1,2.7,8.6,4.5s3.9,3.8,4,5.9c0.2,2.3-0.3,7.4-1.5,15.2
                c-1.2,7.8-2.5,17.4-3.7,28.7c-1.2,11.3-2.2,23.8-2.9,37.5s-0.4,27.4,0.8,41.2c1.4,15.9,3,29.4,4.9,40.4c1.8,11,3.6,20.1,5.2,27.3
                c1.7,7.2,3.2,12.8,4.5,16.8c1.4,4,2.4,6.9,3.1,8.9c0.7,1.9,0.8,3.1,0.3,3.6s-1.6,0.8-3.4,0.9c-5.3,0.5-10-0.4-14.2-2.7
                c-4.1-2.3-7.8-5.3-11-8.9c-3.2-3.6-5.9-7.7-8.1-12.1c-2.2-4.4-4.1-8.5-5.5-12.3s-3.2-9.6-3.2-9.6
                C952.8,536.9,956,463.8,956,463.8z"/>
            </defs>
            <clipPath id="SVGID_00000049932475941974040920000012703362659943039409_">
              <use xlink:href="#SVGID_00000142173284081519838320000016138786942749484701_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000049932475941974040920000012703362659943039409_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M976.3,384.1c0,0-28.4,155.1,17.8,221.6"/>
          </g>
          <g id="character-D-2">
            <defs>
              <path id="SVGID_00000082348707380455131320000015633930980480167843_" d="M958,463.8c-2.7-2.6-6.3-4-10.7-4.1s-10,0.1-17,0.8
                c-6.1,0.5-11.6,2.4-16.4,5.6c-4.8,3.2-9.1,7.3-12.7,12.2c-3.7,4.9-6.8,10.5-9.3,16.8s-4.5,12.7-5.9,19.2
                c-1.4,6.6-2.3,13.1-2.8,19.5c-0.4,6.4-0.4,12.3,0.1,17.8c0.8,8.6,2.6,15.9,5.3,21.7c2.8,5.9,6.2,10.5,10.3,14s8.6,5.9,13.6,7.2
                s9.9,1.7,14.9,1.3s9.3-2.4,13-5.8c3.7-3.4,6.8-7.1,9.4-11.1c2.6-4,4.6-7.6,6.2-10.8c1.5-3.2,14.5-34.7,16.3-40.2s3.5-9.8,1.5-13
                s-8.9-4.2-11.9-3.1s-4.7,12.1-4.7,12.1c-0.2,1.5-0.4,3.1-0.8,5c-0.8,4.2-1.9,8.8-3.4,13.7c-1.5,5-3.2,10.1-5,15.3
                c-1.9,5.2-3.8,10-5.7,14.3c-2,4.4-3.9,7.9-5.7,10.7s-3.3,4.2-4.5,4.3c-1.8,0.2-3.6-0.5-5.3-2s-3.3-3.4-4.7-5.7s-2.5-4.8-3.3-7.6
                s-1.4-5.3-1.6-7.6c-1-11.5-1.2-22.7-0.4-33.6c0.8-10.9,2.3-20.7,4.6-29.4c2.3-8.7,5.3-15.7,8.9-21.1c3.6-5.4,7.7-8.3,12.4-8.8
                c2.3-0.2,3.9,0.7,4.8,2.8c0.9,2.1,1.3,4.6,1.4,7.5c0.1,2.9,0,5.8-0.2,8.7c-0.2,2.9-0.3,5-0.2,6.3s1,2.1,2.7,2.4s3.5,0.2,5.5-0.1
                c0,0,4.3-3.9,5-12.4C963.4,466.8,958,463.8,958,463.8z"/>
            </defs>
            <clipPath id="SVGID_00000000207412591451959280000003546819472065484930_">
              <use xlink:href="#SVGID_00000082348707380455131320000015633930980480167843_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000000207412591451959280000003546819472065484930_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M956.8,486.5c0,0,2.8-27.6-20.8-20.3c-23.6,7.3-43.5,52.5-36.1,91.5c7.4,38.9,39.6,51.9,56.9,0s18-69.7,18-69.7"/>
          </g>
        </g>
        <g id="character-E">
          <g id="character-E-1">
            <defs>
              <path id="SVGID_00000062158004767206687770000007133156859511797138_" d="M1072.5,473.2c-0.4-7-2-13-4.8-18.1
                c-2.7-5.1-14.5,10.4-13.2,13c1.2,2.6,2,5.8,2.2,9.6c0.2,3.8-0.1,7.9-1,12.2c-0.9,4.3-2.5,8.1-4.8,11.3c-2.3,3.2-5.3,5.6-9.1,7.1
                c-3.1,1.2-6.8,1.2-11.1,0.1l0,0c-1.9-0.4-6.8-1.6-7.7-0.8c-1.2,1,2.7,4.6,4.7,5.2l0.7,0.2c3.8,0.8,5,1.1,8.3,1.5
                c3.3,0.5,6.4,0.6,9.4,0.4c8.1-0.5,14.8-4.3,19.8-11.4C1071.2,496.5,1073.3,486.3,1072.5,473.2z"/>
            </defs>
            <clipPath id="SVGID_00000160880053174136733690000016650125187257248404_">
              <use xlink:href="#SVGID_00000062158004767206687770000007133156859511797138_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000160880053174136733690000016650125187257248404_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1028,510.2c0,0,30,6.1,33.6-17.3c3.6-23.4-2.9-40.4-20.3-38.8"/>
          </g>
          <g id="character-E-2">
            <defs>
              <path id="SVGID_00000005978581989813842280000009832416691362944144_" d="M1104.5,504.3c-0.4-0.8-0.9-1.3-1.6-1.5s-1.3-0.1-2,0.4
                c-0.6,0.5-1.2,1.3-1.6,2.5c-0.3,0.7-0.7,2.5-1.3,5.5c-0.6,3-1.5,6.4-2.9,10.4c-1.3,4-3,8.2-5,12.7s-4.5,8.6-7.5,12.5
                s-6.5,7.1-10.5,9.8s-8.7,4.2-14,4.5c-3.5,0.2-7-1-10.6-3.7s-6.8-6.3-9.7-10.8c-2.9-4.5-5.9-9.5-7.1-15.6
                c-5.3-26.3-1.5-34.2-0.4-39.3c1-5.1,2.4-9.6,4.2-13.5c1.8-3.9,3.9-7.2,6.4-9.7s5.4-3.8,8.8-4.1c2.2-0.1,3.9,1.1,5.1,3.7
                s16-7.9,13.2-13c-2.7-5.1-6.1-8.4-10-10c-2.1-0.9-4.9-1.4-8.6-1.7c-3.7-0.3-7.6-0.2-11.6,0.1c-4.1,0.3-8.1,1.2-12,2.5
                s-7.1,3.2-9.4,5.5c-2.3,2.5-4.9,6.2-7.7,11c-2.8,4.9-5.3,10.5-7.6,17s-4.1,13.6-5.4,21.3c-1.4,7.7-1.8,15.6-1.3,23.8
                c0.4,6.3,2,12.7,4.9,19.1c2.9,6.4,6.9,12.2,12,17.4s11.2,9.3,18.3,12.4c7.1,3.1,15,4.3,23.7,3.8c6.5-0.4,12.3-2.3,17.3-5.6
                c5.1-3.3,9.4-7.4,13.1-12.3c3.7-4.9,6.8-10.2,9.4-15.9s4.7-11,6.3-16c1.6-5,2.8-9.4,3.6-13c0.8-3.6,1.3-5.9,1.6-6.7
                C1104.8,506.2,1104.8,505.1,1104.5,504.3z"/>
            </defs>
            <clipPath id="SVGID_00000011031341946264118290000003813265509825089463_">
              <use xlink:href="#SVGID_00000005978581989813842280000009832416691362944144_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000011031341946264118290000003813265509825089463_);fill:none;stroke:#231F20;stroke-width:50;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1058.8,459.7c-11.1-9-54.4-15.8-54.4,47.7c0,41.8,25.2,66.2,50.8,64.1c40.3-3.2,39.2-35.3,47.7-68.7"/>
          </g>
        </g>
        <g id="character-R">
          <g id="character-R-1">
            <defs>
              <path id="SVGID_00000168819515804940922740000016198242938016456873_" d="M1122.2,567.1c0.8,3.1,1.6,5.6,2.3,7.6
                c0.7,2,1.3,3.6,1.8,4.8s0.7,2.4,0.7,3.4c0,1.2-0.9,2.3-2.9,3.5c-2,1.1-4.5,1.5-7.6,1.2s-6.4-1.7-10-4.1s-7-6.6-10.2-12.6
                c-3.3-6-6-14.1-8.3-24.4c-2.3-10.3-3.7-23.5-4.1-39.6c-0.2-6.3-0.2-13.2,0-20.5s0.7-14.2,1.4-20.4c0.7-6.3,1.8-11.5,3.2-15.7
                c1.4-4.2,3.2-6.3,5.3-6.4c8.5-0.2,14.8,1.5,18.8,5.1s6.1,8.1,6.3,13.5c0.1,2.5-0.1,5.2-0.5,8.1s-0.9,6.1-1.5,9.5s-1,7.2-1.4,11.2
                s-0.2,8.4-0.4,13C1114.1,535.1,1121.3,564,1122.2,567.1z"/>
            </defs>
            <clipPath id="SVGID_00000123406301603541103520000014489427336296465829_">
              <use xlink:href="#SVGID_00000168819515804940922740000016198242938016456873_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000123406301603541103520000014489427336296465829_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1104.7,446.9c0,0-18.3,80.6,13.1,134.9"/>
          </g>
          <g id="character-R-2">
            <defs>
              <path id="SVGID_00000027572261011247867290000006422858951462775186_" d="M1120.5,510.3c1.6-6.6,3.5-13.1,5.6-19.8
                c2.1-6.6,4.3-13.1,6.7-19.3c2.4-6.2,4.8-11.8,7.2-16.6c2.4-4.8,4.7-8.7,6.9-11.7c2.2-3,4.4-4.5,6.4-4.6c3.5-0.1,7-0.1,10.5-0.1
                c2,0,4.8,0.6,6.9,1.1c0.8,0.2,1,1.3,0.2,1.7c-6.4,3.2-23.3,14.9-36.2,54.3c-1.7,4.9-3.4,9.9-5.1,15.2c-1.7,5.2-3.2,10.4-4.6,15.6
                c-1.4,5.2-2.5,10.3-3.4,15.4c-6.9,38.5-1.6,46.4-4.7,46c-3.1-0.3-6.4-1.7-10-4.1S1118.9,516.8,1120.5,510.3z"/>
            </defs>
            <clipPath id="SVGID_00000077308926942069336100000015681227876302043837_">
              <use xlink:href="#SVGID_00000027572261011247867290000006422858951462775186_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000077308926942069336100000015681227876302043837_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1111.4,568.8c0,0,17-116,52.5-127.3"/>
          </g>
          <g id="character-R-3">
            <defs>
              <path id="SVGID_00000124124182131268071860000002872175008997653695_" d="M1149.8,442.8c-1.2-3.5,4.4-4.5,6.4-4.6
                c3.5-0.1,7-0.1,10.5-0.1c3.5,0.1,6.7,0.6,9.7,1.7c2.9,1.1,5.4,3,7.3,5.7s2.9,6.6,3.1,11.8c0.1,5.2,0,10.2-0.6,15.1
                c-0.5,4.9-1.4,9.3-2.8,13.1c-1.3,3.8-3.1,6.9-5.2,9.3c-2.2,2.4-4.9,3.6-8,3.7c-6.3,0.2-11.6-0.7-15.8-2.7c-4.2-2-6.4-4.4-6.5-7.2
                c0-1.3,0.1-3.5,0.4-6.5s0.7-6,1.1-9C1150,469.7,1152.5,450.9,1149.8,442.8z"/>
            </defs>
            <clipPath id="SVGID_00000057115961186858561600000006098761398707569589_">
              <use xlink:href="#SVGID_00000124124182131268071860000002872175008997653695_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000057115961186858561600000006098761398707569589_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1167.3,441.5c0,0,5.5,10.5-1.8,53.4"/>
          </g>
        </g>
        <g id="character-L">
          <g id="character-L-1">
            <defs>
              <path id="SVGID_00000122002009343086518240000015693740982601527994_" d="M1203.7,368.9c-0.1-5,1.4-8.2,4.6-9.6s6.8-1.5,10.8-0.3
                s7.7,3.4,11.1,6.6s5.2,6.7,5.3,10.5c0.2,2.7-0.1,7.7-0.8,15c-0.7,7.3-1.6,16-2.8,26.1c-1.1,10.1-2.3,20.9-3.5,32.6
                s-2.4,23.1-3.6,34.4c-1.1,11.2-2,21.7-2.7,31.4c-0.6,9.7-0.8,17.5-0.5,23.5c0.5,9.2,1.3,17.1,2.5,23.6c1.2,6.6,2.6,12.1,4,16.5
                c1.5,4.4,2.9,7.9,4.2,10.5c1.3,2.6,2.2,4.6,2.7,5.9c0.5,1.3,0.4,2.3-0.1,2.7c-0.6,0.5-2,0.7-4.4,0.7c-3.5,0.1-7.5-1.2-12-4.1
                c-4.5-2.9-8.8-7.2-12.8-12.9c-4.1-5.8-7.6-13-10.5-21.6c-3-8.6-4.7-18.6-5.1-29.9c-0.3-7.7-0.2-16.7,0.4-27s1.4-21.2,2.4-32.5
                c1.1-11.3,2.2-22.7,3.6-34c1.3-11.3,2.5-21.7,3.7-31.1c1.1-9.4,2-17.4,2.8-24.1C1203.6,375.2,1203.9,370.9,1203.7,368.9z"/>
            </defs>
            <clipPath id="SVGID_00000005267981174059753450000012473974000372939686_">
              <use xlink:href="#SVGID_00000122002009343086518240000015693740982601527994_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000005267981174059753450000012473974000372939686_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1218.2,364.5c17.2,22-34.1,150.6,4.7,223.1"/>
          </g>
        </g>
        <g id="character-U">
          <g id="character-U-1">
            <defs>
              <path id="SVGID_00000170993790497153778210000001079044218912098204_" d="M1265.3,575.5c0.4,1.4,0.8,2.5,1.2,3.6
                c0.4,1,0.5,2.2,0.5,3.5c-0.1,1.2-1,1.9-2.9,2.1c-1.8,0.2-4.2-0.1-7-0.9c-2.8-0.9-5.7-2.4-8.8-4.4c-3.1-2.1-5.9-4.9-8.6-8.7
                c-2.7-3.7-4.8-8.3-6.4-13.7s-2.2-11.8-1.9-19.1c0.3-6.8,1-14.3,2-22.6s2.1-16.1,3.2-23.8c1.1-7.6,2.1-14.4,3.1-20.4
                c0.9-6,1.5-10,1.6-12.2c0.1-1.5-0.2-3-0.7-4.7c-0.5-1.6-0.9-3.1-1-4.4c-0.2-1.3,0.1-2.4,0.9-3.2c0.8-0.8,2.6-1.1,5.4-1
                c3.3,0.2,6.7,0.8,10.1,1.8c3.4,1.1,6.4,2.4,9.2,4.1c2.8,1.6,5,3.5,6.7,5.6s2.6,4.2,2.5,6.4c-0.1,2.3-0.8,5.8-2,10.4
                s-2.6,10.1-4,16.6c-1.5,6.4-2.9,13.7-4.3,21.7c-1.4,8-2.3,16.5-2.7,25.3c-0.3,7.5-0.4,13.6-0.1,18.3
                C1261.7,560.5,1265.3,575.5,1265.3,575.5z"/>
            </defs>
            <clipPath id="SVGID_00000114794628251982531990000013839042802223785628_">
              <use xlink:href="#SVGID_00000170993790497153778210000001079044218912098204_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000114794628251982531990000013839042802223785628_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1252.9,454c23.8,11.9-32.5,73.4,6.5,124.4"/>
          </g>
          <g id="character-U-2">
            <defs>
              <path id="SVGID_00000093162092877305135360000005420344045369925295_" d="M1263.6,566.3c1.3-2.8,3.1-6.4,5.3-11
                c2.2-4.6,4.5-9.5,6.8-14.8s4.7-10.8,7.1-16.4c2.4-5.6,6.2-15.9,6.2-15.9s12-27.1,15.2-26.6s-17.4,48.4-17.1,46.1
                c0,0-22.2,48.2-23.9,51.6c-1.7,3.4-4.9,4.2-3.9-0.8C1260.2,574.8,1263.6,566.3,1263.6,566.3z"/>
            </defs>
            <clipPath id="SVGID_00000132053240370581124900000001054562405198876051_">
              <use xlink:href="#SVGID_00000093162092877305135360000005420344045369925295_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000132053240370581124900000001054562405198876051_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1259.4,578.3c0,0,42.6-90.9,46.6-93.8"/>
          </g>
          <g id="character-U-3">
            <defs>
              <path id="SVGID_00000145771379669249134860000013066896395173340606_" d="M1289.7,496.5c0.3-3.7,0.5-6.1,0.6-7.5
                c0.1-2.3,0.6-4.7,1.6-7.2c0.9-2.5,2.9-3.6,5.9-3.5c1.5,0.1,3.9,0.3,7.1,0.8s6.4,1.3,9.6,2.6c3.2,1.2,6,2.9,8.4,4.9
                s3.5,4.5,3.4,7.5c-0.1,2-0.4,4-0.9,6.1s-1.1,4.8-1.8,8.3c-0.7,3.5-1.3,8-2,13.7c-0.7,5.6-1.2,13-1.7,22.2
                c-0.3,7.3-0.2,13.4,0.5,18.2s1.3,8.6,1.7,11.3c0.5,2.8,0.5,4.7,0.1,5.9s-1.8,1.7-4.3,1.6c-4-0.2-8-1.1-12-2.7
                c-4-1.6-7.6-4.1-10.7-7.4c-3.1-3.3-5.6-7.5-7.4-12.6c-1.9-5.1-2.6-11.1-2.3-18.1c0.1-1.8,0.2-3.7,0.3-5.7c0.1-2,0.3-4.2,0.6-6.5
                C1286.5,528.4,1289.3,500.2,1289.7,496.5z"/>
            </defs>
            <clipPath id="SVGID_00000157272460515699029950000017456714282126581634_">
              <use xlink:href="#SVGID_00000145771379669249134860000013066896395173340606_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000157272460515699029950000017456714282126581634_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1306,484.5c12.5,10-13.6,38.3,6.7,88.1"/>
          </g>
        </g>
        <g id="character-S">
          <g id="character-S-1">
            <defs>
              <path id="SVGID_00000160152796464172879630000017064831218867259268_" d="M1370.6,472.5c-8.4-1.3-11.1-12.1-4.3-17.1
                c0.1,0,0.1-0.1,0.2-0.1c5.2-3.8,10.1-5.4,14.5-4.9c4.5,0.5,9.3,1.1,14.4,1.7s9.8,1.5,13.9,2.9c4.1,1.3,7.5,3.3,10,6.1
                c2.5,2.7,3.5,6.4,3,11s-2.4,9.3-5.5,14s-6.6,8.9-10.3,12.7c-3.7,3.8-7.2,6.8-10.6,9.1c-3.4,2.3-5.5,3.4-6.5,3.3
                c-1.2-0.1-1.3-2-0.4-5.6s2-7.5,3.2-11.8s2.3-8.2,3.2-11.8c0.9-3.6,0.9-5.4-0.1-5.5C1393.7,476,1381.6,474.2,1370.6,472.5z"/>
            </defs>
            <clipPath id="SVGID_00000136400348999649543870000000784896345488222111_">
              <use xlink:href="#SVGID_00000160152796464172879630000017064831218867259268_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000136400348999649543870000000784896345488222111_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1392.4,506.9c0,0,33.3-29.7,9.8-42.1c0,0-8.6-5-26,0"/>
          </g>
          <g id="character-S-2">
            <defs>
              <path id="SVGID_00000047044626892516562470000011707467779477037713_" d="M1357.2,540.6c-3.2-1-6.4-2.5-9.4-4.4
                c-3.1-1.9-5.7-4.1-7.9-6.8c-2.2-2.7-3.8-5.9-4.9-9.8c-1.1-3.8-1.3-8.2-0.8-13.2c0.6-5.5,2.6-11.5,5.9-18.2s7.2-12.9,11.7-18.7
                c4.5-5.8,9.4-10.5,14.6-14.3s10.1-5.4,14.5-4.9c4.5,0.5,9.3,1.1,14.4,1.7s9.8,1.5,13.9,2.9h0.1c5.1,1.6,5.9,8.6,1.4,11.5
                l-15.4,9.8c-3.1-0.4-6.3,0.5-9.6,2.5c-3.3,2.1-6.3,4.7-9.2,8c-2.9,3.3-5.4,6.9-7.5,11c-2.1,4-3.7,7.8-4.7,11.3s-1.2,6.5-0.8,9
                c0.5,2.5,1.9,3.9,4.4,4.2c1,0.1,2.8,0.4,5.5,0.8c2.6,0.4,5.6,0.9,8.9,1.6c3.3,0.7,6.6,1.7,10.1,2.9s6.6,2.8,9.3,4.7
                c2.7,1.9,4.9,4.2,6.5,6.9C1409.7,541.8,1394.6,548.5,1357.2,540.6z"/>
            </defs>
            <clipPath id="SVGID_00000136387809682612379350000013964582531207836838_">
              <use xlink:href="#SVGID_00000047044626892516562470000011707467779477037713_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000136387809682612379350000013964582531207836838_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1376.2,465.8c-17.4,11.6-42.8,53.7-6.5,64.1"/>
          </g>
          <g id="character-S-3">
            <defs>
              <path id="SVGID_00000041992808310762355700000003301864534567320738_" d="M1368.5,522.2c1,0.1,2.8,0.4,5.5,0.8
                c2.6,0.4,5.6,0.9,8.9,1.6c3.3,0.7,6.6,1.7,10.1,2.9s6.6,2.8,9.3,4.7c2.7,1.9,4.9,4.2,6.5,6.9s2.2,5.9,1.8,9.5
                c-0.4,3.6-1.9,7.5-4.4,11.6s-5.6,8-9.3,11.9c-3.7,3.9-7.8,7.5-12.3,11s-9,6.6-13.4,9.2c-4.4,2.6-8.5,4.6-12.4,6s-7,2-9.5,1.7
                c-3.6-0.4-6.8-1.5-9.6-3.1c-2.7-1.7-4.9-3.4-6.4-5.3c-1.5-1.9-2.4-3.5-2.5-4.8c-0.1-1.4,0.7-1.9,2.3-1.7c2,0.2,4.6-0.4,7.9-1.9
                s6.8-3.5,10.5-6s7.5-5.3,11.4-8.5s7.4-6.3,10.5-9.4c3.1-3.1,5.7-5.9,7.8-8.5c2.1-2.6,3.2-4.7,3.4-6.2l-3-2.1
                C1374.6,537.8,1358.2,526,1368.5,522.2L1368.5,522.2z"/>
            </defs>
            <clipPath id="SVGID_00000069399131210571507280000013625774955360424110_">
              <use xlink:href="#SVGID_00000041992808310762355700000003301864534567320738_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000069399131210571507280000013625774955360424110_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1362.4,529.9c0,0,63.6,4.6,16.3,39.8c0,0-10,10.2-32.8,20"/>
          </g>
        </g>
        <g id="character-T">
          <g id="character-T-2">
            <defs>
              <path id="SVGID_00000172407861619311592510000004236132527349502610_" d="M1524.9,439.5c10,1.6,19.5,3,28.3,4.4
                c8.8,1.3,16.8,2.6,24,3.7s13.1,2.1,17.9,3c3.6,0.8,5,1.9,4.4,3.2c-0.7,1.3-2.6,2.2-5.9,2.6c-5.2,0.6-11.8,1-19.8,1.2
                s-16.7,0.2-26.2-0.1c-9.4-0.3-19.4-0.7-29.7-1.3c-10.4-0.6-64.8-6.8-64.8-6.8c-5.8-0.9-11.1-1.9-16.1-3.1s-9.5-2.4-13.7-3.6
                c-5.9-1.8-11.4-4-16.3-6.7s-9.5-5.5-13.6-8.6c-4.1-3-7.8-6.1-11-9.1c-3.3-3-6.2-5.9-9-8.6c-2.3-2.3-3-4-2-5.1s2.3-1.3,4.1-0.7
                c11.9,4.7,25.1,9,39.8,13c14.7,3.9,30,7.6,45.8,11C1460.9,428,1514.8,437.9,1524.9,439.5z"/>
            </defs>
            <clipPath id="SVGID_00000124851034874991046600000009842405333683842747_">
              <use xlink:href="#SVGID_00000172407861619311592510000004236132527349502610_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000124851034874991046600000009842405333683842747_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1380.2,409.9c0,0,82.8,44.9,206.7,44.1"/>
          </g>
          <g id="character-T-1">
            <defs>
              <path id="SVGID_00000157988616491327237120000002890204669141003679_" d="M1486.2,453.8c-3.1,8.4-6.2,17.1-9.4,26
                c-3.2,8.9-6.3,17.6-9.1,26.2c-2.8,8.5-5.4,16.7-7.6,24.4c-2.3,7.7-3.9,14.6-5,20.7c-2,10.8-3.2,20.2-3.6,28.2s-0.5,14.7-0.1,20.2
                s0.9,9.9,1.7,13.3c0.7,3.4,1.2,5.9,1.4,7.5c0.2,1.6-0.1,2.7-0.8,3c-0.7,0.4-2.3,0.3-4.8-0.1c-3.8-0.7-7.5-3.2-11.1-7.5
                s-6.6-10.3-9.1-17.9c-2.4-7.6-3.9-16.8-4.5-27.5s0.3-22.8,2.8-36.2c2.3-12.6,5.8-26.3,10.5-41.2c4.7-14.8,9.6-29.3,14.8-43.4
                l8-21.4l2.8-7.1c3.6-9.5,6.7-17.6,9.2-24.2c2.6-6.6,4.1-11.4,4.6-14.2c1.1-5.9,3.3-9.3,6.7-10.1c3.4-0.8,6.8-0.1,10.3,2.1
                s6.4,5.6,8.9,10c2.4,4.4,3.2,8.9,2.4,13.5c-0.4,2.5-1.4,6.1-3,10.9s-3.4,10.6-5.7,17.3l-3,8.1L1486.2,453.8z"/>
            </defs>
            <clipPath id="SVGID_00000029759451618521939550000010363340191954285500_">
              <use xlink:href="#SVGID_00000157988616491327237120000002890204669141003679_"  style="overflow:visible;"/>
            </clipPath>
            
              <path style="clip-path:url(#SVGID_00000029759451618521939550000010363340191954285500_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
              M1488.5,382.7c16.7,22.2-62.1,121.7-44.7,227"/>
          </g>
        </g>
        <g id="underline">
          <defs>
            <path id="SVGID_00000045602857328956901040000013179732049248681133_" d="M406.9,656.8c-15.1,32.5,3.5,42.1,33.9,44.9
              c37.5,2.5,75.2-2.9,112.4-7.7c34.5-4.7,77.8-11.8,112.4-17.4c99.9-16.5,200.9-32.8,301.5-43.8c88.7-9.6,178-15.6,267.3-13.3
              c63.9,1.9,128,7.9,190.4,22.4c46.6,11,92.5,26.9,133.9,51.2c0,0,8.1,5,8.1,5c-4.5-2-12.9-5.8-17.4-7.6
              c-29.2-11.9-59.6-20.8-90.3-27.3c-73.8-15.5-149.6-19.2-224.9-18.5c-63,0.7-125.8,4.7-188.5,10.4c-99,8.8-202.5,22.7-301.3,35.4
              c-75.1,9.4-152,19.8-227.7,22.8C481,714,367.8,719.3,406.9,656.8L406.9,656.8z"/>
          </defs>
          <clipPath id="SVGID_00000154426205064966601210000014393879249392123786_">
            <use xlink:href="#SVGID_00000045602857328956901040000013179732049248681133_"  style="overflow:visible;"/>
          </clipPath>
          
            <path style="clip-path:url(#SVGID_00000154426205064966601210000014393879249392123786_);fill:none;stroke:#231F20;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="
            M406.9,656.8c-92.8,169.9,797.5-156.7,1159.9,41.3"/>
        </g>
        </svg>
        
      </figure>

    </main>
    <script type="module" src="/main.js"></script>
  </body>
</html>
              
            
!

CSS

              
                body {
  background-color: white;
}

main {
  position: relative;
  width: 100%;
  height: 100vh;
}

figure {
  position: absolute;
  width: 960px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

button#restart {
  position: absolute;
  bottom: 50px; right: 50px;
  text-transform: uppercase;
  border: 2px solid black;
  border-radius: 5px;
  padding: 0.5rem;
  font-weight: bold;

  &:hover {
    background-color: black;
    color: white;
  }
}
              
            
!

JS

              
                let animateTextTL = gsap.timeline({
  defaults: {
    duration: 0.25,
    ease: 'power2.out'
  }
})

animateTextTL
  .to('figure', {duration: 1, delay: 0.5, autoAlpha: 1})
  .from('svg #character-W-1 path', {duration: 0.25, drawSVG: 0})
  .from('svg #character-W-2 path', {duration: 0.15, drawSVG: 0})
  .from('svg #character-W-3 path', {duration: 0.25, drawSVG: 0})
  .from('svg #character-W-4 path', {duration: 0.15, drawSVG: 0})
  .from('svg #character-A path', {duration: 0.15, drawSVG: 0, stagger: 0.05})
  .from('svg #character-N-1 path', {duration: 0.3, drawSVG: 0}, '-=0.1')
  .from('svg #character-N-2 path', {duration: 0.15, drawSVG: 0}, '-=0.1')
  .from('svg #character-N-3 path', {duration: 0.3, drawSVG: 0})
  .from('svg #character-D path', {duration: 0.15, drawSVG: 0, stagger: 0.05}, '-=0.1')
  .from('svg #character-E path', {duration: 0.15, drawSVG: 0, stagger: 0.05}, '-=0.1')
  .from('svg #character-R path', {duration: 0.15, drawSVG: 0, stagger: 0.05}, '-=0.1')
  .from('svg #character-L path', {duration: 0.15, drawSVG: 0}, '-=0.1')
  .from('svg #character-U path', {duration: 0.15, drawSVG: 0, stagger: 0.05}, '-=0.1')
  .from('svg #character-S path', {duration: 0.15, drawSVG: 0, stagger: 0.05}, '-=0.1')
  .from('svg #character-T path', {duration: 0.15, drawSVG: 0, stagger: 0.05}, '-=0.1')
  .from('svg #underline path', {duration: 1, ease: 'expo.out', drawSVG: 0}, '+=0.5')

  const restartBtn = document.querySelector('#restart')

  restartBtn.addEventListener('mousedown', (e) => {
    animateTextTL.restart(false)
  })
              
            
!
999px

Console