Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

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 

              
                <svg id="demo" xmlns="http://www.w3.org/2000/svg" width="1500" height="750" viewBox="0 0 1500 750">
  <title>Handwriting With DrawSVG Demo</title>
 <g class="theWords" stroke-linejoin="round">
    <g id="handwriting" >
<path  d="M193 61L129 65L128 66L137 208L123 210L126 226C134.317 229.881 142.97 230 152 230C148.067 256.631 135.553 284.374 127.255 310C124.097 319.752 115.997 334.081 122.995 343.811C133.088 357.844 143.913 338.645 146.565 330C156.572 297.372 168.076 264.457 175 231L191 232C193.098 248.597 193.4 265.437 195.576 282C196.325 287.704 195.18 295.225 201.108 298.543C205.599 301.057 211.803 300.4 213.427 294.981C215.114 289.356 213.618 282.798 214.17 277C215.58 262.182 218.694 246.842 219 232L238 232C244.718 264.563 253.673 297.398 264 329C266.566 336.853 273.712 359.601 286.606 349.258C295.28 342.299 286.313 325.861 283.667 318C274.188 289.837 262.695 260.94 256 232C261.467 232 272.153 234.034 276.566 230.258C284.316 223.624 275.8 212.427 268 212L276 64C256.433 59.1794 235.988 60 216 60L215 42C209.621 42 198.872 38.991 194.318 42.0278C189.761 45.0664 191.941 56.5531 193 61z"/>
<path  d="M196 45L197 61L212 60L212 46L196 45M132 68L141 208L264 211L272 67L271 66L206 64.0394L132 68z"/>
<path  d="M169 71L169 79L143 81C148.104 93.0464 147.892 111.925 148 125C156.839 125 176.525 127.367 183.566 121.262C186.557 118.668 186.101 113.591 186.576 110C187.935 99.7047 188.696 89.3144 190 79L177 78C176.586 72.5715 174.256 71.1711 169 71z"/>
<path  d="M171 73L171 78L175 78L174 73L171 73M177 80L176 89L170 91L169 80L146 82L150 124L182 121C187.356 109.885 187.03 92.2962 188 80L187 79L177 80z"/>
<path  d="M197 81L197 82C217.017 84.5298 239.157 83.6837 259 80L236 80.8302L197 81z"/>
<path  d="M171 80L171 88L175 87L175 80L171 80z"/>
<path  d="M255 90L236 103L250 98L245 108L234 104L242 109L226 133L225 133L218 124L207 137L205 137L194 115L193 115L181 144L174 131L167 146L166 146L160 133L152 156L150 156L144 148L151 159L149 169L151 169L152 162L161 170L167 153L172 166L175 166L180 151L182 151L189 166L190 166L205 142L206 142L211 152L224 137L227 137C233.071 150.038 241.982 150.374 250 139L258 143L262 126L244 129L249 137L249 139L239 147L238 147L227 136L227 134L244 111L254 114L257 90L255 90M227 93L198 96L198 98L229 95L227 93z"/>
<path  d="M250 97L251 98L250 97M253 97L246 110L253 112L253 97z"/>
<path  d="M196 111L196 112L222 109L196 111z"/>
<path  d="M193 119L182 148L189 162L205 140L193 119M216 127L207 139L212 149L213 149L224 136L224 134L218 127L216 127M247 130L250 136L251 136L258 128L247 130M257 132L252 137L252 138L257 140L257 132M173 135C168.971 146.909 168.401 151.147 173 163L174 163L180 146L173 135M159 138L153 160L160 167C162.135 157.77 169.423 145.111 159 138z"/>
<path d="M211 172C224.427 176.885 227 167.206 227 156C213.773 149.375 204.899 158.926 211 172M247 153.508C233.018 155.578 235.239 176.253 249 174.562C261.394 173.04 261.294 151.391 247 153.508z"/>
<path  d="M219 156C214.038 157.995 207.761 168.574 217.039 169.534C226.141 170.475 222.976 159.412 219 156M254 158C247.805 156.543 235.636 161 243.318 168.682C250.857 176.222 255.162 163.975 254 158z"/>
<path  d="M191 179L208 182.91L254 184L254 183L191 179M150 181L150 183L176 184L176 182L150 181M150 197L150 199C175.294 199.017 200.717 201.01 226 201C231.899 200.998 248.493 203.816 252 199L150 197z"/>
<path  d="M130 212L128 216L275 220C270.349 211.483 248.73 214.687 240 214.09C203.641 211.6 166.46 212 130 212M128 219L128 223C139.056 228.549 153.922 226.51 166 227.039C189.912 228.086 214.03 229 238 229C249.083 229 264.892 231.864 275 227L275 225L274 224L191 221.015L128 219M156 231C151.98 258.218 138.867 286.807 130.33 313C127.862 320.573 119.939 335.89 127.279 342.566C137.835 352.167 143 327.001 145 321C154.888 291.336 162.529 261.073 171 231L156 231M195 232C197.056 248.269 197.443 264.755 199.576 281C200.524 288.224 199.181 295.204 208 297L210.17 277L215 232L195 232M242 232C249.558 268.636 258.072 311.068 274 345C291.811 353.939 283.855 330.564 281 322C271.37 293.108 265.122 258.908 251 232L242 232z"/>
    </g>
  </g>
  <g id="hand">
