JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

thing tool.
<br><br>
<div class='section'>
    <div class='select_holder'>    
        <div class='select_div'>
            Extension: <select id='create_e1'>
                <option value='E' selected>E</option>
                <option value='E^b'>E^b</option>
                <option value='e'>e</option>
            </select>
            <select id='create_e2'>
                <option value='E' selected>E</option>
                <option value='E^b'>E^b</option>
                <option value='e'>e</option>
            </select>
        </div>
        <div class='select_div'>
            Agouti: <select id='create_a1'>
                <option value='A' selected>A</option>
                <option value='a^t'>a^t</option>
                <option value='a'>a</option>
            </select>
            <select id='create_a2'>
                <option value='A' selected>A</option>
                <option value='a^t'>a^t</option>
                <option value='a'>a</option>
            </select> 
        </div>
        <div class='select_div'>
            Cream: <select id='create_cr1'>
                <option value='Cr'>Cr</option>
                <option value='cr' selected>cr</option>
                <option value='prl'>prl</option>
            </select>
            <select id='create_cr2'>
                <option value='Cr'>Cr</option>
                <option value='cr' selected>cr</option>
                <option value='prl'>prl</option>
            </select> 
        </div>
        <div class='select_div'>
            Mahogany: <select id='create_mh1'>
                <option value='Mh'>Mh</option>
                <option value='mh' selected>mh</option>
            </select>
            <select id='create_mh2'>
                <option value='Mh'>Mh</option>
                <option value='mh' selected>mh</option>
            </select>
        </div>
        <div class='select_div'>
            Champagneblond: <select id='create_cb1'>
                <option...

CSS

* {box-sizing: border-box;}

.beast_coat {
    position: relative;
}
.beast_coat img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.coat_adult {
    width: 250px;
    height: 250px;
}


.multiply {
  mix-blend-mode: multiply;
}
.overlay {
  mix-blend-mode: soft-light;
}

.select_holder {
    display: flex;
    flex-flow: row wrap;
}
.select_holder .select_div {
    width: 50%;
    padding: 2px;
}


/* 
    Classes for each coat colour.
    'f' means filters for black PNG images.
    'c' means background colour for divs.
    1-4 are shades: Base, Faded, Bright, Cream.
*/

/* Red, salmon, amaranth, pink */
.f_red_1 {filter: invert(13%) sepia(59%) saturate(5042%) hue-rotate(354deg) brightness(81%) contrast(90%);}
.f_red_2 {filter: invert(41%) sepia(14%) saturate(6118%) hue-rotate(337deg) brightness(92%) contrast(85%);}
.f_red_3 {filter: invert(58%) sepia(73%) saturate(483%) hue-rotate(308deg) brightness(100%) contrast(108%);}
.f_red_4 {filter: invert(86%) sepia(68%) saturate(1606%) hue-rotate(289deg) brightness(121%) contrast(102%);}

/* Orange, tan, gold, cream */
.f_orange_1 {filter: invert(38%) sepia(72%) saturate(1254%) hue-rotate(358deg) brightness(87%) contrast(98%);}
.f_orange_2 {filter: invert(60%) sepia(44%) saturate(658%) hue-rotate(340deg) brightness(90%) contrast(78%);}
.f_orange_3 {filter: invert(77%) sepia(9%) saturate(2816%) hue-rotate(340deg) brightness(97%) contrast(89%);}
.f_orange_4 {filter: invert(89%) sepia(17%) saturate(824%) hue-rotate(330deg) brightness(97%) contrast(104%);}

/* Amber, khaki, chiffon, ivory */
.f_amber_1 {filter: invert(70%) sepia(95%) saturate(586%) hue-rotate(335deg) brightness(100%) contrast(94%);}
.f_amber_2 {filter: invert(85%) sepia(34%) saturate(494%) hue-rotate(323deg) brightness(93%) contrast(88%);}
.f_amber_3 {filter: invert(99%) sepia(97%) saturate(1026%) hue-rotate(314deg) brightness(102%) contrast(98%);}
.f_amber_4 {filter: invert(88%) sepia(90%) saturate(286%)...

JavaScript

const path = "http://mythstable.epizy.com/thing/images/";

// Alleles in every locus, in order of dominance.
// Used when making random griffins, and ordering genotype.
const genome = {
    // Extension
    e: ["E", "E^b", "e"],
    // Agouti
    a: ["A", "a^t", "a"],
    // Cream
    cr: ["Cr", "cr", "prl"],
    // Mahogany
    mh: ["Mh", "mh"],
    // Champagneblond
    cb: ["Cb", "cb"],
    // Red
    r: ["R", "r"],
    // Blue
    b: ["B", "B^w", "b"],
    // Rainbow
    rbw: ["Rbw", "Rbw^m", "rbw"],
    // Tortoiseshell
    ts: ["Ts", "ts"],
    // Tabby
    tab: ["Tab^a", "Tab^m", "tab^b", "tab"],
    // Spot
    spt: ["Spt", "spt"],
    // Fade
    f: ["F", "f"],
    // Intensity / Inhibition
    i: ["I", "I^s", "I^c", "I^d", "i"],
    // Silver
    sil: ["Sil", "sil"],
    // Pangare
    pan: ["Pan", "pan"],
    // FeatherPattern
    fp: ["Fp^b", "Fp^m", "Fp^s", "Fp^l", "fp"],
    // KIT
    kit: ["Kit^rn", "Kit^tb", "Kit^sb", "Kit^gl", "kit"],
    // Frame Overo
    o: ["O", "o"],
    // LP
    lp: ["Lp", "lp"],
    // PATN
    patn: ["Patn^a", "Patn^b", "patn"],
    // Reverse
    rv: ["Rv", "rv"],
    // Colour
    c: ["C", "c^b", "c^s", "c"],
    // Splash
    spl: ["Spl", "spl"],
    // Merle
    mrl: ["Mrl", "mrl"]
};

// Names, useful for looping through genos.
const loci = ["e", "a", "cr", "mh", "cb", "r", "b", "rbw", "ts", "tab", "spt", "f", "i", "sil", "pan", "fp", "kit", "o", "lp", "patn", "rv", "c", "spl", "mrl"]

// For counting mutations, generating natural beasts.
const wildtypes = ["E", "A", "cr", "mh", "Cb", "r", "b", "rbw", "ts", "tab", "spt", "f", "i", "Sil", "pan", "fp", "kit", "o", "lp", "patn", "Rv", "C", "spl", "mrl"];


function randomNumber(n1, n2){
	if(n1 == n2){ return n1; }
    var min = n1; var max = n2;
    if(n1 > n2){ min = n2; max = n1; }
    return Math.floor(Math.random()*(max-min+1)+min);
}

function randomArray(array){
	return array[Math.floor(Math.random()*array.length)];
}


// For assembling image HTML.
class Coat...