JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/processing">
    void setup() { size(200,200); noLoop(); noFill(); }
    void draw() {

      float[] p = {
        0,0,
        0.2,0.552,
        0.8,0.552,
        1,0
      };

      // scale
      for(int i=0; i<8; i++) {
        p[i] *= width/2;
        if(i%2==1) {
          p[i] *= 0.3;
        }
      }

      // shear x
      float x, y, Sx = 1;
      for(int i=0; i<8; i+=2) {
        p[i] = p[i] + Sx * p[i+1];
      }
    
      // rotate by 60deg, which is pi/6
      float x, y, phi = PI/6;
      for(int i=0; i<8; i+=2) {
        x = p[i] * cos(phi) - p[i+1] * sin(phi);
        y = p[i] * sin(phi) + p[i+1] * cos(phi);
        p[i] = x;
        p[i+1] = y;
      }

      // translate by (40,40);
      for(int i=0; i<8; i++) {
        p[i] += 40;
      }
      
      bezier(p[0],p[1],p[2],p[3],p[4],p[5],p[6],p[7]);

      fill(0);
      ellipse(40,30,4,4);
      line(42,30,42,16);
      ellipse(126,80,4,4);
      line(128,80,128,66);
    }
</script><canvas></canvas>