<rect id="groupSizer" width="140" height="160"/>
      <path d="M55.25,55.9,48.63,82.66s-27.58,40.19-26.86,16C23.31,47.27,55.25,55.9,55.25,55.9Z" fill="#f49f58"/>
      <path d="M77.45,30.06C75.95,29.74,27.15,45,24.08,46.12S13.72,48,11.42,53.79s0,16.5,0,21.1-1.15,33.38-.77,37.6c.24,2.7,3.45,5.37,6.52,5.75s8.06-4.6,9.21-7.67,6.52-40.67,7.29-43.35,13-1.15,15.73-1.15,26.47,23.4,26.47,26.86-14.19,19.57-16.11,19.57-29.63,6.77-31.46,8.06c-3.84,2.69-6.93,9.81-5.75,16.88.77,4.6,6.14,6.14,10.36,5.76,3.62-.33,24.17-1.53,30.69-1.92,4.28-.25,12.66-3.84,15-5.37S97,121.7,98.12,119.78s15.08-12.56,17.26-16.69c3.45-6.52,14.39-48.34,13.24-50.07C123.39,45.17,83.76,31.37,77.45,30.06Z" fill="#ffc585"/>
      <path d="M119.82,46.59c-7.44-4-18-8.3-26.85-11.51h0C81.87,48.19,69.38,60,56.92,71.77h0c7.89,7.16,19,18.8,19,21.15,0,1.58-3,5.82-6.39,9.95h0c1.15,0,8.42,8.43,21.74-4.39C111.74,78.73,119,66.42,120.74,56.26A17,17,0,0,0,119.82,46.59Z" fill="#ffc585" opacity="0.4" style="mix-blend-mode: multiply"/>
      <path d="M14.1,70.29c-2.3,7.29-9.8,45.47-10,49.11-.21,4.32,1.83,7.15,5.75,6.91,3.39-.21,8.58-2.94,10.36-6.14,3.34-6,4.19-5.22,11.13-50.26Z" fill="#ffc585"/>
      <path d="M14.1,70.29c-2.3,7.29-9.8,45.47-10,49.11-.21,4.32,1.83,7.15,5.75,6.91,3.39-.21,8.58-2.94,10.36-6.14,3.34-6,4.19-5.22,11.13-50.26Z" fill="#ffc585" opacity="0.4" style="mix-blend-mode: multiply"/>
      <g>
        <path d="M115.22,36.89s-4.3,37.94-5.1,39.36S83.83,106.38,81.9,107.18,69.43,109.49,71.37,105s7.33-2.93,8.17-3.66S101.42,75.61,102,74.43s.74-30,.74-30Z" fill="#363f4f"/>
        <path d="M113.07,39.08s-3.87,36-4.66,37.41S83.11,106.2,81.18,107s-11.75,2.49-9.81-2,7.33-2.93,8.17-3.66S101.42,75.61,102,74.43s.74-30,.74-30Z" fill="#4b5668"/>
        <path d="M111.25,55.36c1-8.48,1.81-16.28,1.81-16.28l-10.31,5.4s-.08,15.28-.35,24C103.3,67.19,108.68,59.83,111.25,55.36Z" fill="#4b5668" opacity="0.4" style="mix-blend-mode: multiply"/>
        <path d="M71.55,107.11c2.19-3.36,7.43-5.35,7.69-5.61-1.41.38-6.08-.56-7.86,3.53A1.73,1.73,0,0,0,71.55,107.11Z" fill="#4b5668" opacity="0.4" style="mix-blend-mode: multiply"/>
        <path d="M33.23,86.72c10.08,3.3,24,15.06,29.31,25.8L58,117.38c-10.6-4-25.41-17.87-28-25.83Z" fill="#edbd15"/>
        <path d="M46.16,94c-2.09,3-4.54,5.8-6.79,8.77-.24.32-.47.65-.7,1,5.75,5.83,13.22,11.38,19.3,13.65l4.57-4.85C59.32,106,52.93,99.13,46.16,94Z" fill="#edbd15" style="mix-blend-mode: multiply"/>
        <path d="M3.79,149.09s-3.57,7.55-2.42,8.58c1.52,1.36,7.71-4.53,7.71-4.53Z" fill="#c6d0d5"/>
        <path d="M7.95,150.39c-1.11,2.4-3.21,5.47-5.9,6.3a3.13,3.13,0,0,1-.73.13.78.78,0,0,0,.21.51c1.52,1.36,7.71-4.53,7.71-4.53Z" fill="#c7d1d6" style="mix-blend-mode: multiply"/>
        <path d="M1.95,149.82c3.16-8.14,17.61-40.14,31.5-61.3,8.37-12.75,53.86-84,78.16-64.8,21.59,17-31.06,69.86-52.81,90.88C42,130.87,11.55,153.39,9.34,154.72S1.34,151.39,1.95,149.82Z" fill="#4b5668"/>
        <path d="M49,113.63c-6.42,6.38-20.09,20-29.15,28.48C11,150.42,6.2,152.81,4.59,153.36c1.65,1.19,3.64,2,4.75,1.36,2.22-1.33,32.63-23.85,49.45-40.11C78,96.07,121.16,52.8,116.31,31.15c0,2.37-7.76,3.86-12,13.2C95.55,63.76,63.76,99,49,113.63Z" fill="#4b5668" opacity="0.4" style="mix-blend-mode: multiply"/>
        <path d="M92.86,47.91c7.9,6.12,17.67,6.77,19.08,3.07,5.75-11.47,7-21.45-.34-27.26-8-6.33-18.36-2.79-28.91,5.24C80.46,32.85,84.33,41.31,92.86,47.91Z" fill="#69778b"/>
        <path d="M83.79,28.14C94,20.69,103.86,17.61,111.6,23.72c7.17,5.66,6.15,15.26.79,26.34C106.53,58.36,80.56,40.72,83.79,28.14Z" fill="#edbd15"/>
        <path d="M116.31,31.11c-.65,10.45-11.22,20.6-22,15.52,6.91,5.15,15.12,7.66,18.12,3.43C115.86,42.91,117.5,36.37,116.31,31.11Z" fill="#edbd15" style="mix-blend-mode: multiply"/>
        <path d="M10.5,130.62c-4.17,8.76-7.28,15.93-8.55,19.21-.61,1.56,5.17,6.22,7.39,4.9,1-.59,7.45-5.31,15.83-11.79C20.75,141.85,11.74,135.18,10.5,130.62Z" fill="#edbd15"/>
        <path d="M10.5,130.62c-1.89,4.89,10,12.92,14.67,12.31C20.75,141.85,11.74,135.18,10.5,130.62Z" fill="#feee28"/>
        <path d="M2.51,151.41a8,8,0,0,0,.9,1c2.45-3.69,7.82-11.23,11.22-16a19.94,19.94,0,0,1-3-3.41C8.87,137.68,5,146,2.51,151.41Z" fill="#edbd15" style="mix-blend-mode: screen"/>
        <path d="M20.4,140.73c-4.19,5-9,9.31-13.71,13.83a3.09,3.09,0,0,0,2.64.16c1-.59,7.45-5.31,15.83-11.79A18.38,18.38,0,0,1,20.4,140.73Z" fill="#edbd15" style="mix-blend-mode: multiply"/>
        <path d="M33.23,86.72c4.3,8.5,19.27,22.52,29.31,25.8L58,117.38c-10.6-4-25.41-17.87-28-25.83Z" fill="#feee28"/>
        <path d="M33.23,86.72c3.3,10,19.4,24.28,29.31,25.8L58,117.38c-10.6-4-25.41-17.87-28-25.83Z" fill="#edbd15"/>
        <path d="M53.09,107.47a38.21,38.21,0,0,0,9.45,5.06L58,117.38a43,43,0,0,1-9.29-5.15C50.14,110.87,51.15,109.6,53.09,107.47Z" fill="#edbd15" style="mix-blend-mode: multiply"/>
        <path d="M39,94.81c-.92-1-1.78-2.09-2.55-3.1-1.26,1.68-2.45,3.41-3.59,5.18.6.86,1.28,1.73,2,2.62A61.6,61.6,0,0,1,39,94.81Z" fill="#edbd15" style="mix-blend-mode: screen"/>
        <path d="M3.45,153c1,.55-1.26,3.33-1.42,2.73S2.63,152.54,3.45,153Z" fill="#c7d1d6" opacity="0.7" style="mix-blend-mode: screen"/>
        <path d="M107.61,75.33c.49-1.63-25.92,28.23-25.4,28.92S106.8,78,107.61,75.33Z" fill="#4b5668" opacity="0.7" style="mix-blend-mode: screen"/>
        <path d="M101.93,22c-3.44-.3-9,3-8.18,4.61,2.2,4.21,12.06,2,12.88,0C107.76,23.75,103.74,22.19,101.93,22Z" fill="#edbd15" opacity="0.4" style="mix-blend-mode: screen"/>
        <path d="M81,41.38c-5.59.22-35.49,37.16-38.3,46.24,3.74-1.84,11.19-13.24,18.86-22.54C70.83,53.89,80.15,44.46,81,41.38Z" fill="#4b5668" opacity="0.4" style="mix-blend-mode: screen"/>
        <path d="M32.75,100.8c-3.63,2.63-15.13,19.8-17.94,28.88C18.78,125.16,31.85,103.88,32.75,100.8Z" fill="#4b5668" opacity="0.4" style="mix-blend-mode: screen"/>
      </g>
      <path d="M43.35,65.72C43.74,64.29,71.25,36,73.6,31.06c-8.52,2.7-47.07,14.14-49.52,15.06C21,47.27,13.72,48,11.42,53.79s0,16.5,0,21.1-1.15,33.38-.77,37.6c.24,2.7,3.45,5.37,6.52,5.75s8.06-4.6,9.21-7.67,6.52-40.67,7.29-43.35C34.14,65.55,39,65.51,43.35,65.72Z" fill="#ffc585"/>
      <path d="M69.51,111.93a10.24,10.24,0,0,1-4.45-3.18c-2.5,2.3-4.66,3.74-5.3,3.74-1.92,0-29.63,6.77-31.46,8.06-3.84,2.69-6.93,9.81-5.75,16.88.77,4.6,6.14,6.14,10.36,5.76,3.62-.33,24.17-1.53,30.69-1.92,4.28-.25,12.66-3.84,15-5.37S97,121.7,98.12,119.78C98.3,119.48,73.84,113.57,69.51,111.93Z" fill="#ffc585"/>
      <path d="M27.53,124.77c2.69-2.69,15-2.3,15.35-.38s.38,10-.38,12.28-14.19,5-15.73,2.69C23.39,134.28,25.1,127.19,27.53,124.77Z" fill="#ffd5b8"/>
      <path d="M19,116a81.46,81.46,0,0,0-.29-14.29c-.34-1.68-6.65-1.76-8-2.1-.15,6-.23,11.23-.08,12.84C10.89,115.19,17.27,117.77,19,116Z" fill="#ffd5b8"/>
      <path d="M117,91.87c-8.53,11-35.2,38.27-45.36,42.58-9.4,4-40.57,9.5-49.11,3,.77,4.6,6.14,6.14,10.36,5.76,3.62-.33,24.17-1.53,30.69-1.92,4.28-.25,12.66-3.84,15-5.37S97,121.7,98.12,119.78s15.08-12.56,17.26-16.69c1.12-2.12,3-7.94,5.05-14.91C119.34,89.44,118,90.54,117,91.87Z" fill="#ffc585" opacity="0.4" style="mix-blend-mode: multiply"/>
      <path d="M26.38,110.57c1.15-3.07,6.52-40.67,7.29-43.35.54-1.89,6.78-1.69,11.37-1.41.76,0-11.61-4.73-14-1.47-3.27,4.54-3.16,35.87-12,50.07a5.88,5.88,0,0,1-5.31,2.53,8.13,8.13,0,0,0,3.39,1.31C20.24,118.63,25.23,113.64,26.38,110.57Z" fill="#ffc585" opacity="0.4" style="mix-blend-mode: multiply"/>
    </g>
