JSFiddle - React, Tailwind, and code Playground
by franklinjavier
HTML
<div id="diagrams"><span id="windrose" style="width: 400px; height: 420px;"><svg width="400px" height="430px"><g class="axes"><circle cx="200" cy="200" r="58.333333333333336"></circle><circle cx="200" cy="200" r="82.66666666666667"></circle><circle cx="200" cy="200" r="107.00000000000001"></circle><circle cx="200" cy="200" r="131.33333333333334"></circle><circle cx="200" cy="200" r="155.66666666666669"></circle><circle cx="200" cy="200" r="180"></circle></g><g class="tickmarks"><text dy="-2px" transform="translate(200,117.33333333333333) ">5%</text><text dy="-2px" transform="translate(200,68.66666666666666) ">10%</text></g><g class="labels"><text dy="-4px" transform="translate(200,20) rotate(30,0,180)">30</text><text dy="-4px" transform="translate(200,20) rotate(60,0,180)">60</text><text dy="-4px" transform="translate(200,20) rotate(90,0,180)">90</text><text dy="-4px" transform="translate(200,20) rotate(120,0,180)">120</text><text dy="-4px" transform="translate(200,20) rotate(150,0,180)">150</text><text dy="-4px" transform="translate(200,20) rotate(180,0,180)">180</text><text dy="-4px" transform="translate(200,20) rotate(210,0,180)">210</text><text dy="-4px" transform="translate(200,20) rotate(240,0,180)">240</text><text dy="-4px" transform="translate(200,20) rotate(270,0,180)">270</text><text dy="-4px" transform="translate(200,20) rotate(300,0,180)">300</text><text dy="-4px" transform="translate(200,20) rotate(330,0,180)">330</text><text dy="-4px" transform="translate(200,20) rotate(360,0,180)">360</text></g><g class="arcs"><path d="M6.672495416309395,-76.26697159835173A76.55829903978052,76.55829903978052 0 0,1 19.814745852149226,-73.94963825928559L8.799847533485705,-32.84147809382832A34,34 0 0,0 2.9632952534203767,-33.87061973511935Z" style="fill: #85a7ea;" transform="translate(200,200)"><title>10° 4.4% 11kts</title></path><path d="M14.631264290425214,-54.604621710835104A56.53086419753086,56.53086419753086 0 0,1...