<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" style="cursor:pointer;" viewBox="0 0 200 200">
<style>
path {
fill: black;
stroke-width: 1px;
stroke: #000;
stroke-linecap: round;
stroke-linejoin: round;
transition: 2s;
}
path:hover {
d: path("M 10 170 C 42.5 170, 42.5 170, 95 170 S 137.5 170, 180 170 L 180 180 H 10 Z");
}
</style>
<path d="M 10 80
C 40 10, 65 10, 95 80
S 150 150, 180 80
L 180 180
H 10
Z"></path>
</svg>
The animation is triggered on hover over the path above.
A mate asked about animating an SVG yesterday and it got me thinking about how to do it using CSS.
The original is here, but I like this version as the points also move. After reading a lot from the MBN web docs I figured out that the S stole a control point from the preceding C.
<svg width="100%" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 200">
<style>
#curve-holder {
cursor: pointer;
}
#curve-holder rect {
fill: #fff;
stroke: none;
}
#curve-holder path {
fill: #000;
stroke-width: 1px;
stroke: #000;
stroke-linecap: round;
stroke-linejoin: round;
transition: 2s;
}
#curve-holder:hover path {
d: path("M 0 180 Q 50 180, 100 180 T 200 180 T 300 180 T 400 180 T 500 180 T 600 180 L 600 200 H 0 Z");
}
</style>
<g id="curve-holder">
<rect x="0" y="0" width="600" height="200"></rect>
<path d="M 0 100 Q 50 -50, 100 100 T 200 100 T 300 100 T 400 100 T 500 100 T 600 100 L 600 200 H 0 Z"></path>
</g>
</svg>
Then I got to playing with quadratic curves. The result is above.
Top comments (0)