JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

The colours and patterns on a Mythic's coat are controlled by genes. Although we have magic here, and some fantastic gene effects not found on Earth, the mechanics of inheritance and expression remain realistic.<br>There are 10 loci, each containing two alleles. At conception, the father randomly passes down one of his alleles, and the mother passes down one of hers. One allele might be dominant over the other, or recessive so its effect isn't seen. Both alleles may be co-dominant, expressing their effects at the same time.<br>Alleles from multiple loci can influence the same traits; certain marking shapes can be created with very specific alleles across 4 loci. Many mutations are affected by hidden modifiers, too, so two Mythics with the exact same genes can look very different.

<div id='info'></div>

JavaScript

const genome = {
    a: {
        name: "Agouti",
        desc: "If E locus allows eumelanin to be produced, this locus controls which parts of the body produce it, and which will switch to phaeomelanin instead. If E locus doesn't allow eumelanin, this locus has no effect.",
        alleles: [
            {
                letter: "A^y",
                name: "Yellow",
                type: 1,
                desc: "This mutation switches off nearly all eumelanin production; there may be a few tiny remnants left, but otherwise the Mythic's whole body is red-based."
            },{
                letter: "A^pb",
                name: "Rosette",
                type: 1,
                desc: "This pattern creates large blotchy spots with solid outlines and faded centres, similar to those of an ocelot or clouded leopard."
            },{
                letter: "A^p",
                name: "Point",
                type: 1,
                desc: "This pattern limits eumelanin to the points, similar to bay in equines. Depending on the breed of Mythic, more areas may have it, such as mane, tail, wings or fins."
            },{
                letter: "A^m",
                name: "Mackerel",
                type: 1,
                desc: "This pattern creates solid striping and swirling down the sides, like a tabby cat."
            },{
                letter: "A^ti",
                name: "Tiger",
                type: 3,
                desc: "One copy of this allele creates solid, narrow stripes. Two copies will cause very thick, bold stripes."
            },{
                letter: "A^s",
                name: "Spotting",
                type: 1,
                desc: "This pattern creates hundreds of small spots, evenly dotted around the body, similar to those of a cheetah."
            },{
                letter: "A+",
                name: "Agouti",
                desc: "In this pattern the hairs, scales, feathers or other structures on the back are banded...