LinePrint.svg (Image to Lined Conversion via <canvas>)

HTML

              
                <header class="container">
  <h1>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 114 17"><title>LinePrint.svg</title><g stroke="#000" fill="none" stroke-linecap="square"><path d="M-.5 0h114"/><path stroke-width=".96" d="M-.5 1h114"/><path stroke-width=".92" d="M-.5 2h15m2 0h40m2 0h14m2 0h39"/><path d="M14.5 2h2m40 0h2m14 0h2m-73 1h6m7 0h2m21 0h7m12 0h2m14 0h2m-73 1h6m30 0h8m27 0h2m-71 1h2m7 0h4m4 0h6m4 0h4m4 0h2m3 0h2m1 0h3m1 0h3m1 0h4m4 0h6m2 0h7m9 0h6m1 0h4m1 0h4m2 0h7M3.5 6h2m7 0h4m4 0h7m2 0h6m3 0h2m3 0h2m1 0h7m1 0h4m4 0h7m1 0h7m8 0h2m3 0h2m1 0h4m1 0h4m2 0h7M3.5 7h2m9 0h2m5 0h2m2 0h2m1 0h2m4 0h2m2 0h7m2 0h3m1 0h2m3 0h2m5 0h2m2 0h2m3 0h2m11 0h4m5 0h2m3 0h2m2 0h2m3 0h2M3.5 8h2m3 0h2m4 0h2m5 0h2m2 0h2m1 0h8m2 0h6m3 0h2m7 0h2m5 0h2m2 0h2m3 0h2m12 0h5m4 0h2m1 0h2m3 0h2m3 0h2M3.5 9h2m3 0h2m4 0h2m5 0h2m2 0h2m1 0h2m8 0h2m7 0h2m7 0h2m5 0h2m2 0h2m3 0h2m2 0h2m2 0h3m5 0h4m3 0h2m1 0h2m3 0h2m3 0h2m-109 1h9m1 0h8m1 0h4m1 0h3m1 0h7m1 0h5m3 0h6m2 0h8m1 0h4m1 0h3m2 0h6m2 0h3m2 0h2m3 0h2m4 0h3m4 0h7m-109 1h9m1 0h8m1 0h4m1 0h3m2 0h5m2 0h5m3 0h6m2 0h8m1 0h4m1 0h3m3 0h4m3 0h3m2 0h6m5 0h2m6 0h6m-2 1h2m-6 1h6m-6 1h5" stroke="none"/><path stroke-width=".88" d="M-.5 3h2m6 0h7m2 0h21m7 0h12m2 0h14m2 0h39"/><path stroke-width=".84" d="M-.5 4h2m6 0h30m8 0h27m2 0h39"/><path stroke-width=".8" d="M-.5 5h4m2 0h7m4 0h4m6 0h4m4 0h4m2 0h3m2 0h1m3 0h1m3 0h1m4 0h4m6 0h2m7 0h9m6 0h1m4 0h1m4 0h2m7 0h2"/><path stroke-width=".75" d="M-.5 6h4m2 0h7m4 0h4m7 0h2m6 0h3m2 0h3m2 0h1m7 0h1m4 0h4m7 0h1m7 0h8m2 0h3m2 0h1m4 0h1m4 0h2m7 0h2"/><path stroke-width=".7" d="M-.5 7h4m2 0h9m2 0h5m2 0h2m2 0h1m2 0h4m2 0h2m7 0h2m3 0h1m2 0h3m2 0h5m2 0h2m2 0h3m2 0h11m4 0h5m2 0h3m2 0h2m2 0h3m2 0h3"/><path stroke-width=".65" d="M-.5 8h4m2 0h3m2 0h4m2 0h5m2 0h2m2 0h1m8 0h2m6 0h3m2 0h7m2 0h5m2 0h2m2 0h3m2 0h12m5 0h4m2 0h1m2 0h3m2 0h3m2 0h3"/><path stroke-width=".6" d="M-.5 9h4m2 0h3m2 0h4m2 0h5m2 0h2m2 0h1m2 0h8m2 0h7m2 0h7m2 0h5m2 0h2m2 0h3m2 0h2m2 0h2m3 0h5m4 0h3m2 0h1m2 0h3m2 0h3m2 0h3"/><path stroke-width=".53" d="M-.5 10h2m9 0h1m8 0h1m4 0h1m3 0h1m7 0h1m5 0h3m6 0h2m8 0h1m4 0h1m3 0h2m6 0h2m3 0h2m2 0h3m2 0h4m3 0h4m7 0h3"/><path stroke-width=".47" d="M-.5 11h2m9 0h1m8 0h1m4 0h1m3 0h2m5 0h2m5 0h3m6 0h2m8 0h1m4 0h1m3 0h3m4 0h3m3 0h2m6 0h5m2 0h6m6 0h3"/><path stroke-width=".4" d="M-.5 12h109m2 0h3"/><path stroke-width=".34" d="M-.5 13h105m6 0h3"/><path stroke-width=".28" d="M-.5 14h105m5 0h4"/><path stroke-width=".22" d="M-.5 15h114"/><path stroke-width=".17" d="M-.5 16h114"/></g></svg>
  </h1>

  <p>Miss the wonderful whirr, perforated pages and lined printing of old printers? Recreate that magic (minus the whirr and paper) with fully scalable SVGs. Upload an image and watch the magic!</p>

  <p><em>Need more SVG? Try <a href="https://codepen.io/shshaw/pen/doLavv" target="_top">HalfTone.svg</a> and <a href="https://codepen.io/shshaw/pen/XbxvNj" target="_top">Pixels.svg</a>.</em></p>

  <!--<p class="note"></p>-->

  <div class="choices">
    <div class="file">
      Drag & Drop files or 
      <input type="file" id="upload" multiple="multiple" accept=".jpg,.jpeg,.png,.gif,.svg" />
    </div>

    <button id="test">Try a test image: <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAwICAgJCAwJCQwRCwoLERUPDAwPFRgTExUTExgXEhQUFBQSFxcbHB4cGxckJCcnJCQ1MzMzNTs7Ozs7Ozs7OzsBDQsLDQ4NEA4OEBQODw4UFBARERAUHRQUFRQUHSUaFxcXFxolICMeHh4jICgoJSUoKDIyMDIyOzs7Ozs7Ozs7O//CABEIAOMAlgMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAEAQIDBQYAB//aAAgBAQAAAACwJY+COR0Uq8xrkkWAwl/DRydJLEk0C86IY8xzFhRMvWWmkJFe6QaEywVixL5wflas/wBhWR8cIx5k0bexGyOzPl9TufRXI8QensbXi4fKPVZabKeemeh3Zpwlbhr6FNGN5/qzQBMD2qtrnWV1Dij3jRjr7DW2fneATU2ZejrQMRcNcLXx+t5fRYXMpZlPOErkNVs3VN7uMvma1lyZE5K9ktoQdHkhLqMisFOsWxSCz2U4bB6d/oNquJpRLI7R1mYMNKGo+71zSMg89zNaZvI6qgkMvgKam9E9GegnnFHZUbNDYAVFjIZhpfWdPLwPntXTVbCTL6t0DsiDcFWN0Tmss1ofSWEMl/Hm4j0s42VHEWUdOyxB1F/V41r3tLFHcdYUw8xMjyqqRg69NAxCYFYrnlDyvYOj2x9yPdC6R8c1pNWgciIqc90XO502ngO9MqsbjBuTnOi5WFcWp+yv5BMNm2kjBoiJOiroNYyyBqGBRgVw/ckquTdaLNhnCUYj4R417pV59nd52F0McScndzZ3I5ZoOY3mq1OXmzO5yMVETk5vdytn5zo+crG85je5OT//xAAaAQACAwEBAAAAAAAAAAAAAAAAAQIDBQQG/9oACAECEAAAAPPxYRbUqYRv7ZZbgW1K/i9JyZtUtyuNXDtX5+b1bMHRnbc6IWzpOnLnoc/P1w5dDFzOrcjwdbhoYdPZpdNPNG7prjfRbFOTBgJ8VT0WAOGVl9WnZ1A1kdS6pSBiAYmJoGJ//8QAGQEAAwEBAQAAAAAAAAAAAAAAAQIDBAAF/9oACAEDEAAAANp5Q5CrVzxm/DpqalZsz4mOqkco0JnY69fnwXilebb2EUjd8+uG7PKiakx6kaMdFWnlYztN2mAOB4MNc+gDw7m9DXHMmZQT6kezKg7ieHDuBPFT3Af/xAAnEAACAgICAQQCAwEBAAAAAAABAgADBBEFEiEQEyIxIEEGFDAVMv/aAAgBAQABBQGldquxCp34WNNRYV1NTxoCdNw16ASGsaKzpOvgivtQPh40K1hrEavZ9vwE89CYKxBUpBqIgVoU1Ou4VgQbaa1CPnQoIKqkI8TqSGSBTL7cfHru58dR/I8jdXPo8ouquQjxOs6+QnydYR8sVe6CuEDWhsiASxkpq9vO5W67hcn2cnAyaD8kOFn3YV+PdVk47VtsCddwiNCPONVpF3OgnXU1uIuz/IMlnvw6q0qnI1VsuZV1b/zP4tmdb+wMHWfsoIy6hWU8kUSvL1ccxdV5dTAKJewpopf3+YqdBLbaqle3HsnJCj22ImA5qzasx2WvJGse0WJ+7mCA5KaxFLVhyI1hCUWbfCza68LOz68nBxq3yc//AJ+YtnK0vffl8bez3cYMXGfrEPVlf5HIdZxdxLb0b7GM9wSm75C9tEFksYhw7Vw5em45xTyZcdMlwuU13VeWyiVIglF2No/1nmKtSO2YoWzkayWyq/fTtGOj8tPZss4jDxs1vj2EpdiLTmvddbVnkRoNSpRr6CO4K+6wvYdvG626yt+xYtB1MAQyxR1ZCZw/LnGsya+PUX5w1fb2hn7p0axWNAGNuHqs7DsrFZU/kV9wmMAa8eoDMXtUdmMPODi3ZND494ZMMlbk6MBs0biV/Ho4PS4k+7WCTKEBWuuoB+iIbLwn/S8XZ3Y9jquuy1uI4y/FW3EV2GGFHKUFLRV1i2MpXLyNHOtET2xjXM1g95+1PZRjI0arvMwKBbVqq4fKutnPF8ZVTj+2ontjdy6nLIzXZDAVhdym5kmNkUvTcr2K+KzqakFtPYSi50voyMTIXJpEyXStWLMeN4zaKvUel29cl191sO6+VcayJmUlJRm+2a+QxbVXJ42wuMA5VLEKtN1rU4lnY2V4ksdrbaUJt4zPoFXdfXKdETKvxwzcqtcv5DItjOT6VksKLbMd25OgjBsXQ7PWKGZczt/YB02OFVFv805FqROYylA567WZyL2vdkd3rqNxcIPVHKsbtoxWYys1i13qHLqth+e57nWbAVchdtexZruoexmKxbCTTXWVtGoxHaV245Xv8+PRK1V6TORykSlvM+puMfl20EIVLGLegMoSe+tdVtrWGeCmNrZqT3qlGrbQkdmaVrLE16GD7hO/UtpCSYfUCdTA3VYGr0t2o1isT97iaEZtn1MWdPUeIddoB2auugIcaxTbS4Pgwgb/AB1BqbYAwfZM7mD7Q6au5qx3pVsIDLtprxqq8vjsTJl/8aBOTjXYtn4DUY+ghPp49K7TW1d3U4eWKXr5QOa79jshNlWLYeV4Rcd0wc12fDya4eOcVtiXAff5AzzPqYnGl1p4zFTHTK0yu7ixaOQrOdl1TuygXuzG1qTZ0LWr+WprxrxUalOLczJn2Vl0zDMjJoyk96vMV+9TGw9HyGZC2wTsfjr0Ex8kA5+f0Rn7TdWuyx7S0d3c7P8AgJ9weglt3c9p3ELTf+H3P366h3Pv0I86/wAR4/xPofX9fj+//8QAOhAAAQMBBQQHBgUEAwAAAAAAAQACESEDEjFBURAiYXEEEzJCgZGxICMwocHRQ1Ji4fAzcoKyJFBT/9oACAEBAAY/ARwWuycUT8tswsIWq0WqkhYCFhVQAsMVghu10TaVWGClS0Sqriq4IKCsdo28lC1TdUNP5RBU2VqqDkuWSLrZwYwYkq90exLmYX30+QXZs+UFe+sroPeYbw8lfsnh9mcwqnZRcUdgQ5KFWkew61tDdY0SSuuNn7v8MGjQPqUxou0qZ1Kl7N3VtVu7q66zwP8AUssnBMtrI3rN4lv7+xKqhzQu5BccttcNlj0BnYtHe8dyyQujhsOqJhfVWnQ3dl4vs/uGPnspguCnYD4puDphXnGWGkhbuOa3nQcpzVDQp79BirO/+qnLBBl4Tor1o66OKkOToqdli4U3o86K4ysEiE1uYqfoEHTXRURnEIA9o1Cbr3fsnH8uWSe+cBkhfJiM9Mlfe6cwzScGq0LN0iAWZ3sYTLOzNy0LSb45KyF+SBLzcN69qHqwspNwiXRqg2wdFlFG9VvA/wBw+6JtLU2jzrkiAmu0IUNwByKdG67EFBjshE6qZR0+i6zF+XAK4G0yqi2BzQdMuGP2QphgoM8Qnn85mvkrB2EyD4oCZmgTfAKqcAdkIBzi3UgL+ufEeiD7PpAJ4j6KXPbxQspAnBMZfbMxHgaLjkrxQcKFU0iip4qfVWdpPZgxmhNmbezeO7kNakLr39faVlgIPgCc1ftRcJ7unP2JEqhW7iM1LnUKrJM5KIzwV7HJRUOGKjJCfNUnylTWK4iFUoWFufcGgdp+y6yzdvGvaorlnJ4rVU2QO0pJ8lOuCgvhVrRYUlUxyTSJc49r91QEj5IU8ys54Ewi3y8FJ5Ip7mPM2ZiOBV1xK4ZogZbDVTDrusIfKVEGBgpIg5H9kHxX+VUnJGMsaoRLOGKL5hzAN3GUXBkOxucOaLYi7VtcaYIclcs23nHJF7vxcRlRYKIxzWGOKk5gwpbQoC/UYNXu7O9kXkf66IWolsYk1galPcXF1N0HTXmjWmEoFhqcQnFwq0zGa37wgTRFlnV1BPBMIxwcpPlyV1un8ATBdqau589mCMZICd2Pnomxm31OyMeaaXNa20MyTgoe5jgKxMDyT9643X1hBvcOfhMJsCkzxRtLkgzR2BkLcdctbu8065wqDm3CU0Ab2ik1OSsjnQ3vXxUbSnONSKJvcYM3UnkqDHvQT9gpwyiB9CoeAePJXbVkCQ4VoXDwW+HAzAk/6xlqrN4pZNkOGtPuUD2kSRz0CvMu7pkV+ac/pFq14P4Y3q6cEXnFxwQ0Cay3Is7QUDjgeRQgzOG2XGF2rrczn4Bf8aya0/8Aq+p+aN+1vzzVdl3MKWgHg8Xm+eITB1O+0GRIjCKZQqmrcigAbpGYrM6oBpExGie134e6PvsaYknBOnstNZzKvse5hx3TQeBVbQO/ub9l2Gk8Jx5LfeDGJ7reFMUSK6E0+Sg+CN3s4D77Q4ZKLsJrprPioGhPkpuK/aB0ckSNgil0U5pgV01hABG7XVx1/mS3jOy63vU8M1fe29doAcPLNEmmAnPyRjYBaTeFKK8rzyL7/RXaK7ZnfJgchn7A2b3+WvJScBgNpd89EK1GSJNBp99nFOaY1CDu6cuKlQDXQK8TX2PBcl6n2Bxx9riqYmg5qThrqpOOSMR4hYeWG28clw0+ENI2Bp8vonXgXnKO845DOEGWlmGudXqmCXDm6aI2lmxwsxnIIjDEfCj2Bs4qyFjHWkboifGvGgVxpLya9ItT2nuyY3mcShZvA6sEf5PPeP6WgUCu2bQ0cMTzXvbNruOfmET0e1ufofX5hdXbNunXI8j8W801iE0jH0yCY8d10OHnBV0HabJ90l2tackHWLXQ/shu82fGoV0WLgcd6nqpeyG/mxb4kIP61teBjzCkQ7lX0+ELe3tOpY4S0Dtka8Ar9i27aOq1zqu5osfRwxCllXjAIi8bDpVmaEULXaEJ3RenC8ML401V5jzWrXY+qLyd/B4Gf7KovNOlDHoVeZ2Thqp1+DffvCyADWakDE8EXvO84SeDclfYd5qv2Ji0b2rM5ptvZnqulspOvB+oXU225bCodpy1CdZuMXTN0dk6EKuJiqDTlUFcfhXX1FF1Vl/kdT9lvOJ5LOdVJLp1WJkYHNS914xHxpKr/wBn/8QAJxABAAICAgICAgMBAQEBAAAAAQARITFBUWFxgZEQobHB0fDxIOH/2gAIAQEAAT8QYYXRsP0QutNDXvmIdoF3TbnmIIqGaK75iATPNivV1BFNKmG4Byl9gvxRFSOzT1O9PDgefmBwNtqYZS3WX98S5W6nJv8AcrCuTO4ogh2rqZKrbRKdEytbT3LBb5B7lxXd44qAyV/TGpSWCMrEZqxs5uVlCnC8cwVUBmnhYlhBrCY/8jTIXs9S/BplutSh0Lr1EtFJlXiYtQNHEFW3OjYTUq3h3KXatMVQ+IIUApi/MJRKpg8so6Ule6jZVckI+h26vUU00C3mAgNrnzEbijH/AFREaDXPMqnAF0++aiXVg8OHmIaTCL4TInXyujlg3fNHzXq5ZgmozYS/dwoUdTUP5QlrBnP9HxKBgsx4iKWK13iWUyzVe2Cp4F3zPQYqOImd2VF7kd8mIdtRLAbmUTfxqKX0NwbT16lZ01qYnORwwFiTug8xuqlbvR1fyMGklopLhUHbTA+Zb1K8Ys8kPLbbq5np6Z8UQjhPIcJLGygweo1CmTSaZlVxWnxUAKNZ11AC0xV/MS/yx8QrivsyQpbq4Pb56jU1L0dFtvcrs0uGoOnVcSk70psY+uZR6IFuccRpM5IZgIMATOgXgjkjSdJcHOPgwn4ZgpButvFEttQD69yhV57HMoUydyhdXivjxMHLkfUZ3CFjYZzSeMxToV5gObfE7sNlPsg4sGlhl16lBQQsSAlpRF24P3KBZpIm0dB/MtNK40ZSZwq/Uuxql0oQKEUzBNBjl7i1Kqk6zHzcSUti3bfzE5OHz1DdgV7JePiFWOX7nEUv0wF9oq98wwVKGDq0PCNjTSjWhj5qJPG5VacJXlmcCyhZENPFsTmapnJJd73GibYcXB1iVSTxtEw9yl6isgOS69vxK/wXvdpWkQDTkpXR7g33W6A6rMyYCOHxFBasX1THLJYQybszBMqgCkF3Z/kQ0Ecmj/5E4jVVolgwjOthuZVjaPah41kghpVbqsrUQwELAt/PzAYchb+nrMaDa22+2Y4o028jdJEyiohULoQzrQN4C6hQUMsctwqxjBZi8EuXBt/UxpGWK9yjY51EaV0DWOTmFGzGqdFwINphHPntFKNZ248FwHINtsEdZ4jcVLIV5GobFZdA8GYA5cGuTr5YJwJtGq8Ms8K0K9Z3CAq0KXn5mpLbbeR3BhsrpAf81BonWAWiz+QIg0vcg3YaRNQliS/CmLmVm1fuBtepmrnuMCZXd1WJlbB6f6gBGBBOc8woEBVu6jqNORW6x/MUFYOF8+orKtMq6gIKF6eJaUqAp4lgaOhvzPrG+QYO+oQ5GrqI4NBThrhia1MznwxcI7SmngWX65cxqXfmuIUOxzAcOZqoD9xBG+NvN+o+sq2O/Ux4jqkcw3FiZY1Mh6EOa3V7VCUQLysxgfQlhTqMND7jzxb/AKsTICi7sCs1xcwRp3c5Y+5faGqFtN8fU0mtSkQfKUWYihAGlChi5MU03FBUaX4m5eLhpYhdVzr/ACNmqYr8v3ERSCXkMMa2fAzR75mTAFJmz+k1oZtcLSYVVXAjZ0Ma+ZRKmlAXnupdEFqLJ4Fvt0Q5lIvBbV6+IC5JWSyx5RBCNpUHZ62VLWQcM1BaAXTg7VwERUahxOHzLRQSdNDS7lraA9B7hWSxaM5I2azk7hrtTKYb7hhalVWbxglQSwxZcDdx9RKQUXYLSexmockFJZo1g4joklI2eWuJYCF9AqsyxkYNGuswhkLDyyqiAbNoXdrjEagUUB4DhnbkF+9eRi4FIiFvZgIgUNfqF5A52mIAQ5OImLi9YyM08m5X2hK5zY/cwQ6t9HMdEDKwR/nUASwJQRxR6hJptpYdVp9xooJadKZCL4INU2N3YuCUtajjKOMKLqKM+nMraWi5mm93/kuCy0Dcmq7g9EmL8V/EALbgcHqKKVZEY7HtCE6JuVUAyYp9sF9cCXjJSYgrADVmC+DHRem8inyQAE3HQftJsC0PBFYY157iMzMW8Rhmciw8NOcKX0S/tNO4KDOoHY4HddFxwY6GKnOVrMS0GIqFmvKAgg5slmnEE/V4HBwfEVeWj3OIkU3fAPiNhLbTNhziEajU9NXGI+C2znq9saUhhfx2OI+iOpLM3hXrE4U9Yl4ThiCt5C9V/UE+JPIZofohvQcl1VwbG+4Gnw5h6gpWUUB3crIN2KS0NO3G4k0Jool3n5SwTDoYyKv5rs/uGWB+ZW65rUJKisNk4zEPVmK2pXLWJQiYysrQKX9l3mPE2fgmeRvABXg6lwKf0DbBENrOwa+024z1U/6ojm1/HTCTKHB4OuYoI0QnSutwwdqjjHaV+m6oum/8mbgwZYdY8w20q1zv5gkfJFWO1YO2LIkFrQ12rZcClUQ31uJmW2vV1n4zNWVOCK/rqL+nTg+iMsszvMZPW963+0WUQpLNZ9j9R2cOCxQTQMEqlaXNagA5MQzjmIuwKPuKpwGq/Uu0pSWNDRmIiq1VjVcQjZEY4AyzPollW3muWPJxZUaCd1UXxGvgqNCtplilVKXRyeC8eYyKA0eAOCDbbEu8Z7lQxms9DWfmKt5Cc40V5mbhb8vPZ/AWOH9RKgKDPCYahjI3LfQNerlQnbdQILjez7ExEECnfuNV2enkZf4p1/kSq85lml4hmTxs98R1ngtslv8AcTE1/MRPwpLxkDmtLNjDQHUYXUdbGpWhWX/se4WVP/OJV3kvlbXvmEV+lGs5iaErFzR9biJ5VjAJ4iMN1HPGoMjRobVjYihraDTFthThiVzCO4pVHURMO4ZPNQULgDck/qBmnGP5jZ4VdOeAe2L+N0KOon6CYe6KC82SuGHJVVhByahzzBWi+6BWviIoOa539S8Z+CX+AualquACJb+pwAHZcvccPqouDkKPU5HcRECxR4XEF0YkKFZtarr9kunlslNW81sPcWqN7GNWbW4+Wel3Cytrl8y+0uKUPVCRUlMgp/mPqIKzoNl3yQiv4WcjmXawdTMwvziWFdczmVS0gJSb3FGQd+rNnnqEAs4t6Fh5IijTeAg/ZDpGzAO/Uph3GgWl3cDMPRA+zcJFaqaUwF7Hq/UVkI0FaN01v4mUGpuB8mvmIHSqly8TMKjOWBrz/apeA4fMri/zWZmt5iaupgY1BTQ4d+po8M6ro4TzLtdgMWkuh8R2Gu/D/wDsd1ZiY+Pmcj8kN9JgZBHKFaR09kQD1UWi9JYXqUrEuMy5DldccRW764ojIhoivvkteqmz3KnHC2Qaz+a54gShovzKQpobcHzA1XCcB8Drlg2i1PN/JgoA2Hs6YUObZgf9zEaDoMINl9EobHKN05XJLIGjTBuZysuIMNnMQ279gYfnNprPZ7jgX8f/AAOH3A7iviAxI0/CwBuBnkHUV2zenPO+mgi5PJgw/iVWD3sxrAzrC/hlEtxeEHzB7AoXo4igeNS2W/nO+NRwTmKLApviObqYI83Z7InPUXfZ1G4fCU8Z5eYDx8TnjcVvJUuFO4h+CBY51mAp8SmAgt6hf3Ld/EVKuK7QKES44gKPeYU3gmSWu5WLl1L/ACKXFb2S8wjqG5xHUJ18epvx/cdzhqGpxxH0/Dxr8cx3+H//xAA2EQABAwIDBgQDBwUBAAAAAAABAAIRAyEEEjETIkFRYXEFEDKxFEKRIDAzUsHR8GJygZKh4f/aAAgBAgEBPwB7zmnqi9CotqeaNYwNUak3QqGEHlbR3M/VbZ3M6Kod4+yzFFxuVQpZ5c92RjdT15CVQGDfujKTNpddVvD2lpNKx4A6Hp0Um4NiDeUXxCL5Wfqn0ngmUWzoCouARKxo2baTBaGl57uP/iaXBwcBpyWCrGrTkgiLXWPw52mdvzAE9+aexzRJCLjYBZH8lWpFxMoUQQRNyhgt4uBnezD9l4jVqMqMAjKWWkDWSEK9SmKeWIaDAgG5Ot14dtHUy+oZc4zyWIbYGJ1VemHUyIIJ/pKGHeT6TbUrZnXKfTPHTSOyqAk9ll5oOg6LH4d1WmHMGZ1Obcx07IB+IyCCSy2ZwiAqDMjAFUO6i4GUG3n/AIAo9k4i9kKgOmmi2bi6YNkDAJJAAVTxEMrPAIez5T7rC47a1S08RZTmBAThUB0BnrHum4nOSMgytOU91lPIfzgquYh4EG3O/ZU6pFQNeC0t+U2VIlwDuF9eq8Rxm0IpsO6Cc3VEGV4f+NI4AoYilTbBcM0lYnDiuwOZ33UBWo2yOt+VoP6r4ox6anonTjPusQ5zHkAAX9RVNnxDyHOGUC4A3o7p5ytgDhAVfw8yXNOWTMHS6OGqgQG5v51WC8OcDmeSJ5Knh6LDZsu5m5+p8qjZtALXar4OjHpd/s7n7LFVznIDZaOKwclmctyzb/CIBhOph0Sm0hMRYLhAVSTut5qmwtF9VVALTM25LaM5H0/wIsl0nRGYgBNmLo6IDyAhDylEWKLnkkiffS3Yfqq3ifw5DHU87v7ot1N1R8Xw7/WDSPXeH1H7JrmuaHNIIOhGnmPKB5FgM21WOOFLpMuf6ZAtPU9OiqUC03sCsIK1N003nM38Si60j8zeBTcVWcScrco7zKp1KpNzINwYt24IXH2cRg3ue1guXfNwDQmYNoYGnej6dk3BNaAGkjKdw8W9BzHRNZYTE8Y5oMA0t9qLyo+4P3P/xAAyEQACAgAEBAMGBQUAAAAAAAABAgARAxIhMQQQQVETImEgMlJxkaEUI0Kx4WKBgtHw/9oACAEDAQE/AAgqq0gUbQoO0OEp6TwVs+UQYYA2ECL2EOGtbTwk+FfpPAw/hG/aLoBZ+cFQVNzpHRgLWmHUjWeIOoqCoYBMs966lOoszNflB30EZT4ZCknzUa7KP5nCKwbMQ2XbbScVhhH066xGGxgYEnWITczDv1ivUOIbEVlsd+sw3K7C7buelQkhMOlzZx3qcVQyqOg1m/WK2Vv5iso1sTT4hvBUuDUiYOIFLI2geqP9QilFGcit9x5pjuGcmETKRBLgmQwGofNVAkmYfDhkFnKw3FzF4dQlrrUdSu8FesOEAAS2p1mnrAq2DVftCgIsa/KMoGnWMPAQUfzGGvoIMRu84fXDa4+G7tdeWL5GIP3hUNud/WeD6rv9pg4SugaydNhMX8oaA76XtE1az3uEYeIcxYhvqIeGYa50+sGN4SZFN3vGxsRhvQhJmEVKkk0y7abyzdWv22q5wtovYk3vOLxCxC9te+vzgJEDEXC5qfOIBu0dgTpMFiriq83eZMS/8v8AjM1CgIKuyY1dJ1hPK7h5UIN5SgDaPgg+YE0T2jcK1WhDemxhBBIIojoeQh5WeQcicL4oABUZTqM2/wDYTwkNspqYiI5Af3SNHbUX6MNv2jcIiHKzNffSqj4OGNrvtf3jCjR5Vzw8fDKFzoBuOsfizmJUVfr95+MGtqKPvL+lv9GPiWTlvL+m+0OITvrDryvnmIBHQyzLPtjkfb//2Q==" id="testImage" /></button>

                                             <button id="clear">Clear Output</button>
  </div>
