DEV Community

Dominic Myers
Dominic Myers

Posted on • Originally published at drmsite.blogspot.com on

Animated curves in SVG

<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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Then I got to playing with quadratic curves. The result is above.

Top comments (0)