<div class='container'>
  <div class='signature'>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 112">

        <path fill="none" stroke="#363636" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M26.1,80.9c-1.3-1.1-1.9-1.9-1.9-2.6c0-0.9,1.2-1.5,3.6-1.7c7.9,7,16,10.5,24.4,10.5h1.6c6.1,0,9.2-3.7,9.2-11.1v-4.8c0-6.3-3.3-21.4-9.8-45.4c-4.4-13.1-6.7-21.1-6.7-23.9c0.2-0.4,0.3-0.7,0.3-0.9h1c0.5,0.4,0.9,0.6,1.2,0.6l5.8,16.8c8,29.1,12.1,46.7,12.1,52.7v6c-1.7,8.7-6.3,13-14,13C43.5,90.3,34.6,87.2,26.1,80.9z"/>
        <path fill="none" stroke="#363636" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M71.5,50.3l-0.3-0.5c0.1-0.7,0.3-1,0.5-1l-0.3-0.5c0-0.3,1-0.6,3-1c0.5-0.8,1.2-1.3,2.3-1.3c2,1.7,3.8,2.5,5.3,2.5l-1.3,3.3l-1.8-1c0,2.4-1.4,4.2-4.3,5.6c-1.1-0.3-1.9-0.8-2.5-1.3c0,0.5-1,1.3-3,2.5C69.5,55.3,70.3,52.8,71.5,50.3z"/>
        <path fill="none" stroke="#363636" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M91.1,43.8c1,0.7,1.5,1.4,1.5,2.3c-0.3,1-1,1.5-2,1.5c-1.6-0.5-2.7-0.8-3.3-0.8c-1.5,0.5-2.3,0.9-2.3,1.3c2.5,2.8,3.8,4.2,3.8,4.3v0.3c0,1.3-1.2,2.3-3.6,3c-1.9-0.3-2.8-0.7-2.8-1v-0.3l2.5-1.8v-0.3c-2-2.2-3-4.1-3-5.6C82,44.8,85,43.8,91.1,43.8z"/>
        <path fill="none" stroke="#363636" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M98.3,28.8h1c0.2,0,0.6,0.4,1.3,1.3v0.3l-6.9,21.8v0.8h0.5c2.6-3,4.3-4.6,5.1-4.6c0.5,0,1.9,0.9,4.1,2.8c1.4,0,2,0.4,2,1.3c-0.3,0.8-0.8,1.4-1.5,1.8c-0.4,0-1.9-0.8-4.6-2.3c-3.7,3.9-5.7,5.8-6.1,5.8h-1.5c-0.2,0-0.7-0.6-1.5-1.8c0-2,2.5-10.9,7.6-26.7C97.8,29,98,28.8,98.3,28.8z"/>
        <path fill="none" stroke="#363636" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M168.3,3c2.9,0.7,4.4,1.8,4.4,3.2c-4.1,6.8-6.2,16.4-6.2,28.8h0.4c-0.3,0.4-0.4,0.8-0.4,1c0,3-0.5,8.9-1.5,17.6h0.4c8.3-13.5,17.6-26.5,28-39.2l10.5-10.8h0.4c0.4,0,1.7,0.5,3.9,1.5c0,0.6-2.4,6.4-7.2,17.3c-5.8,17.2-8.6,28.9-8.6,35.2c-0.3,2.6-0.7,3.9-1.1,3.9l0.3,2.5c0,1.4-0.2,3.8-0.7,7.2h0.4l-0.4,0.7v0.4c0,0.8,0.1,1.4,0.4,1.8c-0.7,3.2-1.2,6.1-1.5,8.6h-0.7c-0.5,0-1-4.3-1.5-12.9c0-16.9,4.1-35.6,12.3-56.1h-0.8c-10.4,11.3-21.1,26.4-32.3,45.3l-3.6,7.9c-0.8,0.5-1.5,0.7-2.2,0.7h-0.7c-1.3,0-2.2-0.5-2.5-1.4v-0.7c1.2-3.4,2.5-10.3,4-20.9l-0.4-0.7l0.7-1.8c0-0.5-0.1-0.8-0.3-0.8l0.7-10.4h-0.4l0.4-0.7v-4.7l0.3-2.5h-0.3c-11.4,17.9-19.8,32.1-25.2,42.5l-19.4,44.6c-0.3,1-1.4,1.5-3.2,1.5h-0.4c-1.7-0.6-2.5-1.8-2.5-3.6v-0.8c2.3,0,5.6-5.7,10.1-17.2c11.4-25.8,21.1-44,29.1-54.7c0-0.6,1.9-4.1,5.7-10.4C160,16.7,163.8,9.4,168.3,3z"/>
        <path fill="none" stroke="#363636" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M201.8,47.3c1,0.7,1.5,1.4,1.5,2c-1.2,3-2,4.7-2.5,5.1H200c-0.5-0.2-0.8-0.7-0.8-1.5v-0.5c0.3-3.4,1-5.1,2-5.1H201.8zM202.5,41.2c1,0.4,1.5,1.1,1.5,2c-0.3,0.8-0.8,1.3-1.8,1.3H202c-0.4,0-0.8-0.7-1.3-2C201,41.7,201.6,41.2,202.5,41.2z"/>
        <path fill="none" stroke="#363636" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M215.8,44.4c0.7,0,1.3,0.4,1.8,1.3v0.8c0,0.2-1.5,1.3-4.6,3.3c-3.3,3.7-5.7,5.6-7.1,5.6c-0.7,0-1.3-1-1.8-3l0.3-1.3c-0.2-0.9-0.3-1.7-0.3-2.3c0.3-0.8,0.7-1.2,1-1.3h0.8c1.4,0,2,0,2,0.1v0.8h0.3C212.4,45.7,214.9,44.4,215.8,44.4z"/>
        <path fill="none" stroke="#363636" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M229.9,52.4h-2.1c-0.9,0-2.1-0.7-3.7-2.1h-0.4c-2,2.1-3.6,3.1-4.8,3.1h-0.7l-2.7-2.4c0-3.2,1.5-5.6,4.4-7.2h1.4c4.3,0.3,6.5,1.2,6.5,2.7V48h0.4C228.6,48,229.1,49.4,229.9,52.4z"/>
        <path fill="none" stroke="#363636" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M235.7,43.7c0.8,0,1.3,0.3,1.3,1l-0.5,4.8h0.3c2.5-1.4,3.9-2,4.3-2c1.9,0.4,2.8,1.6,2.8,3.6c-0.2,1-0.6,1.5-1.3,1.5c-0.3,0-1-0.5-2-1.3c-0.6,0-1.9,0.8-4.1,2.3c-2,0-3-1.3-3-3.8h-0.3c-0.3,0-1.5,1.1-3.6,3.3h-1c-1-0.7-1.5-1.4-1.5-2c0-0.8,1.2-1.9,3.6-3.3C233.2,45.1,234.9,43.7,235.7,43.7z"/>
        <path fill="none" stroke="#363636" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M256.5,52.4h-2.1c-0.9,0-2.1-0.7-3.7-2.1h-0.4c-2,2.1-3.6,3.1-4.8,3.1h-0.7l-2.7-2.4c0-3.2,1.5-5.6,4.4-7.2h1.4c4.3,0.3,6.5,1.2,6.5,2.7V48h0.4C255.2,48,255.7,49.4,256.5,52.4z"/>
        <path fill="none" stroke="#363636" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M260.4,44.5c2.2,0,3.7,1.3,4.6,3.8c0,0.3,0.2,1.2,0.5,2.5c-0.2,0.7-0.6,1-1.3,1c-0.5,0-1.3-1.3-2.5-3.8h-0.5c-1.3,0-2.7,1.4-4.3,4.3c-0.5,0.2-0.8,0.3-0.8,0.5c-1.7-0.4-2.5-1.2-2.5-2.3C257.3,46.7,259.5,44.6,260.4,44.5z"/>
        <path fill="none" stroke="#363636" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M278.6,21.7c0.9,0,1.5,0.3,1.8,1c-0.2,1.2-2.7,7.1-7.6,17.8c-1,1.5-2,3.8-3,6.9l0.5,0.3l1.8-0.3c1.1,0,1.8,0.4,2.3,1.3v0.5c0,0.4-2,1.1-6.1,2c-1.2,6.3-2.3,9.4-3.3,9.4h-0.5c0-0.4-0.3-0.7-1-0.8v-0.8c0-0.9,0.8-3.9,2.3-9.1c-0.3-0.5-0.5-1-0.5-1.3c1.7-0.7,2.5-2.2,2.5-4.3c4.4-9.3,7.7-16.8,9.9-22.6H278.6z"/>
      
    </svg>
  </div>
  
  <button>Play it again</button>

</div>
@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%
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')

  fill: ->
    paths = $('path, circle, rect', this)
    for path in paths
        $(path).css('transition', 'fill ' + 700 + 'ms ' + 2500 + 'ms linear')
               .attr('fill', 'black')
        
$(document).ready ->
  window.signature.initialize()

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

    setTimeout( -> 
      window.signature.animate()
      window.signature.fill()
    , 500)

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js