After learning how to use the <animate> attribute, I successfully created a captivating animation featuring an elastic line. However, I am now determined to transform this into CSS for better control: my goal is to activate the animation only upon hovering over the line element. Unfortunately, I am facing difficulties in achieving this.
If you want to see a demonstration of what I have described, please check out this Live Example.
Here you can find my HTML and SVG code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="cntr" id="grid">
<defs>
<style>
path {
stroke: red;
stroke-width: .2;
stroke-linecap: round;
fill: none;
}
</style>
</defs>
<g class="drawing">
<g class="path-wrap">
<path d="M 30,40 Q 50,40 70,40">
<animate
attributeName="d"
dur="1.5s"
begin="1s"
repeatCount="indefinite"
values="M 30,40
Q 50,40 70,40;
M 30,40
Q 50,50 70,40;
M 30,40
Q 50,35 70,40;
M 30,40
Q 50,45 70,40;
M 30,40
Q 50,38 70,40;
M 30,40
Q 50,42 70,40;
M 30,40
Q 50,39 70,40;
M 30,40
Q 50,41 70,40;
M 30,40
Q 50,40 70,40;
M 30,40
Q 60,40 70,40;
M 30,40
Q 40,40 70,40;
M 30,40
Q 60,40 70,40;
M 30,40
Q 40,40 70,40;
M 30,40
Q 60,40 70,40;
M 30,40
Q 40,40 70,40;
M 30,40
Q 60,40 70,40;
M 30,40
Q 40,40 70,40;"
fill="freeze"
/>
</path>
</g>
</g>
</svg>Is there a straightforward method for converting <animate> attributes to CSS? Or is this task deemed impossible?