A Pen by Lauren Parkos

Thumbnail
This awesome code was written by lparkos, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lparkos ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Lauren Parkos</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container"><div class="signature">
 
<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 350 250" enable-background="new 0 0 350 250" xml:space="preserve">
<path d="M237.6,145.4c-0.9,7.4-8.6,12-16.2,10.8c-5.6-0.9-8.3-7.7-15.1-5.9c-5.6,1.5-11.6,1.8-17.4,2.7c-1.2,0.2-2.5,0.3-3.7,0.4
	c-3.4,0.2-5.1-1.3-4.9-4.8c0.4-8.7-2.4-16.4-7.3-23.5c-1.2-1.7-3.4-5.5-1.4-6.6c1.7-1,5.4,5.1,5.7,5.8c2.4,5.6,5.3,7.6,12.4,6.4
	c5.3-0.9,11.8,2.7,17.2,5.4c3.4,1.8,5,1.9,7.1-1.2c1.5-2.2,3.3-4.2,5.3-5.9c1.1-1,2.8-2.1,4.1-2C230,127.5,238.5,138.6,237.6,145.4z
	 M193.9,134.3c-2.6-0.2-5.4,1.3-7.5,2.9c-2.5,1.9-1.5,4.8-0.3,7.5c1.5,3.5,4.5,3.6,7.5,3.5c2.9-0.2,6-0.5,8.7-1.6
	c4.7-1.9,4.9-4.5,0.9-7.3C200.5,137.4,197.9,134.6,193.9,134.3z M221.3,150.5c5.6,0.6,9.4-1.3,10.5-4.3c1.2-3.6-1.5-9.7-5.2-11.3
	c-0.7-0.3-2-0.3-2.6,0.2c-2.6,1.9-5.3,3.7-7.5,6c-2.5,2.5-2.2,5.5,0.6,7.6C218.5,149.7,220.5,150.2,221.3,150.5z"/>
<path d="M328.5,152.4c1.2,0,3.4-0.1,3.8,1.1c0.5,1.7-2.3,3.8-3.4,3.8c-8.6-0.2-17.2,2.2-25.7-1c-7.1-2.7-14.4-5-21.6-7.4
	c-0.9-0.3-2.9-0.8-2.9-0.8c0.2,0.9,0.5,2.2,0.6,3.1c0.3,1.4,0.9,2.9,0.6,4.2c-0.2,1-1.2,2.6-2.3,2.6c-1.1,0-2.2-1.5-2.3-2.3
	c-0.6-5.6-3.4-11-4-16.1c-0.7-6-0.5-12-3.1-17.7c-0.6-1.2,0.4-1.8,0.7-1.8c0.8-0.1,2.2,0,2.5,0.5c1.3,2.3,2.6,4.7,3.4,7.3
	c0.9,2.8,1.8,4.3,5.2,2.7c5.4-2.5,10.9-4.4,16.5-6.4c1.4-0.5,3.6-1.4,4.6-0.2c1.2,1.4-0.1,4.4-1.2,5.2c-3.4,2.3-7.3,4-11.1,5.8
	c-2.2,1-4.7,1.6-6.9,2.7c-2.9,1.4-2.8,3.1-0.2,4.8c7.5,5.1,16,7.6,24.7,9.4C307.9,152,322.6,152.5,328.5,152.4z"/>
<path d="M141.3,147c5.1,0.5,10.8-0.7,16.5-1c0.8,0,2.3,0.3,2.4,1.2c0.1,0.9-1.3,1.4-2.1,1.6c-8.3,2.1-16.4,5.8-25.2,1.6
	c-3.3-1.5-4.3-0.1-3.7,3.5c0.3,1.7,0.9,3.4,0.8,5.1c0,1-0.6,2.8-1.7,2.8c-1.1,0.1-1.9-1.6-2.2-2.6c-2.7-8.7-5.2-17.5-8-26.2
	c-1-3.1-2.4-6-3.5-9c-0.5-1.4-1-2.9-1-4.3c0.1-0.9,0.7-2.6,1.8-2.7c0.9-0.1,1.6,1.1,2,1.9c2,4.3,3.9,8.5,5.7,12.9
	c1.5,3.7,3.2,3.4,6.1,1.3c6.4-4.6,13.1-8.8,19.7-13c0.8-0.5,2.5-1.1,3.3-0.3c0.9,0.9,0.4,3.1-0.3,3.8c-2.6,2.6-5.4,5-8.3,7.2
	c-3.7,2.8-7.8,5.3-11.4,8.2c-3.5,2.8-3,4.5,1.3,6c1.2,0.4,2.4,0.6,3.6,0.9C138.4,146.2,139.5,146.8,141.3,147z"/>
