<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.ring {
outline: 2px solid rgba(0,180,0,0.7);
}
</style>
<circle cx="65" cy="60" r="50" fill="orange" class="ring" />
<path d="M 140 10 l 50 100 l 50 -50 l -20 0 l -20 -30 Z" fill="orange" class="ring" />
<g class="ring">
<rect x="270" y="10" width="100" height="100" fill="orange" />
</g>
<g transform="translate(60, 140) rotate(30)">
<rect width="100" height="100" fill="orange" class="ring" />
</g>
<rect width="100" height="100" fill="orange" transform="translate(200, 140) rotate(30)" class="ring" />
<g class="ring">
<rect width="100" height="100" fill="orange" transform="translate(360, 140) rotate(30)" />
</g>
<text x="10" y="320" class="ring">focused text</text>
<text transform="translate(100, 320) rotate(30)" class="ring">focused text</text>
<g class="ring">
<text transform="translate(200, 320) rotate(30)" class="ring">focused text</text>
</g>
<clipPath id="clip">
<rect width="100" height="100" />
</clipPath>
<image xlink:href="resources/green-checker.png" x="10" y="400" width="530" height="410" clip-path="url(#clip)" class="ring" />
<image xlink:href="resources/green-checker.png" transform="translate(200, 400) rotate(30)" width="530" height="410" class="ring" clip-path="url(#clip)"/>
<g class="ring" transform="translate(360, 400) rotate(30)">
<image xlink:href="resources/green-checker.png" width="530" height="410" clip-path="url(#clip)"/>
</g>
</svg>