JSFiddle - React, Tailwind, and code Playground
by soulwire
HTML
<canvas id="canvas" width="1000" height="1000"></canvas>JavaScript
var c = document.getElementById( 'canvas' ).getContext( '2d' );
c.beginPath();
c.lineTo(400.65,97.2);
c.lineTo(395,102);
c.lineTo(347,102);
c.lineTo(320.85,97.55);
c.lineTo(295.5,93.25);
c.lineTo(253.5,93.25);
c.lineTo(210.9,104.3);
c.lineTo(174,120);
c.lineTo(110,132);
c.lineTo(81.55,122.95);
c.lineTo(76.95,110.85);
c.lineTo(77,98.5);
c.lineTo(84.65,93.3);
c.lineTo(96.75,82.9);
c.lineTo(121,59);
c.lineTo(149.75,58.5);
c.lineTo(215.75,44.85);
c.lineTo(257,39.25);
c.lineTo(257,39);
c.lineTo(315,39);
c.lineTo(357.5,46.8);
c.lineTo(383.8,54.05);
c.lineTo(397.25,66.7);
c.lineTo(401,90.75);
c.lineTo(400.65,97.2);
c.strokeStyle = "#decb65";
c.stroke();
c.beginPath();
c.lineTo(401,90.75);
c.lineTo(397.25,66.7);
c.lineTo(383.8,54.05);
c.lineTo(357.5,46.8);
c.lineTo(315,39);
c.lineTo(257,39);
c.lineTo(257,39.25);
c.lineTo(215.75,44.85);
c.lineTo(149.75,58.5);
c.lineTo(121,59);
c.lineTo(96.75,82.9);
c.lineTo(84.65,93.3);
c.lineTo(77,98.5);
c.lineTo(76.95,110.85);
c.lineTo(81.55,122.95);
c.lineTo(110,132);
c.lineTo(174,120);
c.lineTo(210.9,104.3);
c.lineTo(253.5,93.25);
c.lineTo(295.5,93.25);
c.lineTo(320.85,97.55);
c.lineTo(347,102);
c.lineTo(395,102);
c.lineTo(400.65,97.2);
c.lineTo(401,90.75);
c.strokeStyle = "#dd13ca";
c.stroke();
c.beginPath();
c.lineTo(393,86.75);
c.lineTo(393,93.5);
c.lineTo(347,93.5);
c.lineTo(295,85);
c.lineTo(255,85);
c.lineTo(213,96.8);
c.lineTo(174,111.5);
c.lineTo(115.25,111.5);
c.lineTo(98.85,107.85);
c.lineTo(91,103.25);
c.lineTo(102.7,86.85);
c.lineTo(121,67);
c.lineTo(149,67);
c.lineTo(216.2,53.55);
c.lineTo(254.75,47.25);
c.lineTo(315.75,47.5);
c.lineTo(347.85,55.05);
c.lineTo(375,62);
c.lineTo(389.9,74.15);
c.lineTo(390.95,80.3);
c.lineTo(393,86.75);
c.strokeStyle =...