Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

Save Automatically?

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

              
                <div class="svg-container animated tada"> <svg viewBox="0 0 450 450">
  <g fill="none" stroke="#F25A5B" stroke-width="3">
    <path d="M44.2964543,295.636871 C37.5053101,293.334881 32,285.63886 32,278.462615 L32,258.443635 C32,251.260545 37.7159195,244.306539 44.7586777,242.913049 L111.606516,229.686434 C119.192302,228.185498 130.426989,223.308783 136.677853,218.746538 C136.677853,218.746538 131.861328,222.332031 140.970703,215.578125 C149.723149,209.088854 159.12635,208.741287 166.894531,205.804688 C174.241391,203.02736 179.526612,197.545039 183.900391,191.947266 C190.018375,184.117174 207.773987,190.049465 219.970703,184.919922 C231.385498,180.11923 237.047656,164 248.773437,164 C278.639974,164 316.158854,205.804688 346.025391,205.804688 C364.441406,205.804688 374.474609,191.736328 382.921875,171.287109 C387.933594,163.789062 400.43699,179.27337 400.43699,179.27337 C401.151359,180.103992 402.019186,181.623932 402.375317,182.680449 C402.375317,182.680449 415.192114,219.795166 417.208984,240.5 C418.347477,252.187561 417.208984,263.917969 412.689453,273.060547 C415,282.830078 417.208984,296.675781 410.542969,308.755859 C403.876953,320.835938 220.896484,313.873047 136.455078,313.873047 C93.2298177,313.873047 44.2964543,295.636871 44.2964543,295.636871 Z"
      class="shoe-base" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M32.4765625,276.820312 C32.4765625,276.820312 40.1445312,287.298829 58.203125,287.298828 C121.838774,287.298825 191.84375,291.08789 278.189453,269.476562 C289.643072,267.129015 389.230646,265.448893 389.230646,265.448893 C390.329724,265.429657 391.907589,265.984007 392.7616,266.684582 C392.7616,266.684582 399.948727,272.728589 403.312738,274.385852 C406.454586,275.933667 411.738281,274.029297 411.738281,274.029297"
      class="guy-chan" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M42.0625,244.501953 C42.0625,244.501953 42.0625,267.728514 123.769531,251.701172 C142.574219,251.701172 144.238281,267.728514 156.103516,267.728514 C167.96875,267.728514 166.583315,241.321088 182.373114,241.279319 C196.410156,241.242187 222.894531,264.554686 249.21875,261.259766 C249.21875,261.259766 355.375,240.15039 385.765625,233.849609 C416.15625,227.548828 417.15625,241.242188 417.15625,241.242188"
      class="suede-1"></path>
    <path d="M111.505859,230.691406 C111.505859,230.691406 105.041992,239.022461 127.886719,239.022461 C150.731445,239.022461 164.865234,259.009766 164.865234,259.009766 M136.505859,219 C136.505859,219 113.1875,243.048828 177.320311,228.698242 C215.647458,222.924805 245.279297,260.613281 245.279297,260.613281 M178.428711,228.777832 C178.428711,228.777832 185.566985,232.449704 188.050094,236.034911 C190.533203,239.620117 190.533203,242.044434 190.533203,242.044434"
      class="sep-low" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M328.123047,244.140625 C328.123047,244.140625 333.53125,225.603516 358.001953,210.032227 C382.472656,194.460938 403.880859,191.923828 403.880859,191.923828" class="suede-2" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M353.636719,211.802734 C353.636719,211.802734 311.208795,210.431822 290.273438,204.474609 C270.613743,198.88039 231.851562,177.148438 231.851562,177.148438 M275.027344,198.164062 C275.027344,198.164062 281.83589,197.077454 287.350562,193.908844 C292.865234,190.740234 296.716797,185.394531 296.716797,185.394531"
      class="sep-top" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M234.939453,153.171875 L239.955078,160.966797 C239.955078,160.966797 256.325044,151.41492 264.510028,147.638982 C269.236503,145.45854 278.689453,143.097656 278.689453,143.097656 M143.716797,213.639651 L259.159832,135.995844 C263.743327,132.913111 270.554247,133.660081 274.362304,137.65361 L292.235352,156.397171 C296.04795,160.395463 296.928016,167.537319 294.209486,172.33404 L290.929688,178.121094"
      class="tongue" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M259,184.05 C262.313708,184.05 265,181.576373 265,178.525 C265,175.473627 262.313708,173 259,173 C255.686292,173 253,175.473627 253,178.525 C253,181.576373 255.686292,184.05 259,184.05 L259,184.05 Z M271,190 C274.313708,190 277,187.526373 277,184.475 C277,181.423627 274.313708,178.95 271,178.95 C267.686292,178.95 265,181.423627 265,184.475 C265,187.526373 267.686292,190 271,190 L271,190 Z"
      class="loop" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M336.134766,228.828125 C336.134766,228.828125 259,250.75 237.324219,240.771484 C201.792334,224.414267 254.109375,199.996094 254.109375,199.996094 C254.109375,199.996094 241.541019,222.03125 266.589843,225.210938 C281.938148,227.159245 350.945313,214.996094 350.945313,214.996094"
      class="nike" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M204.902344,297.123047 L279.574219,299.619141 M372.56543,299.695312 C399.374023,299.695312 414.532589,295.695312 414.532589,295.695312 M234.003906,283.695312 C234.003906,283.695312 345.756836,285.695312 372.56543,285.695312 C399.374023,285.695312 414.532589,281.695312 414.532589,281.695312"
      class="heel" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M284,299.5 C284,295.910149 286.915864,293 290.504017,293 L361.495983,293 C365.088052,293 368,295.917454 368,299.5 L368,299.5 C368,303.089851 365.084136,306 361.495983,306 L290.504017,306 C286.911948,306 284,303.082546 284,299.5 L284,299.5 L284,299.5 L284,299.5 Z M301.5,306 C305.089851,306 308,303.089851 308,299.5 C308,295.910149 305.089851,293 301.5,293 C297.910149,293 295,295.910149 295,299.5 C295,303.089851 297.910149,306 301.5,306 L301.5,306 L301.5,306 Z M325.5,306 C329.089851,306 332,303.089851 332,299.5 C332,295.910149 329.089851,293 325.5,293 C321.910149,293 319,295.910149 319,299.5 C319,303.089851 321.910149,306 325.5,306 L325.5,306 L325.5,306 Z M350.5,306 C354.089851,306 357,303.089851 357,299.5 C357,295.910149 354.089851,293 350.5,293 C346.910149,293 344,295.910149 344,299.5 C344,303.089851 346.910149,306 350.5,306 L350.5,306 L350.5,306 Z"
      class="bubble" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M139.126284,209.468624 C138.017078,207.760597 139.00003,205.153691 141.311242,203.652772 C143.627167,202.148793 146.399692,202.307906 147.51299,204.022233 L155.535887,216.376412 C156.645093,218.084439 155.662141,220.691345 153.350929,222.192264 C151.035004,223.696243 148.262479,223.53713 147.149182,221.822802 L139.126284,209.468624 L139.126284,209.468624 L139.126284,209.468624 L139.126284,209.468624 L139.126284,209.468624 Z" class= "lace-1" stroke-linecap="round" stroke-linejoin="round" fill="#FFFFFF"></path>
            <path d="M157.577037,197.486565 C156.467831,195.778538 157.450782,193.171632 159.761995,191.670713 C162.07792,190.166734 164.850445,190.325847 165.963742,192.040174 L173.98664,204.394353 C175.095845,206.10238 174.112894,208.709286 171.801681,210.210205 C169.485757,211.714184 166.713231,211.555071 165.599934,209.840744 L157.577037,197.486565 L157.577037,197.486565 L157.577037,197.486565 L157.577037,197.486565 L157.577037,197.486565 Z" class= "lace-2" stroke-linecap="round" stroke-linejoin="round" fill="#FFFFFF"></path>
            <path d="M176.027789,185.504506 C174.918583,183.796479 175.901535,181.189573 178.212747,179.688655 C180.528672,178.184675 183.301197,178.343788 184.414495,180.058116 L192.437392,192.412295 C193.546598,194.120321 192.563646,196.727227 190.252434,198.228146 C187.936509,199.732125 185.163984,199.573012 184.050687,197.858685 L176.027789,185.504506 L176.027789,185.504506 L176.027789,185.504506 L176.027789,185.504506 L176.027789,185.504506 Z" class= "lace-3" stroke-linecap="round" stroke-linejoin="round" fill="#FFFFFF"></path>
            <path d="M194.478542,173.522447 C193.369336,171.81442 194.352287,169.207515 196.6635,167.706596 C198.979425,166.202617 201.75195,166.361729 202.865247,168.076057 L210.888145,180.430236 C211.99735,182.138263 211.014399,184.745168 208.703186,186.246087 C206.387262,187.750066 203.614736,187.590954 202.501439,185.876626 L194.478542,173.522447 L194.478542,173.522447 L194.478542,173.522447 L194.478542,173.522447 L194.478542,173.522447 Z" class= "lace-4" stroke-linecap="round" stroke-linejoin="round" fill="#FFFFFF"></path>
  </g> 
  </svg>
