0

I have a little program that outputs abstract SVG shapes (using SVG.js).

Here's an example of an SVG output:

<svg width="200" height="200" viewBox="0 0 undefined undefined" xmlns="http://www.w3.org/2000/svg"><path d="M100,0H150V50H100zM150,0H200V50H150zM150,50H200V100H150zM150,100H200V150H150zM150,150H200V200H150zM100,150H150V200H100zM50,150H100V200H50zM0,150H50V200H0zM0,100H50V150H0zM0,50H50V100H0z"/></svg>

When I try to apply rounded edges programmatically, they get applied to the entire container, and not the shape itself. So not the points of the shape.

I did it manually inside Figma to show what I'm aiming for to have as a result.

Any thoughts on how to achieve this with JS?

output to desired state

jiblylabs
  • 121
  • 8
  • the shape you have is made of small squares. Is this your intention? A easier way to do it would be a thick stroke with stroke-linecap= "round" Yet another way would be using a filled poligon where you are calculating the rounded corners as beziers. None of this methods would apply to the shape you have – enxaneta Jul 27 '22 at 06:28
  • yes the output is a random shape every time you refresh, so I'm looking for a scalable solution that would work not just for this shape, but also weirder ones that don't look like a single line – jiblylabs Jul 27 '22 at 06:29

0 Answers0