An error occurred when the script translating coordinates.

[enxore]

Actually Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape(). (See reference)

For example, the script dosen't work well with the svg markup below:

<svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 ,0,0,4.5 4.5H18a3.75 3.75 0 0,0,1.332-7.257 3 3 0 ,0,0,-3.758-3.848 5.25 5.25 0 0,0,-10.233 2.33A4.502 4.502 0 0,0,2.25 15z"></path>
</svg>

...as it outputs the following p5.js code using translate() within beginShape():

strokeCap(ROUND);
strokeJoin(ROUND);
beginShape();
vertex(2.25,15);
translate(6.75,15);
rotate(0);
arc(0,0,4.5,3.141592653589793,1.5707963267948966,1);
rotate(0);
translate(-6.75,-15);
vertex(18,19.5);
translate(18.004055868688575,15.750002193343418);
rotate(0);
arc(0,0,3.75,1.5718778919893823,-1.2088250759817043,1);
rotate(0);
translate(-18.004055868688575,-15.750002193343418);
translate(16.501840726401678,11.2479128248915);
rotate(0);
arc(0,0,3,0.3381004956888263,-1.8852323996796212,1);
rotate(0);
translate(-16.501840726401678,-11.2479128248915);
translate(10.49377898204332,9.719331683797977);
rotate(0);
arc(0,0,5.25,-0.25500852097167903,-3.3343397810501907,1);
rotate(0);
translate(-10.49377898204332,-9.719331683797977);
translate(6.751999996770499,15.000170523980728);
rotate(0);
arc(0,0,4.502,-1.889584750326278,-3.1415547762062372,1);
rotate(0);
translate(-6.751999996770499,-15.000170523980728);
endShape();