Blog
Select Page

Animating element inside SVG over a path using CSS

SVG Animation

You can easily create a path over the surface using Figma or similar software. First you will need to give the animating object some id or class then place it to the top left position of the SVG using the transform: translated() method and apply the following CSS including keyframe to it.

CSS 

@keyframes offsetAnim {
  0%{
    opacity: 0;
    offset-distance: 0%;
  }
  10%{
    opacity: 1;
    offset-distance: 0%;
  }
  90%{
    opacity: 1;
    offset-distance: 100%;
  }
  100%{
    opacity: 0;
    offset-distance: 100%;
  }
}
#point{
  offset-distance: 0%;
 offset-path: path('M14.5 373L246 248L252 237.5L178.5 193.5L134 171L103 145.5L89 121L84 96.5L93.5 70L108.5 51L127 35L153 21L190 8L225.5 1H261.5L308 8L347.5 21L387 35L408 59L422 85V121L408 145.5L376.5 171L347.5 182L322 193.5');
  animation: offsetAnim 3.5s linear forwards infinite;
  transform: translate3d(-161px, -187px, 0);
}

DEMO