JSFiddle - React, Tailwind, and code Playground

by shrpne

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="_x31_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 151 175.4" enable-background="new 0 0 151 175.4" xml:space="preserve">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#CDCDCE" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="22.9256" points="
	124.7,175.1 143.7,175.1 150.7,167.4 120.4,79.8 96.1,9.1 87.4,0.4 66.6,0.4 54.7,9.4 28.2,85.6 0.3,165.9 7.4,175.1 27.5,175.1 
	36.1,167.5 53.9,110.7 75.2,40.9 96.1,109.9 62.9,109.9 73.1,139.1 105.3,139.1 113.1,165.4 "/>
<polygon opacity="6.000000e-002" fill-rule="evenodd" clip-rule="evenodd" fill="#E3E3E3" stroke="#CDCDCE" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="22.9256" points="
	124.7,175.1 143.7,175.1 150.7,167.4 120.4,79.8 96.1,9.1 87.4,0.4 66.6,0.4 54.7,9.4 28.2,85.6 0.3,165.9 7.4,175.1 27.5,175.1 
	36.1,167.5 53.9,110.7 75.2,40.9 96.1,109.9 62.9,109.9 73.1,139.1 105.3,139.1 113.1,165.4 "/>
<polyline fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#CDCDCE" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="22.9256" points="
	91.3,94.2 93.3,83 118.7,74.7 105,91.9 91.3,94.2 96.1,109.9 119.6,103 123.3,87.5 105,91.9 96.1,109.9 78.1,109.9 62.9,109.9 
	67.5,122.9 78,122.1 73.1,139.1 91.5,129.5 93.4,118 78,122.1 82.3,115 96.1,109.9 93.4,118 105.3,139.1 113.1,165.4 124.7,175.1 
	127.5,159.9 142.6,154.3 150.7,167.4 124.7,175.1 118.1,151 141.9,142 126.4,126.8 105.3,139.1 110.5,120 96.1,109.9 131.6,112 
	110.5,120 128.9,119.6 135.7,123.9 126.4,126.9 110.5,120 93.4,118 62.9,109.8 78,122.1 91.5,129.5 105.3,139.1 143.7,175.1 
	141.9,142 127.6,159.9 113.1,165.4 131.6,112 86.4,77.8 111.5,53.9 75.2,40.9 91.3,23.5 87.4,0.4 70.3,21.3 45.4,36.3 67.5,65.9 
	31,77.6...

CSS

svg {height: 500px}

JavaScript

function convertToAbsolute(path){
  var x0,y0,x1,y1,x2,y2,segs = path.pathSegList;
  for (var x=0,y=0,i=0,len=segs.numberOfItems;i<len;++i){
    var seg = segs.getItem(i), c=seg.pathSegTypeAsLetter;
    if (/[MLHVCSQTA]/.test(c)){
      if ('x' in seg) x=seg.x;
      if ('y' in seg) y=seg.y;
    }else{
      if ('x1' in seg) x1=x+seg.x1;
      if ('x2' in seg) x2=x+seg.x2;
      if ('y1' in seg) y1=y+seg.y1;
      if ('y2' in seg) y2=y+seg.y2;
      if ('x'  in seg) x+=seg.x;
      if ('y'  in seg) y+=seg.y;
      switch(c){
        case 'm': segs.replaceItem(path.createSVGPathSegMovetoAbs(x,y),i);                   break;
        case 'l': segs.replaceItem(path.createSVGPathSegLinetoAbs(x,y),i);                   break;
        case 'h': segs.replaceItem(path.createSVGPathSegLinetoHorizontalAbs(x),i);           break;
        case 'v': segs.replaceItem(path.createSVGPathSegLinetoVerticalAbs(y),i);             break;
        case 'c': segs.replaceItem(path.createSVGPathSegCurvetoCubicAbs(x,y,x1,y1,x2,y2),i); break;
        case 's': segs.replaceItem(path.createSVGPathSegCurvetoCubicSmoothAbs(x,y,x2,y2),i); break;
        case 'q': segs.replaceItem(path.createSVGPathSegCurvetoQuadraticAbs(x,y,x1,y1),i);   break;
        case 't': segs.replaceItem(path.createSVGPathSegCurvetoQuadraticSmoothAbs(x,y),i);   break;
        case 'a': segs.replaceItem(path.createSVGPathSegArcAbs(x,y,seg.r1,seg.r2,seg.angle,seg.largeArcFlag,seg.sweepFlag),i);   break;
        case 'z': case 'Z': x=x0; y=y0; break;
      }
    }
    // Record the start of a subpath
    if (c=='M' || c=='m') x0=x, y0=y;
  }
}

var paths = document.querySelectorAll('path');
[].forEach.call(paths,convertToAbsolute);
//console.log(path.getAttribute('d'));