Location Marker 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"
>
  <defs>
    <symbol
      id="marker"
      viewBox="0 0 24 24"
      stroke="currentColor"
      stroke-width="2"
    >
      <path
        d="M4 10.143
                    C4 5.646 7.582 2 12 2
                    s8 3.646 8 8.143
                    c0 4.462-2.553 9.67-6.537 11.531
                    a3.45 3.45 0 0 1-2.926 0
                    C6.553 19.812 4 14.606 4 10.144
                    Z"
        fill="white"
      />
      <circle cx="12" cy="10" r="3" fill="none" />
    </symbol>
  </defs>
  <rect id="canvas" x="0" y="0" width="36" height="36" fill="white" opacity="0"/>
  <g id="ripples" fill="none" stroke="currentColor" stroke-linecap="round">
    <ellipse cx="18" cy="28" rx="6" ry="2" stroke-width="1.5" opacity="0">
      <animate
        id="ripple1"
        attributeName="opacity"
        values="0; 1; 0"
        keytimes="0; .15; 1"
        dur="0.6s"
        fill="freeze"
        begin="upAndDown.end+0.1s"
      />
    </ellipse>
    <ellipse cx="18" cy="28.5" rx="11" ry="3" stroke-width="1.8" opacity="0">
      <animate
        id="ripple2"
        attributeName="opacity"
        values="0; 1; 0"
        keytimes="0; .15; 1"
        dur="0.6s"
        fill="freeze"
        begin="ripple1.begin+0.15s"
      />
    </ellipse>
    <ellipse cx="18" cy="28.5" rx="16" ry="4" stroke-width="2" opacity="0">
      <animate
        id="ripple3"
        attributeName="opacity"
        values="0; 1; 0"
        keytimes="0; .15; 1"
        dur="0.6s"
        fill="freeze"
        begin="ripple2.begin+0.15s"
      />
    </ellipse>
  </g>
  <use href="#marker" x="6" y="6" width="24" height="24">
    <animate
      id="restartGuard"
      attributeName="data-lock"
      from="0"
      to="1"
      dur="1.8s"
  ...