Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

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,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" 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

Console