</header>

<div id="output"></div>

<div id="filedrag">Drop images to convert here.</div>

<div class="container">
  <h2>Tips</h2>
  <p>Works best with high-contrast images where the dimensions are relatively small. Images larger than 512x512 are scaled down.</p>

  <p>After conversion, run the output through <a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a> for even smaller file sizes.</p>
</div>

CSS

              
                @accent: @gray-dark;
@accent-light: lighten(@gray-dark,20%);//#FF7777;

@gray-dark: #535050;
@gray: #ddd;
@gray-light: #eaeaea;
@gray-lighter: #f5f5f5;

body { 
  background: @gray-lighter;
  font-family: 'Courier', 'Courier New', monospace;
  padding: 1em;
  padding-bottom: 2em;
  margin: auto;
  font-size: 14px;
  line-height: 1.4;
}

.container { margin: 1em auto; max-width: 40em; }
.container:first-child { margin-top: 0; }

.note { background: #ffee77; font-size: 0.8em; text-align: center; padding: 0.5em; }

h1, h2 { display: block; margin: 0 auto 0.5em; }

h2 { font-size: 1.4em; color: @accent; }
h2 svg { height: 21px; width: auto; margin: 0; }
h2 svg path { stroke: currentColor; }

p { margin: 0 auto 1em; }

a { 
  color: @accent;
  transition: color 250ms ease-in-out;
  &:hover,
  &:focus { color: @accent-light; }
}
img { vertical-align: middle; }
button { 
  background: #ddd;
  border: none;
  appearance: none; 
  cursor: pointer;
}
button, .file { 
  padding: 0.75em;
}


svg, label, input[type=file] { 
  display: block; 
  margin: auto;
  text-align: center;
}
label small { display: block; }

svg { max-width: 100%; }

.choices { 
  background: #eaeaea;
  display: flex;
  align-items: stretch;
}

.choices button {
  background: transparent;
  font-size: 0.8em; 
  border-left: solid 3px #aaa;
}

.choices > * { flex: 1 1 auto; }
.file { overflow: hidden; flex-basis: 40%; }
#test img { max-width: 30px; }

#output { margin: auto auto 2em; text-align: center; }

.output { 
  display: flex;
  width: 100%;
  margin: 0;
  justify-content: space-between;
  align-items: stretch;
  padding: 2em 0;
  border-bottom: solid 3px @gray;
}
.output > a { 
  display: block; 
  width: 50%;
}
.output svg { 
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.output__details { 
  width: 50%;
  display: flex;
  flex-direction: column;
}
.output__raw {
  display: block;
  background: #eaeaea;
  white-space: pre-wrap;
  padding: 0.5em;
  font-size: 0.75em;
  max-height: 20em;
  overflow: auto;
  text-align: left;
}
.download,
.output__size { 
  display: inline-block;
  text-align: center;
  margin: 1em auto 0;
  padding: 0.25em 0.5em;
  font-size: 0.8em;
}

.download { background-color: #f05555; color: #FFF; }

#filedrag { display: none; }
#filedrag.dragenter { 
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  background: #ff5555;
  background: rgba(255,200,200,0.8);
  text-align: center;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 999;
}

JS

              
                console.clear();
console.time = console.time || function(){};
console.timeEnd = console.timeEnd || function(){};

// Adjust this value at your own peril!
var maxSize = 512;

(function(){

  "use strict";

  function each(obj,fn) {
    var length = obj.length,
        likeArray = ( length === 0 || ( length > 0 && (length - 1) in obj ) ),
        i = 0;

    if ( likeArray ) {
      for ( ; i < length; i++ ) { if ( fn.call( obj[ i ], i, obj[ i ] ) === false ) { break; } }
    } else {
      for (i in obj) { if ( fn.call( obj[ i ], i, obj[ i ] ) === false ) { break; } }
    }
  }

  function convertImage(img){
    "use strict";

    function each(obj,fn) {
      var length = obj.length,
          likeArray = ( length === 0 || ( length > 0 && (length - 1) in obj ) ),
          i = 0;

      if ( likeArray ) {
        for ( ; i < length; i++ ) { if ( fn.call( obj[ i ], i, obj[ i ] ) === false ) { break; } }
      } else {
        for (i in obj) { if ( fn.call( obj[ i ], i, obj[ i ] ) === false ) { break; } }
      }
    }

    function makePathData(x,y,w) { 
      w = w ? 'h'+w : 'z';
      return ('M'+x+' '+y+w);
    }
    
    function getBrightness(img) {
      var lums = {},
          data = img.data,
          len = data.length,
          w = img.width,
          h = img.height,
          x = 0,
          y = 0,
          i = 0,
          brightest = 0,
          lum;

      for (; i < len; i+= 4) {
        if ( data[i+3] > 0 ) {
          lum = data[i+3] - (data[i] + data[i+1] + data[i+2])/3;
          lum = ( lum / 256 ).toFixed(2);
          
          lums[lum] = lums[lum] || [];
          x = (i / 4) % w;
          y = Math.floor((i / 4) / w);
          lums[lum].push([x,y]);
          //output+='<circle cx="'+x+'" cy="'+y+'" r="'+lum/255 +'" />\n';
        }                      
      }
      return lums;
    }
    
    function makeCirclePath(lum,data) {
      return '<path stroke-width="'+lum+'" d="'+data+'" />\n';
    }
    
    function lumsToPaths(lums){
      var output = "";
      
/*      each(lums,function(lum,coords){
        var paths = [];
        each(coords,function(i,coord){
          paths.push(makePathData(coord[0],coord[1]));
        });
        output += makeCirclePath(lum,paths.join(''));
      });*/
      
      // Loop through each color to build paths
      each(lums,function(color,values){
        if ( color === false ) { return; }

        var paths = [];
        var curPath;
        var w = 1;

        // Loops through each color's pixels to optimize paths
        each(values,function(){

          if ( curPath && this[1] === curPath[1] && this[0] === (curPath[0] + w) ) {
            w++;
          } else {
            if ( curPath ) {
              paths.push(makePathData(curPath[0],curPath[1],w));
              w = 1;
            }
            curPath = this;
          }

        });

        paths.push(makePathData(curPath[0],curPath[1],w)); // Finish last path
        output += makeCirclePath(color,paths.join(''));
      });
      
      return output;
    }

    var window = window || {};
    window.CP = { 
      shouldStopExecution: function(){ return false; },
      exitedLoop: function(){}
    };
    
    var lums = getBrightness(img),
        paths = lumsToPaths(lums),
        output;
     
    output = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 '+img.width+' '+img.height+'">\n<g stroke="#000" fill="none" stroke-linecap="square">' + paths + '</g></svg>'

    // Send message back to the main script
    return output;

  };
  
  
  // File Output
  var outputDiv = document.getElementById('output');
  
  function fileSize(str) {
    var bytes = encodeURI(str).split(/%..|./).length - 1;
    if ( bytes === 0 ) return 0;
    var sizes = ['bytes', 'kb', 'mb', 'gb', 'tb'],
        i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))),
        size = bytes / Math.pow(1024, i);
    return (Math.round(size * 100) / 100) + ' ' + sizes[i];
  };
  
  function download(data,fileName) {
    var a = document.createElement("a");
    document.body.appendChild(a);
    //return function(){
    var blob = new Blob([data], {type: "octet/stream"}),
        url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
    a.remove();
  }
  
  function downloadLink(output,fileName,linkContent) {
    var link = document.createElement('a');
    link.setAttribute('href','#');
    link.addEventListener('click',function(e){
      e.preventDefault();
      download(output,fileName+'.svg');
    });
    
    link.innerHTML = (linkContent || output );
    
    return link;
  }
  
  function showOutput(output,fileName) {
    var figure = document.createElement('figure'),
        figCaption = document.createElement('figcaption');
    figure.className = 'output';
    figure.appendChild(downloadLink(output,fileName));
    
    figCaption.className = 'output__details';
    
    figCaption.innerHTML = '<em class="output__size">Output size: ' + fileSize(output) + '</em><pre contentEditable="true"  class="output__raw">' + output.replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</pre>';
   
    figCaption.insertBefore(downloadLink(output,fileName,'<span class="download">Download SVG</span>'),figCaption.childNodes[0]);
    
    figure.appendChild(figCaption);
    
    outputDiv.insertBefore(figure,outputDiv.childNodes[0]);

    console.timeEnd('conversion');
  }

  // Convert image to canvas ImageData
  function imageToData(img) {

    var canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d"),
        width = img.naturalWidth || img.width,
        height = img.naturalHeight || img.height,
        maxSize = window.maxSize || 512,
        greater = ( width >= height ? width : height ),
        scale = maxSize / greater;
    
    if ( greater > maxSize ) {
      height = height * scale;
      width = width * scale;
    }

    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img,0,0,width,height);
    
    return ctx.getImageData(0,0,width,height);
  }
  
  var imageWorker = cw(convertImage);
  function convert(img,fileName){

    img = (img.type ? this : img ); // use `this` if `img` is event
    if ( !img || img === window ) { return false; }
    
    console.time('conversion');
    fileName = fileName || 'pixels';
    
    var imgData = imageToData(img);

    if ( !Modernizr.webworkers || !Modernizr.blobworkers ) {
      console.log('No workers or blog support. Larger images may timeout.');
      var converted = convertImage(imgData);
      showOutput(converted,fileName);
    } else {
      imageWorker.data(imgData).then(function(converted){
        showOutput(converted,fileName);
      },function(e){ 
        outputDiv.innerHTML = outputRaw.innerHTML = "";
        console.error(e);
        console.timeEnd('conversion');
      });
    }
  }

  function makeImage(src,callback){
    var img = new Image();
    img.onload = callback;
    img.src = ( src.target ? src.target.result : src );
  }

  function loadFiles(e){
    var files = (e.target.files || e.dataTransfer.files || uploader.files),
        len = files.length,
        i = 0;

    each(files,function(i,file){
      var reader = new FileReader();
      var fileName = file.name;
      fileName = fileName.slice(0,fileName.lastIndexOf('.')) || fileName + "";
      reader.onload = function(e){
        console.log(e,arguments);
        makeImage(e,function(img){ convert(this,fileName); });
      }
      reader.readAsDataURL(files[i]);
    });
   
  }

  // File Uploader
  var uploader = document.getElementById('upload');
  uploader.onchange = loadFiles;

  // Test Image Conversion
  var test = document.getElementById('test');
  var testImage = document.getElementById('testImage');
  test.onclick = function(){ convert(testImage,'test'); }
  
  // Clear Output
  var clear = document.getElementById('clear');
  clear.onclick = function(){ output.innerHTML = ""; };
  
  // Drag & Drop
  var fileDrag = document.getElementById('filedrag');
  
  function FileDragReset(e){
    e.preventDefault();
    fileDrag.className = '';
  }
  
  function FileDragDrop(e){
    e = e || window.event;
		FileDragReset(e);    
    loadFiles(e);
  }
	
  fileDrag.addEventListener("dragleave", FileDragReset);
  document.addEventListener("dragenter", function(){ fileDrag.className = 'dragenter'; });
  document.addEventListener('dragover',function(e){ e.preventDefault(); /* Essential! */ });
  document.addEventListener("drop", FileDragDrop);

}());

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Save Automatically?

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions