JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<button id='generate-btn'>Generate</button>

<div id='griffin-canvas'></div>

<svg id="10015.io" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
	<path fill="#474bff" d="M 392,270  Q 424,300,  360,290  Q297,281,  335,352  Q 374,424,  323,382  Q 272,340,  256,351  Q 240,363, 216,374  Q 193,385,  180,362  Q 168,339,  108,359
    Q 48,380, 78,331  Q 108,283  127,261  Q 146,240, 151,226
     Q 156,213,  131,177  Q 106,142,  157,169  Q 209,197,  209,171  Q 209,145  224,136  Q 240,127  267,101  Q 294,75  286,130  Q 279,186  345,150  Q 412,115  417,148  Q 423,181  391,210  Q 360,240  392,270 Z" />
</svg>

JavaScript

const db = {

    paths: {
    
        // Large roundish blobs.
        tobiano: [
            "M273,328Q138,416,148,258Q159,100,284,170Q409,240,273,328Z",
            "M294,335Q130,431,136,251Q143,72,300,156Q458,240,294,335Z",
            "M310,264Q212,288,166,160Q120,33,264,136Q409,240,310,264Z",
            "M307,283Q268,326,212,313Q156,301,124,216.5Q92,132,181,138Q271,144,308,192Q346,240,307,283Z",
            "M367,296Q276,352,182,351Q89,350,124,266Q160,182,213,170Q266,159,362,199Q459,240,367,296Z",
            "M353,329Q298,418,243,347.5Q189,277,179,233Q170,189,238,113Q306,37,357,138Q409,240,353,329Z",
            "M281,281Q267,322,161,348Q55,374,59,243Q64,112,162,144Q261,177,278,208Q296,240,281,281Z",
            "M351,322Q294,405,193,376Q93,347,86,235Q79,123,188,92Q298,61,353,150Q409,240,351,322.5Z",
            "M314,269Q259,298,183,317Q108,336,129,255Q150,175,214,147Q279,120,324,180Q370,240,314,269Z",
            "M284,291Q273,342,192,338Q111,334,92,226Q73,119,179,110Q285,101,290,170.5Q296,240,284,291Z",
            "M350,348Q310,456,204,399Q99,343,144,273Q190,203,230,174Q271,145,330,192Q390,240,350,348Z",
            
            "M385,289Q357,338,312,365Q267,393,226,364Q185,335,134,316Q84,297,57,230.5Q31,164,99,139Q168,115,210,140Q253,166,289,167Q326,168,370,204Q414,240,385,289Z",
            "M353,276Q327,313,294,337Q261,361,202,383Q144,406,100,356Q57,307,103,257Q150,207,149,144Q148,81,206,94Q264,107,306,128Q349,149,364,194.5Q379,240,353,276.5Z",
            "M383,295Q373,351,326,407.5Q280,464,240,386Q200,309,134,306Q68,303,46,232Q24,161,92,131.5Q161,102,215,88Q269,75,284,132.5Q300,190,347,215Q394,240,383,295Z",
            "M327,262.5Q294,285,276,313Q258,341,201,374Q144,407,129,346Q114,286,87,230Q60,175,102,124Q144,74,200,112Q256,151,284,165Q312,180,336,210Q360,240,327,262Z",
            "M381,266Q303,293,292,383Q281,473,210,443Q140,413,105,357Q71,302,71,240Q71,179,116,141Q161,103,214,95Q267,88,330,99Q394,111,426,175Q459,240,381,266Z",
           ...