<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 800" preserveAspectRatio="xMidYMid meet"></svg>
*, *:before, *:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  font-family: Lato, sans-serif;
  font-size: 100%;
  padding: 0;
  margin: 10px;
  color: #444;
  background-color: #fff;
  overflow: hidden;
}

svg {
  background: radial-gradient(ellipse at center, #fefefe 0%, #cbeeff 100%);
}

circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #fff;
}
var
  svg = document.getElementById('mysvg'),
  NS = svg.getAttribute('xmlns');
  
// add random circles
var c, i;
for (i = 0; i < 30; i++) {
  c = document.createElementNS(NS, 'circle');
  c.setAttributeNS(null, 'cx', Math.round(Math.random() * 1600));
  c.setAttributeNS(null, 'cy', Math.round(Math.random() * 800));
  c.setAttributeNS(null, 'r', 20 + Math.round(Math.random() * 30));
  svg.appendChild(c);
}

// click a circle
svg.addEventListener('click', function(e) {
  var t = e.target;
  if (t.nodeName != 'circle') return;
  t.setAttributeNS(null, 'r', 
    parseFloat(t.getAttributeNS(null, 'r')) + 10
  );
  console.log(t.getBoundingClientRect());
}, false);
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Lato

External JavaScript

This Pen doesn't use any external JavaScript resources.