JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<div id="container">
  <svg id="chart" width="600" height="200"
    viewBox="0 0 600 200"
    perserveAspectRatio="xMinYMid">
    <circle r="100" cx="100" cy="100" fill="red"></circle>
    <circle r="100" cx="300" cy="100" fill="green"></circle>
    <circle r="100" cx="500" cy="100" fill="blue"></circle>
  </svg>
</div>

CSS

#container {
    height: 0;
    /* 600 */
    width: 100%;
    /* 200 */
    padding-bottom: 33.3333%;
    position: relative;
    background-color: #eee;
}
#chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#chart circle {
    fill-opacity: .8;
}

JavaScript

/*var chart = $("#chart"),
    aspect = chart.width() / chart.height(),
    container = chart.parent();
$(window).on("resize", function() {
    var targetWidth = container.width();
    chart.attr("width", targetWidth);
    chart.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");
*/