SVG Recipe

simple rectangle

<svg width="200" height="124">
  <rect x="10" y="10" width="150" height="74" fill="#A64E00"/>
  <rect x="40" y="40" width="150" height="74" fill="#FF7800"/>
</svg>

rx, ry, fill-opacity

<svg width="200" height="124">
  <rect x="10" y="10" rx="10" ry="10" width="150" height="74" fill="#1240AB"/>
  <rect x="40" y="40" rx="10" ry="10" width="150" height="74" fill="#FFD900" fill-opacity="0.8"/>
</svg>

transform

<svg width="200" height="124">
  <rect x="10" y="10" rx="10" ry="10" width="150" height="74" fill="#A69B00"
    transform="rotate(5 85 47)"/>
  <rect x="40" y="40" rx="10" ry="10" width="150" height="74" fill="#DF38B1" fill-opacity="0.8"
    transform="rotate(10 115 77)"/>
</svg>

animate, animateTransform

<svg width="200" height="124">
  <rect x="10" y="10" rx="10" ry="10" width="150" height="74" fill="#FBFE00">
    <animate attributeName="opacity" values="1;0;1" dur="5s" repeatCount="indefinite"/>
  </rect>
  <rect x="40" y="40" rx="10" ry="10" width="150" height="74" fill="#00B7A4" fill-opacity="0.8">
    <animateTransform attributeName="transform" type="rotate"
      values="0 115,77;360 115,77" dur="5s" repeatCount="indefinite"/>
  </rect>
</svg>