JSFiddle - React, Tailwind, and code Playground

by shrpne

HTML

<div>
    <canvas id="canvas"></canvas>
</div>
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 151 175.4">
<polygon fill="none" stroke="#C1C3C5" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="22.9256" data-svg-outline points="
	124.7,175.1 143.7,175.1 150.7,167.4 120.4,79.8 96.1,9.1 87.4,0.4 66.6,0.4 54.7,9.4 28.2,85.6 0.3,165.9 7.4,175.1 27.5,175.1 
	36.1,167.5 53.9,110.7 75.2,40.9 96.1,109.9 62.9,109.9 73.1,139.1 105.3,139.1 113.1,165.4 "/>
<g fill="none" stroke="#C1C3C5" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="22.9256" data-svg-inner="">
<polyline points="
	124.7,175.1 139.1,158.9 143.7,175.1 150.7,167.4 139.1,158.9 142,142.4 118.1,137.6 139.1,158.9 113.1,165.4 124.3,154.2
	139.1,158.9 118.1,137.6 124.3,154.2 105.3,139.1 118.1,137.6 135.5,123.6 142,142.4 "></polyline>
<polygon points="
	113.7,123.6 105.3,139.1 113.7,123.6 118.1,137.6 125,115 135.5,123.6 129.9,107.3 125,115 113.7,123.6 100.8,119.3 90.1,139 "></polygon>
<polyline points="
	105.3,139.1 90.1,139.1 90.7,124.5 87.7,117 96.1,109.9 100.8,119.3 87.7,117 79.5,109.9 74.1,117.9 87.7,117 74.1,117.9
	62.9,109.9 69.5,128.6 74.1,117.9 78.7,131.4 73.1,139.1 83.6,139.1 90.7,124.5 84.8,127.8 78.6,131.2 69.5,128.6 "></polyline>
<polyline points="
	96.1,109.9 105.3,102.1 100.8,119.3 115.5,111.3 113.7,123.6 125,115 115.5,111.3 129.9,107.3 125.7,95.1 115.5,111.3 105.3,102.1
	125.7,95.1 120.8,80.9 105.3,102.1 90.7,92.3 102.3,81.5 105.3,102.1 "></polyline>
<polyline points="
	120.8,80.9 102.3,81.5 115.3,65 99.3,66.8 102.3,81.5 90.7,92.3 83.9,69.8 99.3,66.8 90.7,61.6 "></polyline>
<line x1="83.6" y1="139.1" x2="78.6" y2="131.2"></line>
<polygon points="
	100.1,54.2 90.7,61.6 100.1,54.2 99.3,66.8 115.3,65 109.9,49.4 115.3,65 100.1,54.2 109.9,49.4 105.6,36.7 100.1,54.2 97,38.8
	85.2,48.2 "></polygon>
<polygon points="
	79.6,55.5 90.7,61.6...

CSS

canvas {display: block;}
svg {height: 260px;}

JavaScript

var apicaLetters = [{
    canvasId: 'canvas',
    viewBox: {x: 151, y: 175.4},
    outlineStrokeWidth: 0.7087,
    innerStrokeWidth: 0.4
}/*,{},{},{},{}*/];

apicaLetters[0].outline = JSON.parse('{"124.7,175.1":{"x":124.7,"y":175.1,"linkPoints":["143.7,175.1"]},"143.7,175.1":{"x":143.7,"y":175.1,"linkPoints":["150.7,167.4"]},"150.7,167.4":{"x":150.7,"y":167.4,"linkPoints":["120.4,79.8"]},"120.4,79.8":{"x":120.4,"y":79.8,"linkPoints":["96.1,9.1"]},"96.1,9.1":{"x":96.1,"y":9.1,"linkPoints":["87.4,0.4"]},"87.4,0.4":{"x":87.4,"y":0.4,"linkPoints":["66.6,0.4"]},"66.6,0.4":{"x":66.6,"y":0.4,"linkPoints":["54.7,9.4"]},"54.7,9.4":{"x":54.7,"y":9.4,"linkPoints":["28.2,85.6"]},"28.2,85.6":{"x":28.2,"y":85.6,"linkPoints":["0.3,165.9"]},"0.3,165.9":{"x":0.3,"y":165.9,"linkPoints":["7.4,175.1"]},"7.4,175.1":{"x":7.4,"y":175.1,"linkPoints":["27.5,175.1"]},"27.5,175.1":{"x":27.5,"y":175.1,"linkPoints":["36.1,167.5"]},"36.1,167.5":{"x":36.1,"y":167.5,"linkPoints":["53.9,110.7"]},"53.9,110.7":{"x":53.9,"y":110.7,"linkPoints":["75.2,40.9"]},"75.2,40.9":{"x":75.2,"y":40.9,"linkPoints":["96.1,109.9"]},"96.1,109.9":{"x":96.1,"y":109.9,"linkPoints":["62.9,109.9"]},"62.9,109.9":{"x":62.9,"y":109.9,"linkPoints":["73.1,139.1"]},"73.1,139.1":{"x":73.1,"y":139.1,"linkPoints":["105.3,139.1"]},"105.3,139.1":{"x":105.3,"y":139.1,"linkPoints":["113.1,165.4"]},"113.1,165.4":{"x":113.1,"y":165.4,"linkPoints":["124.7,175.1"]}}');
apicaLetters[0].inner =...