I recently noticed an alert in my Chrome console that SVG's SMIL animations are being deprecated and will soon be removed. The message suggested using CSS or Web animations instead.
Since I want to transition from SMIL to CSS animations, there are a few things I can do with CSS, but this particular task has me stumped. My issue lies in the fact that I was animating the 'd' attribute in SMIL, and I'm unsure if/how I can achieve the same effect in CSS. Below is the code snippet:
svg{
position: fixed;
}<svg width="500" height="500" viewBox="0 0 500 500">
<path id="rect" fill="lightblue" d="M10 10 L30 10 L30 30 L10 30 Z"/>
<animate xlink:href="#rect"
attributeName="d"
attributeType="XML"
values="M20 20 L30 20 L40 40 L20 40 Z;
M10 10 L30 10 L40 30 L10 40 Z;
M10 10 L30 10 L30 30 L10 30 Z;
M20 20 L30 20 L40 40 L20 40 Z"
begin="0s"
dur="2s"
repeatCount="indefinite"
/>
</svg>Thank you!
P.S.: If accomplishing this in CSS is not feasible or would be quicker with JavaScript, I am open to exploring JavaScript as well.