Scribble.js

Trace SVG paths.

INSTALL

npm install https://gist.github.com/abernier/e082a201b0865de1a41f/archive/42f199f7137d4e5137b4e2f879f58db2c213d8c9.tar.gz

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://rawgit.com/tweenjs/tween.js/v16.3.4/src/Tween.js"></script>
<script src="https://rawgit.com/caolan/async/v1.5.2/dist/async.js"></script>
<script src="https://rawgit.com/abernier/e082a201b0865de1a41f/raw/69eeade18397b8ac525e5d022b4876d98d838ccb/index.js"></script>

USAGE

see: https://gist.github.com/abernier/e082a201b0865de1a41f#file-index-html-L31

<!DOCTYPE html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
  <style>
  html, body {height:100%;}
  html {display:table; width:100%;}
  body {display:table-cell; vertical-align:middle;}
  svg {max-height:100vh; max-width:100vw;}
  </style>
</head>
<body>
  <svg viewBox="0 0 60.769 13.233" preserveAspectRatio="xMidYMid meet" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M60.197,11.462c-0.42,0.636-0.96,1.271-2.447,1.271 c-1.332,0-2.471-1.08-2.471-2.507v-3.13c0-1.391,1.139-2.471,2.471-2.471c1.355,0,2.519,1.08,2.519,2.471v1.559h-4.978"/>
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M51.187,12.613c-0.684,0-1.259-0.42-1.259-1.307V0.62"/>
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M40.664,0.62v11.993V0.62z M40.675,10.263 c0,1.391,1.127,2.471,2.459,2.471c1.331,0,2.458-1.08,2.458-2.471V7.096c0-1.391-1.127-2.471-2.458-2.471 c-1.332,0-2.471,1.08-2.471,2.471L40.675,10.263z"/>
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M31.171,0.62v11.993V0.62z M31.183,10.263 c0,1.391,1.127,2.471,2.459,2.471c1.331,0,2.458-1.08,2.458-2.471V7.096c0-1.391-1.127-2.471-2.458-2.471 c-1.332,0-2.471,1.08-2.471,2.471L31.183,10.263z"/>
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M26.492,1.16V0.62V1.16z M26.492,12.613V4.686V12.613z"/>
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M19.352,6.233c0.228-0.875,0.935-1.607,1.919-1.607 c0.551,0,0.899,0.324,1.127,0.792 M19.352,4.686v7.928V4.686z"/>
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M15.605,10.263c0,1.391-1.127,2.471-2.458,2.471 c-1.332,0-2.471-1.08-2.471-2.471V7.096c0-1.391,1.139-2.471,2.471-2.471c1.331,0,2.458,1.08,2.458,2.471"/>
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M6.449,3.366C6.232,1.399,5.129,0.5,3.57,0.5 c-1.571,0-2.962,1.211-2.962,2.818c0,1.248,0.54,1.655,1.547,2.255L4.854,7.18c1.163,0.696,1.763,1.235,1.763,2.687 c0,1.607-1.463,2.867-3.046,2.867c-1.751,0-3.07-1.259-3.07-2.927"/>
  </svg>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/tweenjs/tween.js/v16.3.4/src/tween.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/caolan/async/v1.5.2/dist/async.js"></script>
  <script src="index.js"></script>
  <script>
  (function () {
    var svg = document.querySelector('svg');
    function onload() {
      console.log('onload');
      var paths = svg.querySelectorAll('path');
      var scribble = new Scribble(paths, {duration: 3000});
      scribble.erase();
      scribble.draw(function () {
        console.log('scribbled!'); // done
      });
    }
    svg.addEventListener('load', onload, false);
      
    function animate() {
      TWEEN.update();
      requestAnimationFrame(animate);
    }
    animate();
  }).call(this);
  </script>
</body>
</html>

Updated missing url https://rawgit.com/tweenjs/tween.js/v16.3.4/src/Tween.js to https://cdn.jsdelivr.net/gh/tweenjs/tween.js/v16.3.4/src/tween.js

Updated missing url https://rawgit.com/caolan/async/v1.5.2/dist/async.js to https://cdn.jsdelivr.net/gh/caolan/async/v1.5.2/dist/async.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js

https://rawgit.com/tweenjs/tween.js/v16.3.4/src/Tween.js

https://rawgit.com/caolan/async/v1.5.2/dist/async.js