JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Pansy collection + notes

<div id='pansy-container'>[generate]</div>

https://www.sciencedirect.com/science/article/abs/pii/S0981942814002976
big study...

Anthocyanins are a class of flavonoid compounds responsible for pink, orange, red, scarlet, purple, blue and cyanic flower coloration in many plant species. The anthocyanin pathway, which is a branch of the flavonoid pathway, has been elucidated in lots of other plants as well.
..
Malonyl-CoA and 4-coumaroyl-CoA are the precursors for the formation of flavonoids. Dihydroflavonols are formed by the consecutive action of CHS, CHI and F3H and can be further converted to leucoanthocyanidins by DFR. 
Additional hydroxyl groups in the B-ring of the intermediates may be introduced by F3′5′H and F3′H. Leucoanthocyanidins carrying one, two or three hydroxyl groups in the B-ring are converted to pelargonidin, cyanidin and delphinidin respectively. 
Almost all anthocyanidins undergo several modifications, including glycosylation, acylation, and methylation, catalyzed by glycosyltransferase (GT), acyltransferase (AT) and methyltransferase (MT), respectively 
...
Some cultivars of pansy produce flowers with large cyanic blotches on the petals. The anthocyanin content of the cyanic blotched areas of pansy petals has been analyzed in previous studies. For example, purple blotches on the white flowers of the cultivar ‘Mont Blanc’ contain cyanidin-p-coumarylglycoside, while the purple blotches on the yellow flower of ‘Rhinegold’ contains delphinidin-3:5-p-coumaryl glucorhamnoside (Endo, 1959).


https://www.researchgate.net/publication/359928413_Comparative_Transcriptome_Analysis_of_Anthocyanin_Biosynthesis_in_Pansy_Viola_wittrockiana_Gams
follows that study above?
...
obvious differences were detected in the anthocyanin
content between BF (2.099 ± 0.301 mg/g) and NBF. Interestingly, no anthocyanin was found in the non-blotched petals (0).
...
dark blotches contained 10x stronger UFGT expression than non-blotched areas.
also...

CSS

div, img {
    box-sizing: border-box;
}
#pansy-container {
    display: flex;
    flex-flow: row wrap;
}
#pansy-container .pansy {
    width: 160px;
    background-color: silver;
    padding: 5px;
    margin: 10px;
    text-align: center;
    font-size: 10px;
}
.pansy img {
    width: 150px;
    height: 150px;
}

JavaScript

const notes = [
    "yellow inner dot always present. on lower petal only, not sides or back.",
    "additional yellow 'bib' on lower/side petals is separate to yellow elsewhere. can see pale yellow flowers with deeper golden bib. the bib may be an extension of the dot.",
    "dark mask can be turned off. if solid sort of mask, it's never siluted.",
    "dark mask can be veiny instead of solid. minimal or fully covering. veiny form can be dark or diluted.",
    "mask's veins and solid areas are kinda separate. if solid area is dark, veins are often hidden, unless they extend outwards beyond it. solid area can be diluted, veins not as-dark but still clearly visible among it. a flower can have veins all over but no solid area.",
    "dark mask is separate to general purple/blue colour elsewhere. can see blue/lilac/deep purple flowers with still-darker mask.",
    "can have 'light rim' which lacks purple/red and has white or yellow background.",
    "can have solid/streaky white outer-mask surrounding dark mask. it ranges from thin to thick, pushing purple pigment outwards. the dark bottom-lip and back petals gradually disappear.",
    "can have soft gradients of purple pigment, seeping in from edges (or being pushed/faded out). like a softer kind of white outer-mask.",
    "flower can be solid white, or white with mask. solid yellow, solid yellow with mask.",
    "mask can appear maroon if yellow behind it",
    "back petals can be solid purple, or same as the sides, or in between; lightness/yellow seeps upwards. if back petals are fully dark, there's often (?) dark chin beneath mask",
    "... but dark chin is not present if flower lacks solid mask. see the ukraine-flag-like (Ultima Morpho) flowers; back petals deep blue, rest yellow, no dark lip, only a few dark veins. so dark lip may require solid mask",
    "Ultima Morpho interesting. has yellow on side and even on back petals if very extensive. yellow seems to push purple away; no overlap. sometimes white...