JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
    <g id="g1" transform="translate(90,90)">
        <circle r="60" /><rect width="120" height="80" />
    </g>
</svg>

CSS

body { background: repeating-linear-gradient(
  135deg,
  #fff,
  #fff 10px,
  #ccc 10px,
  #ccc 20px
) }
circle, rect { opacity: 0.4 }
circle { fill:red }
rect { fill:blue }