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 1120 500">
<!--
  <polygon class="clickable" data-part_number="1" data-part_name="Right rump" points="
125,132 113,189 46,189 54,167 72,152 92,139" />
  <polygon class="clickable" data-part_number="37" data-part_name="Left rump" points="
995,132 1007,189 1074,189 1066,167 1048,152 1028,139" />

  <polygon class="clickable" data-part_number="2" data-part_name="Right lower back" points="
186,141 177,196 120,190 133,133" />
  <polygon class="clickable" data-part_number="38" data-part_name="Left lower back" points="
934,141 945,196 1000,190 987,133" />

  <polygon class="clickable" data-part_number="3" data-part_name="Right middle back" points="
239,143 233,200 183,196 191,143" />
  <polygon class="clickable" data-part_number="39" data-part_name="Left middle back" points="
881,143 887,200 937,196 929,143" />

  <polygon class="clickable" data-part_number="4" data-part_name="Right upper back" points="
281,130 304,196 240,202 243,143 265,138" />
  <polygon class="clickable" data-part_number="40" data-part_name="Left upper back" points="
839,130 816,196 880,202 877,143 855,138" />

  <polygon class="clickable" data-part_number="5" data-part_name="Right withers" points="
286,131 308,191 348,183 362,148 328,103 311,116" />
  <polygon class="clickable" data-part_number="41" data-part_name="Left withers" points="
834,131 812,191 772,183 758,148 792,103 809,116" />

<polygon class="clickable" data-part_number="6" data-part_name="Right lower crest" points="
330,97 364,143 389,101 373,61...

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;
}

/* 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 polygons = [
    {name: "Rump", points: ["125,132","113,189","46,189","54,167","72,152","92,139"]},
    {name: "Lower Back", points: ["186,141","177,196","120,190","133,133"]},
    {name: "Middle Back", points: ["239,143","233,200","183,196","191,143"]},
    {name: "Upper Back", points: ["281,130","304,196","240,202","243,143","265,138"]},
    {name: "Withers", points: ["286,131","308,191","348,183","362,148","328,103","311,116"]},
    {name: "Lower Crest", points: ["330,97","364,143","389,101","373,61","348,75"]},
    {name: "Upper Crest", points: ["377,57","393,95","431,73","435,38","405,43"]},
    {name: "Buttock", points: ["44,193","115,195","97,246","46,245" ,"43,216"]},
    {name: "Flank", points: ["120,196","176,202","167,249","130,250","118,263","100,251"]},
    {name: "Back Ribs", points: ["181,203","173,250","234,259","235,207"]},
    {name: "Ribs", points: ["241,206","299,204","297,258","238,259"]},
    {name: "Shoulder", points: ["304,202","346,188","361,225","348,264","303,266"]},
    {name: "Upper Chest", points: ["350,186","368,149","399,176","389,211","364,222"]},
    {name: "Lower Chest", points: ["368,143","392,104","414,135","400,172"]},
    {name: "Upper Throat", points: ["396,99","429,78","433,113","415,130"]},
    {name: "Hind Knee", points: ["47,251","93,252","116,268","111,285","85,314","47,296","49,273"]},
    {name: "Gaskin", points: ["43,300","82,318","48,358","15,348" ,"26,331"]},
    {name: "Hind Cannon", points: ["14,354","45,363","33,413","11,413"]},
    {name: "Fetlock-Hoof", points: ["10,417","32,418","33,443", "58,483","22,482","18,469","18,455","11,446"]},
    {name: "Stifle", points: ["115,282","126,257","169,254","168,273","132,273"]},
    {name: "Belly", points: ["174,255","234,264","233,288","173,274"]},
    {name: "Girth", points: ["239,264","297,264","300,289","238,288"]},
    {name: "Elbow", points: ["304,271","350,268","347,315","309,316"]},
    {name: "Forearm", points: ["309,320","346,321","340,364","308,363"]},
  ...