Reputation: 11
I have a fairly simple svg morph animation using SMIL where the path morphs when elements are clicked within the svg.
I'd like the path to morph from the most recent version of it but instead it goes back to the original path each time. Ideally the blob shapes would go up and down (undulate) as each link is clicked.
I've tried additive="replace" which sounds like it's the correct attribute to use but it doesn't work.
Anyone know the correct combination to start the animation from the last point?
<svg viewBox="0 0 1196.87 254" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill="#64bab7" font-family="Helvetica" font-size="25">
<a xlink:href="#link1" class="loop-tab"><text id="link1" transform="translate(62.5 111.96)"><tspan letter-spacing="-.07em">1</tspan><tspan letter-spacing="-.05em" x="12.37" y="0">.</tspan><tspan x="18.47" y="0"/><tspan letter-spacing="-.01em" x="24.22" y="0">Link</tspan></text></a>
<a xlink:href="#link2" class="loop-tab"><text id="link2" transform="translate(305.35 111.96)">2. Link</text></a>
<a xlink:href="#link3" class="loop-tab"><text id="link3" transform="translate(548.57 111.96)">3. Link</text></a>
<a xlink:href="#link4" class="loop-tab"><text id="link4" transform="translate(792.92 111.96)">4. Link</text></a>
<a xlink:href="#link5" class="loop-tab"><text id="link5" transform="translate(1047.39 111.96)">5. Link</text></a>
</g>
<path fill="none" stroke="#6dc4c2" stroke-miterlimit="10" stroke-width="2.04" d="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z">
<animate begin="link1.click" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" attributeName="d" dur="0.5s"
values="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z;
m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-55.66 148.77-127 148.77c-63.68 0-101.91-94.2-101.91-148.8 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
<animate begin="link2.click" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" attributeName="d" dur="0.5s"
values="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z;
m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 148.59 122.81 148.59 92.13-97.46 122.84-148.68 61.45-102.32 122.84-102.32h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
<animate begin="link3.click" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" attributeName="d" dur="0.5s"
values="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z;
m598.43 252c-61.43 0-92.13-97.43-122.88-148.65s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 148.65-122.89 148.65z"/>
<animate begin="link4.click" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" attributeName="d" dur="0.5s"
values="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z;
m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 148.67 122.84 148.67 92.09-97.38 122.8-148.6 65.59-102.4 127.04-102.4c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
<animate begin="link5.click" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" attributeName="d" dur="0.5s"
values="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z;
m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.69 148.63-101.94 148.63-61.42 0-96.28-97.38-127-148.6s-61.44-102.41-122.86-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
</path>
</svg>
Upvotes: 0
Views: 216
Reputation: 11
Have worked this out now.
<svg viewBox="0 0 1196.87 254" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill="#64bab7" font-family="Helvetica" font-size="25">
<a xlink:href="#link1" class="loop-tab"><text id="link1" transform="translate(62.5 111.96)"><tspan letter-spacing="-.07em">1</tspan><tspan letter-spacing="-.05em" x="12.37" y="0">.</tspan><tspan x="18.47" y="0"/><tspan letter-spacing="-.01em" x="24.22" y="0">Link</tspan></text></a>
<a xlink:href="#link2" class="loop-tab"><text id="link2" transform="translate(305.35 111.96)">2. Link</text></a>
<a xlink:href="#link3" class="loop-tab"><text id="link3" transform="translate(548.57 111.96)">3. Link</text></a>
<a xlink:href="#link4" class="loop-tab"><text id="link4" transform="translate(792.92 111.96)">4. Link</text></a>
<a xlink:href="#link5" class="loop-tab"><text id="link5" transform="translate(1047.39 111.96)">5. Link</text></a>
</g>
<path fill="none" stroke="#6dc4c2" stroke-miterlimit="10" stroke-width="2.04" d="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z">
<animate begin="link1.click" attributeName="d" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" dur="0.5s"
to="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-55.66 148.77-127 148.77c-63.68 0-101.91-94.2-101.91-148.8 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
<animate begin="link2.click" attributeName="d" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" dur="0.5s"
to="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 148.59 122.81 148.59 92.13-97.46 122.84-148.68 61.45-102.32 122.84-102.32h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
<animate begin="link3.click" attributeName="d" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" dur="0.5s"
to="m598.43 252c-61.43 0-92.13-97.43-122.88-148.65s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 148.65-122.89 148.65z"/>
<animate begin="link4.click" attributeName="d" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" dur="0.5s"
to="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 148.67 122.84 148.67 92.09-97.38 122.8-148.6 65.59-102.4 127.04-102.4c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.68 102.4-101.92 102.4-61.42 0-96.3-51.15-127-102.37s-61.46-102.41-122.88-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
<animate begin="link5.click" attributeName="d" repeatCount="1" fill="freeze" accumulate="sum" additive="replace" dur="0.5s"
to="m598.43 205.8c-61.42 0-92.13-51.23-122.88-102.45s-61.38-102.35-122.76-102.35-92.13 51.24-122.88 102.43-65.55 102.37-127 102.37c-56.22 0-101.91-47.8-101.91-102.4 0-61.84 51.61-102.4 101.9-102.4 61.42 0 96.3 51.22 127 102.41s61.43 102.39 122.81 102.39 92.13-51.23 122.84-102.45 61.45-102.35 122.84-102.35h.09c61.42 0 92.13 51.15 122.84 102.33s61.42 102.47 122.84 102.47 92.09-51.15 122.84-102.37 65.55-102.43 127-102.43c50.29 0 101.88 40.54 101.88 102.38 0 54.55-45.69 148.63-101.94 148.63-61.42 0-96.28-97.38-127-148.6s-61.44-102.41-122.86-102.41-92.08 51.17-122.76 102.35-61.47 102.45-122.89 102.45z"/>
</path>
</svg>
Upvotes: 1