</svg>
!

CSS 

              
                body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #7a7a7a;
}


#hand {
  fill: none
}
!

JS 

              
                let speed = 0.5;
const tl = gsap.timeline({repeat:-1, defaults:{ease:"none"}});
tl.timeScale(speed.toFixed(2));


gsap.set("#handwriting path", {stroke:"#ffffff", drawSVG:0});
gsap.set("#hand", { yPercent:-100, transformOrigin:"center center"});

const iconTl = gsap.timeline({reversed: true, paused:true, defaults:{ease:"none", duration:0.35}});
iconTl.to("#hand", {autoAlpha:0},0);

var elem=document.getElementById("handwriting");
var paths = elem.getElementsByTagName("path");
for (let i = 0; i < paths.length; i++) {
    
  paths[i].setAttribute("fill","none");
  paths[i].setAttribute("stroke","#ffffff");
  paths[i].setAttribute("stroke-linecap","round");
  paths[i].setAttribute("stroke-miterlimit","100");
  paths[i].setAttribute("stroke-width","2");
}

tl.to(paths[0], {duration: 1, drawSVG:true});
tl.to("#hand", {duration: 1, motionPath:{path:paths[0], align:paths[0]}}, 0);


for (let i = 1; i < paths.length; i++) {
      tl.add("path"+i);
      tl.to(paths[i], {duration: 0.75, drawSVG:true}, "path"+i);
      tl.to("#hand", {duration: 0.75, motionPath:{path:paths[i], align:paths[i]} }, "path"+i);
}

// main timeline creation
// tl.to(paths[0], {duration: 3, drawSVG:true});
//tl.to("#hand", {duration: 3, motionPath:{path:paths[0], align:paths[0]}}, 0);


//tl.to(paths[0], {duration: 5, drawSVG:true});
!
999px

Console