JSFiddle - React, Tailwind, and code Playground

by Michael Baas

HTML

<div id="wrapper" class="size1">
<!-- http://phrogz.net/SVG/USMap.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 959 593">
  <!-- simplified from http://en.wikipedia.org/wiki/File%3aBlank_US_Map.svg -->
  <style>
    path { fill:#d3d3d3; stroke:#fff; stroke-width:0.75; stroke-miterlimit:4 }
  </style>
  <path id="HI" d="M 233.1,519.3 L 235.0,515.8 L 237.3,515.4 L 237.6,516.2 L 235.5,519.3 L 233.1,519.3 z M 243.3,515.6 L 249.4,518.2 L 251.5,517.9 L 253.1,514.0 L 252.5,510.6 L 248.3,510.1 L 244.2,511.9 L 243.3,515.6 z M 274.0,525.6 L 277.7,531.1 L 280.1,530.8 L 281.3,530.3 L 282.7,531.6 L 286.4,531.4 L 287.4,530.0 L 284.5,528.2 L 282.6,524.5 L 280.5,520.9 L 274.6,523.8 L 274.0,525.6 z M 294.2,534.5 L 295.5,532.6 L 300.2,533.5 L 300.8,533.1 L 307.0,533.7 L 306.6,535.0 L 304.1,536.4 L 299.7,536.1 L 294.2,534.5 z M 299.5,539.7 L 301.5,543.6 L 304.5,542.4 L 304.9,540.8 L 303.2,538.7 L 299.5,538.4 L 299.5,539.7 z M 306.5,538.5 L 308.7,535.6 L 313.4,538.1 L 317.8,539.2 L 322.2,541.9 L 322.2,543.9 L 318.6,545.7 L 313.8,546.6 L 311.3,545.2 L 306.5,538.5 z M 323.1,554.1 L 324.7,552.8 L 328.1,554.4 L 335.7,557.9 L 339.1,560.0 L 340.8,562.5 L 342.7,566.8 L 346.7,569.4 L 346.4,570.7 L 342.5,574.0 L 338.3,575.4 L 336.9,574.8 L 333.8,576.5 L 331.4,579.8 L 329.1,582.7 L 327.3,582.5 L 323.8,579.9 L 323.5,575.4 L 324.1,573.0 L 322.5,567.3 L 320.4,565.5 L 320.2,563.0 L 322.5,562.0 L 324.6,558.9 L 325.1,557.9 L 323.5,556.2 L 323.1,554.1 z" />
  <path id="AK" d="M 158.1,453.7 L 157.8,539.0 L 159.4,540.0 L 162.4,540.2 L 163.9,539.0 L 166.5,539.0 L 166.6,541.9 L 173.6,548.7 L 174.1,551.3 L 177.5,549.4 L 178.1,549.2 L 178.4,546.1 L 179.9,544.5 L 181.0,544.4 L 183.0,542.9 L 186.0,545.0 L 186.7,547.9 L 188.6,549.1 L 189.8,551.5 L 193.6,553.3 L 197.0,559.2 L 199.8,563.1 L 202.0,565.9 L 203.5,569.6 L 208.5,571.4 L 213.7,573.5 L 214.7,577.8 L 215.1,580.9 L 214.2,584.3 L 212.4,586.6 L 210.8,585.8 L 209.3,582.7 L 206.6,581.2 L 204.8,580.1 L 204.0,580.9 L 205.4,583.7 L 205.6,587.4...

CSS

#wrapper {
    position:relative; width:300px; height:400px;
    border:3px solid green;
    margin:0 auto
}
svg {
    position:absolute; 
    background:yellow
}
ellipse { fill:red; stroke:black; stroke-width:2px }
circle { fill:orange}

JavaScript

/*
$('#wrapper').animate({width:550},5000,function(){
    $(this).animate({height:100},5000);
});
*/