<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300">
 <style>
  text { text-anchor:middle; font-size:30px }
  #flow > ellipse { fill:#6ff478 }
  #heading > ellipse { fill:#ee5afc }
  #sectioning > ellipse { fill:#f39228 }
 </style>

 <g id="flow">
  <ellipse cx="250" rx="250" cy="150" ry="150"/>
  <text x="250" y="40">Flow</text>
 </g>
 <g id="heading" transform="translate(310, 72.5)">
  <ellipse cx="40" rx="80" cy="22.5" ry="45"/>
  <text x="40" y="30">Heading</text>
 </g>
 <g id="sectioning" transform="translate(310, 172.5)">
  <ellipse cx="40" rx="80" cy="22.5" ry="45"/>
  <text x="40" y="30">Sectioning</text>
 </g>
</svg>
