Responsive SVG circles

Responsive SVG circles

by Leo Lanese

HTML

<div id="circles">
  <svg id="go" 
    viewBox="0 0 600 200"
    perserveAspectRatio="xMinYMid">
    <circle r="100" cx="100" cy="90" fill="#ededed"></circle>
    <circle r="100" cx="300" cy="90" fill="#808080"></circle>
    <circle r="100" cx="500" cy="100" fill="#000"></circle>
  </svg>
</div>

CSS

#circles {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    margin: 20px;
}