SVG Lines & Sharpness

by Andre Mas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<svg id="svg1" style="width: 200px; height: 200px; background: white" shape-rendering="crispEdges"></svg>

<svg id="svg2"  style="width: 200px; height: 200px; background: white" shape-rendering="crispEdges"></svg>

JavaScript

snap = Snap('#svg1');

for (i=0; i<10; i++) {
  snap.line(0, i*20, 200, i*20).attr({
     'stroke': 'black',
     'stroke-width': i + 'px'
  });
}

snap = Snap('#svg2');

centerX = snap.node.clientWidth / 2;
centerY = snap.node.clientHeight / 2;

for (i=0; i<8; i++) {
  width = 20 + (i*20);
  height = width;
  snap.rect(centerX - width/2, centerY - height/2, width, height).attr({
     'stroke': 'black',
     'stroke-width': i + 'px',
     'fill': 'none'
  });
}