<path d="M86.5,145.1c0.2-5.7,3-9.9,7.8-12.6c1.1-0.6,3.5-1.3,4.4-0.1c1,1.3-0.3,3.4-1.1,4.7c-1.7,2.8-4.1,5.3-5.8,8.2
	c-1.3,2.3-1.3,5.3,1.6,6.3c2.3,0.8,5.8,1.3,7.5,0.1c4.6-3.2,5.5-8.1,4.8-13.8c-0.7-5.7-3.4-9.7-7.8-12.7c-0.9-0.6-2.8,0.1-4.2,0.3
	c-1,0.1-2.3,1.1-3,0.4c-0.8-0.9,0-2.7,0.7-3.5c2.1-2.5,5-3.4,7.9-1.8c4.7,2.6,8.3,6.3,9.7,11.6c0.9,3.3,1.2,6.8,1.6,10.2
	c0.5,5.5-3.9,12.8-9,14.9c-4.4,1.9-8.6,1.6-12.6-1.4C85.2,152.9,85.8,149.1,86.5,145.1z"/>
<path d="M78.6,147.9c-0.4,4.5-2.6,7.9-7,9.5c-4.4,1.6-11.9-0.5-15-4.1c-5.2-6.1-5.1-15.9,0.3-21.8c0.7-0.8,2-2,3-1.5
	c1,0.5,0.9,2.3,0.5,3.2c-0.6,1.8-1.7,3.5-2.7,5.3c-2.2,3.8-1.1,7.2,1.4,10.3c2.2,2.7,7.9,4.1,10.9,2.9c3.5-1.3,5.5-5.9,3.5-10
	c-1.7-3.5-4.5-6.4-6.6-9.7c-0.7-1-1.8-2.8-0.9-3.8c0.9-1,2.9-0.2,3.9,0.4C76.3,132.6,79.3,139.5,78.6,147.9z"/>
<path d="M249.6,153.2c-3.2-1.3-7-2.1-7.9-6.6c-0.8-4,1-8.5,4.8-10.8c1.4-0.9,3.1-1.6,4.8-1.9c2.7-0.4,4.1-1.1,2.9-4.3
	c-0.4-1-0.6-3.6,0.7-4c1.4-0.4,2.2,1.9,2.8,3.1c1.7,3.3,3.2,6.7,4.6,10.1C265.5,146.8,255.6,154.2,249.6,153.2z M256.5,137.3
	c-4.1-1-8.8,3.6-9.8,5.9c-0.2,0.4-0.3,2.1,0.1,2.5c2.4,2.3,5.1,2.9,8.1,1.1c2.5-1.5,4.6-3.1,3.6-6.4
	C258.2,139.4,257.9,137.6,256.5,137.3z"/>
<path d="M40.7,111.5c1.4,0,1.4,4.2,1.6,5.6c0.9,8.8,1.9,17.6,2.5,26.5c0.3,4.7-0.5,8.1,3.5,11.7c0.4,0.3,2,2.5,0.7,3.7
	c-1.2,1.1-3.4-1-3.7-1.4c-1.4-1.7-3.7-3.8-3.9-5.8c-1.4-12.4-1.2-23.5-2.2-36C38.9,112.7,39.7,111.5,40.7,111.5z"/>
</svg>

</div></div><button>Play it again</button>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/lparkos/a-pen-by-lauren-parkos-QwJqzW */
.container {
  max-width: 400px;
  margin: 0 auto;
}

.signature {
  position: relative;
  overflow: auto;
  width: 100%;
  height: 0;
  padding-bottom: 55.30973%;
}
.signature svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*Downloaded from https://www.codeseek.co/lparkos/a-pen-by-lauren-parkos-QwJqzW */
(function() {
  window.signature = {
    initialize: function() {
      return $('.signature svg').each(function() {
        var delay, length, path, paths, previousStrokeLength, speed, _i, _len, _results;
        paths = $('path, circle, rect', this);
        delay = 0;
        _results = [];
        for (_i = 0, _len = paths.length; _i < _len; _i++) {
          path = paths[_i];
          length = path.getTotalLength();
          previousStrokeLength = speed || 0;
          speed = length < 100 ? 20 : Math.floor(length);
          delay += previousStrokeLength + 100;
          _results.push($(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));
        }
        return _results;
      });
    },
    animate: function() {
      return $('.signature svg').each(function() {
        var delay, length, path, paths, speed, _i, _len, _results;
        paths = $('path, circle, rect', this);
        _results = [];
        for (_i = 0, _len = paths.length; _i < _len; _i++) {
          path = paths[_i];
          length = $(path).attr('data-length');
          speed = $(path).attr('data-speed');
          delay = $(path).attr('data-delay');
          _results.push($(path).css('transition', 'stroke-dashoffset ' + speed + 'ms ' + delay + 'ms linear').attr('stroke-dashoffset', '0'));
        }
        return _results;
      });
    }
  };

  $(document).ready(function() {
    window.signature.initialize();
    return $('button').on('click', function() {
      window.signature.initialize();
      return setTimeout(function() {
        return window.signature.animate();
      }, 500);
    });
  });

  $(window).load(function() {
    return window.signature.animate();
  });

}).call(this);

Comments