How To Draw Polyline Object Shaped Exactly Same With The Given Image Data On Svg

Doughnut picture For example, given image like above, what I want to do is draw the exact same shaped polyline object on SVG(Im creating a 'drawing' or should I say 'brush' tool ba

Solution 1:

This shape can be drawn with circles. Cutouts made using a mask composed of circles

<svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="405"height="401"viewBox="0 0 405 401" ><defs><maskid="msk1" ><rectwidth="100%"height="100%"fill="white" /><gfill="black"><circlecx="202"cy="200"r="40"   /><circlecx="260"cy="298"r="40"   /><circlecx="215"cy="303"r="20"   /></g></mask></defs><circlecx="202"cy="200"r="98"fill="black"mask="url(#msk1)" />

Solution 2:

This is supposing that you already have an SVG path.

In order to draw a polygon you will need to split your path by the M commands. In the next example I did it manually but you can do it dynamically. This is important because otherwise you'll get a split in the polygon.

You will also need to set a precision, meaning the distance between the points of the polygon.

Please read the comments in my code.

let paths = document.querySelectorAll("#theGroup path");
let precision = 5;//how far one of other the points of the polygon arelet points = [];// the array of points// for each path in the array of paths 
paths.forEach(p=>{
  // get the total lengthlet totalLength = p.getTotalLength();
  // get the number of points for the polygon in base of the precisionlet numPoints = ~~(totalLength / precision);
  // calculate the segment lengthlet segmentLength = totalLength / numPoints;
 
  for(let i = 0; i <= numPoints; i++ ){
  let point = p.getPointAtLength(i*segmentLength);
  // get the coordinates of this point and push it
  points.push(point.x);
  points.push(point.y);
}
})

//set the value for the points attribute of the polygon
poly.setAttributeNS(null,"points", points.join())

svg{border:1px solid; width:90vh;}
path{fill:none}

<svgviewBox="0 0 531 531"><gid="theGroup"><pathid="donut"d="M268.64,76.066c70.065,2.632,125.154,32.347,163.73,91.372
		c14.944,22.864,23.47,48.161,27.698,75.22c3.987,25.512,2.188,50.551-3.64,75.354c-4.821,20.522-13.383,39.648-24.866,57.406
		c-2.003,3.099-3.899,3.396-7.365,1.548c-30.011-16.005-64.509-10.767-87.731,14.13c-6.295,6.748-9.985,15.893-15.108,23.783
		c-1.548,2.384-3.508,5.256-5.938,6.189c-19.202,7.375-32.874,20.547-41.279,39.064c-1.911,4.211-4.254,5.562-8.308,5.085
		c-13.198-1.554-26.507-2.515-39.562-4.873c-30.46-5.502-57.275-19.262-81.055-38.724c-28.703-23.491-49.496-52.646-61.424-88.046
		c-7.479-22.198-11.34-44.892-10.42-68.225c2.042-51.761,20.944-96.305,57.854-133.023c22.272-22.156,48.427-37.859,78.3-47.183
		C228.671,79.17,248.365,75.884,268.64,76.066z"/><pathid="hole"d="M340.466,271.259c0.179-40.212-32.175-73.14-72.067-73.348
		c-40.072-0.208-73.264,32.326-73.485,72.032c-0.226,40.441,32.218,73.372,72.436,73.522
		C307.646,343.616,340.286,311.382,340.466,271.259z"/></g><polygonid="poly"fill="gold"points = "" /></svg>