JSFiddle - React, Tailwind, and code Playground

by Sarphu Ronpi

HTML

<canvas id="c"  width="400" height="400"></canvas>

CSS

canvas {
			border: 1px solid black;
		}

JavaScript

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var data = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 3450 4600" enable-background="new 0 0 3450 4600" xml:space="preserve">
<g id="Layer_8">
	<path id="body" d="M2380.2,531.6c36.8,23.2,118.8,67.6,118.8,67.6s64.3,32.1,187.4,68.4c0,0,170,72.3,185.4,89.7c0,0,83.4,51.8,105.6,101.6
		c0,0,46.4,127.8,82.7,277.1c0,0,32.3,183.6,42.4,298.7c0,0,22.2,72.6,38.3,228c0,0,14.1,141.3,44.4,165.5
		c0,0,26.2,143.3,38.3,159.4c0,0-96.9,0-147.3,18.2c0,0-107,4-185.7,46.4c0,0-127.1,10.1-143.3,4c0,0-78,19.2-103.9,8.1l-16.8-27.2
		l-7.7-0.7c0,0,18.2,189.5-48.4,355.9c0,0-12.1,57.5,1.5,122.6c0,0,40.9,245.2-36.3,464.6c0,0-9.1,25.7,6.1,48.4
		c0,0,42.4,80.2,59,343.5c0,0,6.1,109,25.7,178.6c0,0,22.7,68.1-7.6,155.9c0,0-3,68.1,15.1,110.5c0,0-4.5,69.6,3,77.2
		c7.6,7.6,27.2,56,30.3,163.4c0,0,25.7,131.7-320.8,195.2c0,0-195.2,33.3-434.3,36.3c0,0-101.4,16.6-260.3,0
		c0,0-293.6-34.8-367.8-1.5c0,0-275.4-21.2-295.1-12.1c0,0-69.6-19.7-104.4-24.2c0,0-62-3-96.9-6.1c0,0-28.8-16.6-40.9-37.8
		l-6.1-101.4c0,0,1.5-16.6,12.1-39.3c0,0-9.1-84.8,24.2-149.8c0,0,1.5-133.2,19.7-193.7c0,0,2.2-91.3,10.3-124.6
		c0,0,48.4-185.7,23.2-347.1c0,0,66.6-82.7,82.7-163.5c0,0-22.4-204.8-22.4-436.3c0,0,40.9-189,62-273.1c0,0,21.2-49.3,0-158.2
		c0,0-17.8-171.2-37.7-218L834.4,2131c0,0-228,6.1-246.2,0c0,0-123.1-12.1-141.3-18.2c0,0-133.2-28.3-175.6-36.3
		c0,0-94.8-34.3-117-50.4l102.9-425.8L453,942.4c0,0,8.1-74.7,121.1-139.2l407.1-217.1c0,0,122.3-11.8,202.6-55
		C1539,712,1819.8,831.7,2284.9,512.3L2380.2,531.6z"/>
</g>
<g id="Layer_6" display="none">
	<path display="inline" fill="#444343" d="M1381.2,326.6c0,0-112,119.3,142.6,373.8c0,0,12.2,5.4,35.7,16.1l27.7,17.8
		c0,0,131.3,110.4,153.7,134.3c0,0,48,37.6,25.4,67.4c0,0,500.6-404.5,376.4-604.6c0,0-27.7-3.5-40.9-0.8c0,0-270,171-643.5,15
		C1458.4,345.6,1422.1,311.1,1381.2,326.6z"/>
</g>
<g id="Layer_5"...