JSFiddle - React, Tailwind, and code Playground

by hitesh24by365

HTML

<canvas id="myCanvas" width="500" height="500"></canvas>

CSS

body {
margin: 0px;
padding: 0px;
}

JavaScript

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var basex = 200;
var basey = 200;

ctx.beginPath();

ctx.moveTo(basex,basey);
ctx.bezierCurveTo(basex+20,basey,basex+20,basey+100,basex,basey+100);
ctx.stroke();

ctx.moveTo(basex, basey+100);
ctx.bezierCurveTo(basex, basey+80,basex+50, basey+80,basex+50, basey+100);
ctx.stroke();

ctx.moveTo(basex+50, basey+100);
ctx.bezierCurveTo(basex+30, basey+100,basex+30, basey,basex+50, basey);
ctx.stroke();

ctx.moveTo(basex+50, basey);
ctx.bezierCurveTo(basex+70, basey,basex+70, basey-50,basex+50, basey-50);
ctx.stroke();

ctx.moveTo(basex+50, basey-50);
ctx.bezierCurveTo(basex+50, basey-90,basex, basey-90,basex, basey-50);
ctx.stroke();

ctx.moveTo(basex, basey-50);
ctx.bezierCurveTo(basex-20, basey-50,basex-20, basey,basex, basey);
ctx.stroke();