JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
.container
  .signature
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="34.924 351.353 548.489 159.86">
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M51.494,355.859c-0.361,6.059-0.928,154.471,0.112,139.244"/>
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M78.591,407.725c1.312,22.307-22.823,30.685-40.917,38.995v0.438c28.433,6.559,63.44,14.872,83.997,37.178"/>
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M107.581,428.161c-10.663-3.553-25.783,30.933-12.163,31.759c9.906,0.412,10.873-18.834,13.134-26.911 c-5.65,11.058,3.828,48.292,20.075,6.995c-11.509,10.832,17.602,55.514,27.12-39.959c-2.612,27.794-5.091,45.328,6.053,56.885 c9.493,9.906,24.097,5.309,26.899-6.503c9.349-39.39,2.886-89.151-4.863-88.502c-7.76,0.648-12.929,44.588-4.217,79.835 c2.759,11.161,9.906,22.289,23.114,24.354c14.859,2.475,13.208-12.385,17.335-21.466c1.238,5.367,1.238,11.971,7.842,12.795 c7.429,1.238,9.492-9.906,14.446-9.906c2.063,0,4.127,4.129,6.192,4.541c3.302,1.238,3.715-0.412,7.017-1.651 c19.812-6.19,17.879-0.059,38.517-0.059"/>
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M137.931,434.742c14.447-2.475,28.894-3.714,43.753-4.128"/>
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M323.739,390.271c7.861-15.198-23.06-13.102-28.826-1.571c-13.101,26.204,37.734,46.643,44.023,68.653 c9.435,33.017-49.264,34.063-67.605,21.487c-11.53-8.386-2.096-13.626,8.385-16.771"/>
      <path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M355.25,448.722c-5.261,16.234,3.377,51.195,12.721,59.741c0,0,0.649-26.498-10.497-40.877"/>
      <path fill="none" stroke="#020202"...

CSS

@import compass

.container
  max-width: 400px
  margin: 0 auto

.signature
  position: relative
  overflow: auto
  width: 100%
  height: 0
  padding-bottom: 55.30973451%
  svg
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

JavaScript

window.signature =
  initialize: ->
    $('.signature svg').each ->
      paths = $('path, circle, rect', this)
      delay = 0
      for path in paths
        length = path.getTotalLength()
        previousStrokeLength = speed || 0
        speed = if length < 100 then 20 else Math.floor(length)
        delay += previousStrokeLength + 100
        $(path).css('transition', 'none')
               .attr('data-length', length)
               .attr('data-speed', speed)
               .attr('data-delay', delay)
               .attr('stroke-dashoffset', length)
               .attr('stroke-dasharray', length + ',' + length)

  animate: ->
    $('.signature svg').each ->
      paths = $('path, circle, rect', this)
      for path in paths
        length = $(path).attr('data-length')
        speed = $(path).attr('data-speed')
        delay = $(path).attr('data-delay')
        $(path).css('transition', 'stroke-dashoffset ' + speed + 'ms ' + delay + 'ms linear')
               .attr('stroke-dashoffset', '0')
        
$(document).ready ->
  window.signature.initialize()

  $('button').on 'click', ->
    window.signature.initialize()
    setTimeout( ->
      window.signature.animate()
    , 500)

$(window).load ->
  window.signature.animate()