JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="600" height="300">
  <rect id="a" x="20" y="20" width="10" height="100" fill="red"
    transform="translate(10 10)"
  ></rect>
  <rect id="b" x="20" y="20" width="10" height="100" fill="pink"
    transform="translate(10 10) scale(2)"
  ></rect>
  <rect id="a" x="20" y="20" width="10" height="100" fill="blue"
    transform="translate(10 10) scale(2) translate(-10 -10)"
  ></rect>
</svg>

CSS

body {
  margin: 0;
}
svg {
  border: 1px solid #ddd;
  background-color: white;
}
#a, #b, #c {
  opacity: .5;
}