</div>
              
            
!

CSS

              
                body{
  background:#F5F0E5;
  height: 100%;
  width: 100%;
} 

.svg-container{
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

svg{
  display: block;
  width: 100%;
  max-width: 400px;
  height: 100%;
  max-height: 400px;
}

.shoe-base {
  animation: 500ms shoe-base ease-in 1 alternate forwards;
  stroke-dasharray: 979, 979;
  stroke-dashoffset: 979;
  opacity: 0; 
}

.guy-chan {
  animation: 500ms guy-chan ease-in 500ms 1 alternate forwards;
  stroke-dasharray: 387, 387;
  stroke-dashoffset: 387;
  opacity: 0;
}

.suede-1 {
  animation: 500ms suede ease-in 1000ms 1 alternate forwards;
  stroke-dasharray: 410, 410;
  stroke-dashoffset: 410;
  opacity: 0;
}

.sep-low {
  animation: 500ms sep-low ease-in 1000ms 1 alternate forwards;
  stroke-dasharray: 221, 221;
  stroke-dashoffset: 221;
  opacity: 0;
} 

.suede-2 {
  animation: 500ms suede-5 ease-in 1500ms 1 alternate forwards;
  stroke-dasharray: 96, 96;
  stroke-dashoffset: 96;
  opacity: 0;
} 

.sep-top {
  animation: 500ms sep-top ease-in 1500ms 1 alternate forwards;
  stroke-dasharray: 155, 155;
  stroke-dashoffset: 155;
  opacity: 0;
}

.tongue {
  animation: 500ms tongue ease-in 2000ms 1 alternate forwards;
  stroke-dasharray: 258, 258;
  stroke-dashoffset: 258;
  opacity: 0;
}

.lace-1 {
  animation: 500ms laces ease-in 2500ms 1  forwards; 
  stroke-dasharray: 228, 228; 
  stroke-dashoffset: 228;
  opacity: 0;
} 

.lace-2 {
  animation: 500ms laces ease-in 2750ms 1  forwards; 
  stroke-dasharray: 228, 228; 
  stroke-dashoffset: 228;
  opacity: 0;
} 

.lace-3 {
  animation: 500ms laces ease-in 3000ms 1  forwards; 
  stroke-dasharray: 228, 228; 
  stroke-dashoffset: 228;
  opacity: 0;
} 

.lace-4 {
  animation: 500ms laces ease-in 3250ms 1  forwards; 
  stroke-dasharray: 228, 228; 
  stroke-dashoffset: 228;
  opacity: 0;
} 

.loop {
  animation: 500ms loop ease-in 2500ms 1 alternate forwards;
  stroke-dasharray: 73, 73;
  stroke-dashoffset: 73;
  opacity: 0;
}

.heel {
  animation: 1000ms heel ease-in 3000ms 1  forwards; 
  stroke-dasharray: 298, 298;
  stroke-dashoffset: 298;
  opacity: 0;
} 

.bubble {
  animation: 500ms bubble ease-in 3000ms 1  forwards; 
  stroke-dasharray: 306, 306;
  stroke-dashoffset: 306;
  opacity: 0;
}

.nike {
  animation: 500ms nike ease-in 3750ms 1  forwards; 
  stroke-dasharray: 282, 282;
  stroke-dashoffset: 282;
  opacity: 0;
}

.tada {
  animation-delay: 4500ms;
}

@keyframes nike {
  0% {
    stroke-dashoffset: 282;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes laces {
  0% {
    stroke-dashoffset: 228;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes bubble {
  0% {
    stroke-dashoffset: 306;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
} 

@keyframes heel {
  0% {
    stroke-dashoffset: -298;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
} 

@keyframes loop {
  0% {
    stroke-dashoffset: 73;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes tongue {
  0% {
    stroke-dashoffset: -258;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes sep-top {
  0% {
    stroke-dashoffset: 155;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes suede-5 {
  0% {
    stroke-dashoffset: 96;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes sep-low {
  0% {
    stroke-dashoffset: 221;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes suede {
  0% {
    stroke-dashoffset: -410;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes guy-chan {
  0% {
    stroke-dashoffset: 387;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes shoe-base {
  0% {
    stroke-dashoffset: 979;
    opacity: 0;
  }
  100%{
    stroke-dashoffset: 0;
    opacity: 1;
  }
} 
 
              
            
!

JS

              
                var path = document.querySelector('path.nike');
var length = path.getTotalLength();
console.log(length)
              
            
!
999px

Console