JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

newest svg horse
<br>Legs: <b><span id='legs-score'>0</span></b> 
<br>Body: <b><span id='body-score'>0</span></b> 
<br>Head: <b><span id='head-score'>0</span></b> 
<br>Total: <b><span id='total-score'>0</span></b>
<br><span id='selected-part'></span>
<br><span id='full-string'></span><br>

<svg id="svg-horse" viewBox="0 0 1120 500"></svg>

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

/* White status of each clickable body section. */
.no-white {
    fill: #4a231c !important;
    stroke: #25110e !important;
    stroke-width: 2 !important;
}
.less-white {
    fill: #a64f3f !important;
    stroke: #4a231c !important;
    stroke-width: 2 !important;
}
.more-white {
    fill: #d59a90 !important;
    stroke: #a64f3f !important;
    stroke-width: 2 !important;
}
.full-white {
    fill: white !important;
    stroke: #d59a90 !important;
    stroke-width: 2 !important;
}

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"]},
  ...