20Polygon Morph

II · Drawing with SVG

Point interpolation morphs a triangle flat and back again.

Click

Source

2 files

<head>
  <link rel="stylesheet" href="/base.css" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <button id="buttonTriangle">
    <svg width="100%" viewBox="0 0 24 24">
      <polygon
        stroke="currentColor"
        stroke-width="1"
        stroke-linejoin="round"
        points="12 4 20 16 4 16"
      >
        <animate
          attributeName="points"
          from="12 4 20 16 4 16"
          to="12 16 20 16 4 16"
          dur="0.5s"
          fill="freeze"
          begin="buttonTriangle.click"
        />
      </polygon>
    </svg>
  </button>
  <button id="buttonCircle">
    <svg width="100%" viewBox="0 0 100 100">
      <rect rx="0" fill="currentColor" x="20" y="20" width="60" height="60">
        <animate
          attributeName="rx"
          to="30"
          dur="0.5s"
          begin="buttonCircle.click"
          fill="freeze"
        />
      </rect>
    </svg>
  </button>
</body>