<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="350">
<g>
  <circle cx="50" cy="50" r="50" fill="green"/>
  <circle cx="100" cy="50" r="50" fill="red" />
  <g>
    <circle cx="50" cy="100" r="50" fill="green" opacity=".5" />
    <circle cx="100" cy="100" r="50" fill="red"  opacity=".5" />
  </g>
</g>
<g transform="translate(200,0)">
  <circle cx="50" cy="50" r="50" fill="green"/>
  <circle cx="100" cy="50" r="50" fill="red" />
  <g>
    <circle cx="50" cy="100" r="50" fill="green" opacity=".5" />
    <circle cx="100" cy="100" r="50" fill="red"  opacity=".5" />
  </g>
</g>
</svg>
</body>
</html>