JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Mapping white markings on horses. Click once for 'less than 50%' white, again for 'over 50%', again for 'full' white, again for 'no' white. The 70 parts are combined into string below.
<br>Legs: <b><span class='legs_score'>0</span></b> Body: <b><span class='body_score'>0</span></b> Head: <b><span class='head_score'>0</span></b> Total: <b><span class='total_score'>0</span></b>
<br><span class='selected_part'></span>
<br><span class='full_string'></span><br>

<svg class="svg_horse" viewBox="0 0 1000 2000"></svg>

<p>.</p>.<p>.</p>.<p>.</p>.<p>.</p>

CSS

body {
    background-color: grey;
}



/* Fill whole horse with 'no white' brown. */
.svg_horse > * {
    fill: #4a231c;
    stroke: #25110e;
    stroke-width: 2;
}

/* Then certain parts with solid dark brown. */
.unclickable {
    fill: #25110e;
}

.clickable {
    stroke: #ffcc33;
}

.outline {
    fill: rgba(255, 255, 255, 0);
    stroke: #25110e;
    stroke-width: 2;
}

/* Highlight the selected body part before clicking. */
.svg_horse > .clickable:hover {
    cursor: pointer;
    stroke: white;
    stroke-width: 3;
    
    fill: rgba(255, 255, 255, 0.5);
    transition: 0.3s;
}

.selected_part {
  fill: pink;
  stroke: blue;
  stroke-width: 2;
}

.no_white {
    fill: #4a231c;
    stroke: #25110e;
    stroke-width: 2;
}
.less_white {
    fill: #a64f3f;
    stroke: #4a231c;
    stroke-width: 2;
}
.more_white {
    fill: #d59a90;
    stroke: #a64f3f;
    stroke-width: 2;
}
.full_white {
    fill: white;
    stroke: #d59a90;
    stroke-width: 2;
}

JavaScript

let outline = "784,248.2 766.7,269.1 749.4,304.9 727.2,360.5 708.6,421 709.9,456.8 703.7,487.7 677.8,521 658,542 640.7,608.6 633.3,671.6 628.4,713.6 622.2,722.2 624.7,806.2 638.3,829.6 650.6,844.4 674.1,875.3 650.6,877.8 616.1,875.3 604.9,851.9 613.6,842 607.4,827.2 596.3,825.9 591.4,816.1 592.6,713.6 587.7,698.8 593.8,582.7 590.1,551.9 577.8,546.9 511.1,553.1 458,549.4 414.8,542 355.6,519.8 318.5,504.9 279,500 234.6,513.6 217.3,527.2 198.8,551.9 180.3,591.4 160.5,635.8 150.6,666.7 138.3,686.4 124.7,763 125.9,790.1 123.5,809.9 124.7,838.3 144.4,870.4 139.5,875.3 108.6,877.8 93.8,872.8 88.9,854.3 103.7,835.8 100,821 88.9,806.2 101.2,690.1 102.5,655.6 101.2,632.1 118.5,607.4 134.6,561.7 135.8,524.7 128.4,497.5 113.6,439.5 106.2,392.6 109.9,349.4 129.6,329.6 167.9,306.2 206.2,291.4 251.9,288.9 316.1,298.8 376.5,313.6 439.5,319.8 482.7,313.6 525.9,292.6 554.3,280.3 581.5,259.3 617.3,219.8 651.9,184 687.7,154.3 735.8,125.9 785.2,102.5 791.4,93.8 791.4,77.8 809.9,58 809.9,79 814.8,95.1 825.9,95.1 842,77.8 850.6,60.5 855.6,81.5 851.9,103.7 853.1,121 865.4,140.7 875.3,154.3 880.3,176.5 901.2,201.2 923.5,230.9 935.8,249.4 933.3,260.5 929.6,277.8 921,288.9 912.4,288.9 903.7,295.1 888.9,291.4 881.5,279 849.4,255.6 819.8,253.1";

let unclickable = [
    "254.7,512 230.7,545.3 202.7,606.7 182.7,646.7 176,669.3 169.3,688 164,785.3 164,800 176,820 197.3,846.7 192,854.7 154.7,854.7 140,837.3 148,825.3 141.3,809.3 132,804 132,764 134.7,709.3 138.7,686.7 150.7,665.3 173.3,606.7 198.7,552 198.7,553.3 217.3,528 236,516 261.3,506.7",
    "584,549.3 584,608 577.3,685.3 580,704 565.3,796 573.3,808 580,808 586.7,821.3 580,836 589.3,853.3 605.3,854.7 605.3,848 613.3,840 606.7,828 596,825.3 592,816 592,712 594.7,713.3 588,698.7 593.3,581.3 589.3,550.7",
    "814.7,94.7 838.7,152 850.7,176 910.7,246.7 904,250.7 906.7,258.7 916,266.7 913.3,288 920,288 929.3,277.3 936,249.3 906.7,210.7 881.3,177.3 874.7,153.3 854.7,121.3 850.7,102.7 854.7,82.7 852,60 841.3,76 826.7,93.3"
];

let polygons =...