JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="0 0 3026 4735">
   
    <path d="M 0,0 5,-5 -12.5,0 5,5 0,0 z" transform="matrix(0.8,0,0,0.8,10,0)" class=""></path>
    <path d="m 174.19252,2778.0448 c -5.34811,-37.4434 -29.28136,-41.0252 -10.02206,-123.3026 10.03291,-58.7031 38.80784,-107.1908 103.80451,-135.9356 39.34404,-5.601 75.20338,-33.6533 120.68924,0.316 13.25756,11.5873 23.13475,17.7637 31.83776,22.4972 18.08064,18.8234 53.22468,19.9358 70.45019,91.5641 -0.0153,27.2957 -6.67175,37.8615 5.78169,96.5672 3.94763,22.6219 15.43417,36.8072 2.38082,78.4548 -14.06757,19.2616 -12.79667,39.6593 -56.18325,56.7496 -11.90688,10.9977 -106.51418,21.3761 -137.12266,20.3307 -30.60848,-1.0453 -29.08532,9.4074 -75.77153,-34.6812 -18.51546,-23.3739 -35.33153,-32.8573 -55.84471,-72.5602 z"
    class="selectable"></path>
    <path d="m 391.17367,2548.4396 c -34.99181,-52.1599 -74.04552,-28.9701 -113.81302,7.4607 -22.60493,27.1505 -29.59077,55.7621 -26.94748,85.2746 0.9732,17.7247 8.68277,29.7059 25.77396,33.6883 -11.27941,6.305 -15.7872,18.0564 -15.60521,33.5799 l 15.28248,89.6955 c 14.57023,36.9611 26.14197,36.7653 38.66658,48.3772 6.68386,3.3823 13.45197,6.6808 22.39341,7.8173 12.36728,-4.1705 24.73033,-6.7262 37.17942,-42.1442 -10.52639,-3.3744 33.19385,-20.1909 1.00199,-53.4458 -10.36868,-11.34 24.68871,-48.0946 4.51571,-78.4367 -10.324,-33.3846 -20.1559,-62.2321 -28.25183,-75.0742 21.79511,-3.5449 15.28997,-23.3598 22.50625,-35.2861"
    class=""></path>
    <path d="m 325.52576,2598.2679 25.84392,6.9643" class=""></path>
    <path d="m 427.0532,2673.534 c -13.69586,6.1675 -25.54989,16.664 -45.70981,7.639" class=""></path>
    <path d="m 343.14391,2783.6595 c 16.1056,-2.4766 28.15913,-10.6577 32.83524,-29.2245" class=""></path>
    <path d="m 313.25823,2674.0981 c 21.38663,-4.1252 44.93465,-16.8008 62.08003,-4.1478" class=""></path>
    <path d="m 380.91909,2843.2414 c 13.62093,-0.4232 26.49391,0.7307 42.25252,-4.1998 22.52109,-25.1572 30.59892,-25.1915 44.92222,-36.0894 2.69461,-0.8148...

CSS

path, text {
    stroke: #000000;
    stroke-width: 1pt;
    fill: none;
	font-size: 50px;
}

path.selected {
    fill: #ccf;
}

path.selectable {
    fill: #fff;
}

.selected {
    fill: #ccf !important;
}

JavaScript

var nr = 11;
$$('.selectable').addEvent('click', function() {
    this.classList.toggle('selected');
});
var numbers = [48, 47, 46, 45, 44, 43, 42, 41, 31, 32, 33, 34, 35, 36, 37, 38,
    18, 17, 16, 15, 14, 13, 12, 11, 21, 22, 23, 24, 25, 26, 27, 28
];
$$('.selectable').each(function(el, i) {
    var text = document.createElement('text');
    text.innerHTML = numbers[i];
	var bb = el.getBBox();
	/*
	text.setAttribute('x', bb.x + (bb.width / 2));
	text.setAttribute('y', bb.x + (bb.height / 2));
	*/
	el.parentElement.appendChild(text);
});