JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<h3>SVG colouring</h3>
<p>Select a colour, then fill in shapes. Image output button is at the bottom. Takes 2 clicks, for some reason...
<br><button id='fill-btn'>Fill with colour</button></p>
<div id='palette'></div>

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Created using Krita: https://krita.org -->
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:krita="http://krita.org/namespaces/svg/krita"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    width="600pt"
    height="600pt"
    viewBox="0 0 144 144">
<defs/>
<path id="shape0" transform="translate(76.68, 118.8)" fill="#6e3de8" fill-rule="evenodd" stroke="#000000" stroke-width="0.1392" stroke-linecap="square" stroke-linejoin="bevel" d="M0 20.28L10.44 23.28L20.76 23.16L17.64 20.4L22.56 22.8L32.64 20.28L40.56 16.2L37.44 14.76L41.64 15.72L44.4 13.92L40.2 13.32L45.48 13.2L48.6 9L54.24 1.68L52.92 0L47.4 1.2L34.32 5.16L22.08 8.88L0 20.28"/><path id="shape1" transform="translate(103.8, 123.36)" fill="#d9c01b" fill-rule="evenodd" stroke="#000000" stroke-width="0.1392" stroke-linecap="square" stroke-linejoin="bevel" d="M2.52 9.6L8.52 9.84L14.16 7.56L21.36 0L15.24 0L7.32 2.16L0.84 7.08L0 10.2L2.52 9.6"/><path id="shape2" transform="translate(106.2, 126.6)" fill="#6158e8" fill-rule="evenodd" stroke="#000000" stroke-width="0.1392" stroke-linecap="square" stroke-linejoin="bevel" d="M0 5.52L5.88 5.4L9 3.36L10.44 0L5.64 0.24L1.2 3L0 5.52"/><path id="shape3" transform="translate(80.04, 88.32)" fill="#a989f8" fill-rule="evenodd" stroke="#000000" stroke-width="0.1392" stroke-linecap="square" stroke-linejoin="bevel" d="M0 24.24L8.88 21.72L15.24 17.16L18.48 12.36L19.8 8.04L19.92 11.16L20.76 6.96L22.8 4.2L26.88 0L29.52 0.24L30.24 4.44L30.24 11.76L28.32 16.8L25.2 18.24L28.32 17.88L25.92 20.4L9.36 27L0 24.24"/><path id="shape4"...

CSS

svg {
    width: 100%;
    max-width: 800px;
    height: auto;
}

#palette {
    max-width: 700px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 20px auto;
}
#palette .swatch {
    width: 6.4%;
    height: 30px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
#palette .swatch:hover {
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #000;
}
#palette .active-swatch {
    box-shadow: inset 0 0 0 2px #000;
}

JavaScript

let svg = document.querySelector("svg"),
    img = document.getElementById("output-image"),
    canvas = document.getElementById("output-canvas"),
    ctx = canvas.getContext("2d"),
    colour = "gold",
    palette = [
	    ["FFDDDD", "FCA2A2", "E54242", "AF0E0E", "680000"],
	    ["F6E2DA", "E2AE98", "C77755", "8C4526", "542713"],
	    ["FFE8CF", "FDC688", "F69209", "BE6E00", "764300"],
	    ["FDF7E0", "FEE78B", "FFCF00", "CB9900", "795B00"],
		["F9FFD8", "DFF78B", "AEDB0F", "739401", "405300"],
	    ["CDFFCE", "86EE89", "20CE24", "019906", "005002"],
	    ["DFF5EF", "ADDFD5", "4AB29C", "2A7F6F", "194B42"],
	    ["E0FCFF", "8EECF6", "0FD8EE", "009DAE", "005F6A"],
	    ["D8E4FF", "87ABFC", "2E6BF7", "0C44C5", "00206A"],
	    ["DDE2EE", "ABB8D6", "7085B5", "485B88", "232E47"],
	    ["FAF9F9", "CFCFCF", "9D9D9D", "5F5F5F", "2D2D2D"],
	    ["F0EAF5", "D2BEE3", "A78ABF", "7B569A", "412856"],
	    ["F2E1FF", "CD90FF", "AB5BEE", "811BD6", "45007E"],
	    ["FAE3FF", "EB94FD", "CB55E3", "A70AC9", "5C0171"],
	    ["FDE0ED", "F794C4", "E44B97", "BF1D6D", "80014B"],
	];

canvas.width = 800;
canvas.height = 800;

// Generate colour palette.
let html = "";
for(let shade = 0; shade < 5; shade++){
    for(let colours of palette){
        let c = colours[shade];
        html += "<div class='swatch' style='background-color:#" + c + "' data-colour='" + c + "'></div>";
    }
}
document.getElementById("palette").innerHTML = html;
//$("#palette").html(html);

/*
// Select a new colour on the palette.
$("#palette").on("click", ".swatch", function(){
    colour = $(this).data("colour");
    $("#palette .swatch").removeClass("active-swatch");
    $(this).addClass("active-swatch");
});
*/

let paths = document.querySelectorAll("path"),
    swatches = document.querySelectorAll(".swatch");

// Select and highlight a colour.
document.getElementById("palette").onclick = function(e){
    colour = e.target.getAttribute("data-colour");
    swatches.forEach(function(e){
       ...