Envelope SMIL animation

by AntowaKartowa

HTML

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  preserveAspectRatio="xMinYMin meet"
  viewBox="0 0 36 36"
  width="500"
  height="500"
>
  <rect id="canvas" x="0" y="0" width="36" height="36" fill="white" opacity="0" />
  <path
    id="envelope-frame"
    d="
      M8 18
      c0 -3.771 0 -5.657 1.172 -6.828
      s3.057 -1.172 6.828 -1.172
      h4
      c3.771 0 5.657 0 6.828 1.172
      s1.172 3.057 1.172 6.828
      s0 5.657 -1.172 6.828
      s-3.057 1.172 -6.828 1.172
      h-4
      c-3.771 0 -5.657 0 -6.828 -1.172
      s-1.172 -3.057 -1.172 -6.828
      z"
    fill="none"
    stroke-width="2"
    stroke="currentColor"
  />
  <path
    id="envelope-opening"
    d="M8 11.183
        l6.159 5.037
        c1.837 1.53 2.755 2.295 3.841 2.295
        s2.005 -0.765 3.841 -2.296
        l6.159 -5.037
        l-6.159 -1.8
        c-1.836 -0.5 -2.755 -0.75 -3.841 -0.75
        s-2.004 0.25 -3.841 0.75
        Z"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-dasharray="33 100"
    stroke-dashoffset="-10.4"
    pathLength="100"
    fill="none"
  >
    <animate
      id="restartGuard"
      attributeName="data-lock"
      from="0"
      to="1"
      dur="1.5s"
      fill="freeze"
      begin="canvas.mouseenter"
      restart="whenNotActive"
    />
    <animate
      id="envelopeOpen"
      attributeName="d"
      dur="0.3s"
      fill="freeze"
      begin="restartGuard.begin"
      to="M9.5 11
        l5.159 -4.2
        c1.837 -1.8 2.004 -2.5 3.341 -2.5
        s1.507 0.7 3.341 2.5
        l5.159 4.2
        l-5.159 1.8
        c-1.837 0.5 -2.004 0.75 -3.341 0.75
        s-1.507 -0.25 -3.341 -0.75
        Z"
    />
    <animate
      attributeName="stroke-dasharray"
      dur="0.3s"
      fill="freeze"
      begin="envelopeOpen.begin"
      to="53 100"
    />
    <animate
     ...

CSS

html {
    color: black;
}