results Link to heading

codes (slightly modified) Link to heading

  • <g> https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
    <svg
  xmlns="http://www.w3.org/2000/svg"
  width="200" height="200"
  viewBox="0 0 200 200"
  style="background:#eee;">
  <g fill="rgba(1, 1, 1, 0.5)" stroke="red" stroke-width="2">
    <circle cx="40" cy="40" r="25" />
    <circle cx="60" cy="60" r="25" />
  </g>
</svg>
  • <animate> https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate
    <svg
  xmlns="http://www.w3.org/2000/svg"
  width="200" height="200"
  viewBox="0 0 200 200"
  style="background:#eee;">
  <rect width="100" height="100" fill="green">
    <animate
      attributeName="x"
      values="0;100;150;100;0"
      dur="2s"
      repeatCount="indefinite" />
  </rect>
</svg>

combining elements Link to heading

  • ..

notes Link to heading