JSFiddle - React, Tailwind, and code Playground

by opherv

HTML

<svg height="600" width="1000">
  <path id="originalPath" class="test" d="m 480,200 c 100,0 0,250 100,200 100,-50 0,-250 100,-300 100,-50 350,100 100,200 -250,100 -350,100 -600,0 -250,-100 0,-250 100,-200 100,50 0,250 100,300 100,50 0,-200 100,-200" stroke="blue"
  stroke-width="5" fill="none"/>         
    
</svg>

JavaScript

var svg=document.querySelector("svg");


var resolution=200; // this sets how many points are calculated per path
var tangentResolution=0.01;

var p0,p,angle,pathPercentage,newPoint1,newPoint2;
var pathLength = originalPath.getTotalLength();
var newPath1String="";
var newPath2String="";

//offset left
//0.01 to get the tangent later on
for (var t=0;t<=resolution;t++){
    pathPercentage=t*pathLength/resolution; // percetange of distance on the path
    
    if (t==0){
        p0 = originalPath.getPointAtLength(0);//"previous point"
        p = originalPath.getPointAtLength(tangentResolution);////current point
    }
    else{
        p0 = originalPath.getPointAtLength(pathPercentage-tangentResolution);//previous point
        p = originalPath.getPointAtLength(pathPercentage);////current point
    }
    
    angle = Math.atan2(p.y - p0.y, p.x - p0.x); //angle in radians                       
    
    //calculate tangent lines
    newPoint1={x: p.x + Math.cos(angle+Math.PI/2)*10, //8 is the inner offset 
                  y: p.y + Math.sin(angle+Math.PI/2)*10 
              }           
    //calculate tangent line
    newPoint2={x: p.x + Math.cos(angle-Math.PI/2)*20, //outer offset
                  y: p.y + Math.sin(angle-Math.PI/2)*20 
             }
    
    newPath1String+=(t==0?"M":"L"); //start the path, or continue
    newPath1String+=newPoint1.x+" "+newPoint1.y+" ";
    
    newPath2String+=(t==0?"M":"L"); //start the path, or continue
    newPath2String+=newPoint2.x+" "+newPoint2.y+" ";
}



var path1 = document.createElementNS("http://www.w3.org/2000/svg", 'path'); 
path1.setAttribute("d", newPath1String);
path1.setAttribute("stroke", "red");  
path1.setAttribute("stroke-width", 5);  
path1.setAttribute("fill", "none");  
svg.appendChild(path1);

var path2 = document.createElementNS("http://www.w3.org/2000/svg", 'path'); 
path2.setAttribute("d", newPath2String);
path2.setAttribute("stroke", "green");  
path2.setAttribute("stroke-width", 5); ...