<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)