Get Inspired with 30+ CSS Motion Path Examples

Here is a list of 30+ CSS motion path examples that demonstrate how to use the CSS motion-path property to animate an element along a custom path:

See the Pen Stay cool w/ responsive motion-path 😎 by Jhey (@jh3y) on CodePen.

Title:- Stay cool w/ responsive motion-path ??
Author:- Jhey
Made with:- CSS HTML JS

See the Pen MotionPath and random utils GSAP3 by Christina Gorton (@cgorton) on CodePen.

Title:- MotionPath and random utils GSAP3
Author:- Christina Gorton
Made with:- CSS HTML JS

See the Pen Untitled by Elaine (@ElaineXu) on CodePen.

Title:- MotionPath
Author:- Elaine
Made with:- CSS HTML JS

See the Pen gsap-bubbly-bath😻 by Louise Flanagan (@louflan) on CodePen.

Title:- gsap-bubbly-bath??
Author:- Louise Flanagan
Made with:- CSS HTML JS

See the Pen Animated SVG illustration by Nik Ches (@nikches) on CodePen.

Title:- Animated SVG illustration
Author:- Nik Ches
Made with:- CSS HTML JS

See the Pen SVG Motion Path by Gabriele Corti (@borntofrappe) on CodePen.

Title:- SVG Motion Path
Author:- Gabriele Corti
Made with:- CSS HTML JS

See the Pen Untitled by Amelia Wattenberger (@wattenberger) on CodePen.

Title:- Untitled
Author:- Amelia Wattenberger
Made with:- CSS HTML JS

See the Pen Motion Path CSS by ruslan_khomiak (@ruslan_khomiak) on CodePen.

Title:- Motion Path CSS
Author:- ruslan_khomiak
Made with:- CSS HTML JS

See the Pen Splitting and motion path by Michelle Barker (@michellebarker) on CodePen.

Title:- Splitting and motion path
Author:- Michelle Barker
Made with:- CSS HTML JS

See the Pen Speed + Motion Path by Blake Bowen (@osublake) on CodePen.

Title:- Speed + Motion Path
Author:- Blake Bowen
Made with:- CSS HTML JS

See the Pen Think – create cycle by Mikael Ainalem (@ainalem) on CodePen.

Title:- Think – create cycle
Author:- Mikael Ainalem
Made with:- CSS HTML JS

See the Pen Learning SVG animation by Fabio (@FabioG) on CodePen.

Title:- Learning SVG animation
Author:- Fabio
Made with:- CSS HTML JS

See the Pen animateMotion by @BrawadaCom (@Anna_Batura) on CodePen.

Title:- animateMotion
Author:- @BrawadaCom
Made with:- CSS HTML JS

See the Pen Responsive CSS Motion Path w/ d3 🤓 by Jhey (@jh3y) on CodePen.

Title:- Responsive CSS Motion Path w/ d3 ??
Author:- Jhey
Made with:- CSS HTML JS

See the Pen CSS Animate on SVG Path by 一丝 (@yisi) on CodePen.

Title:- CSS Animate on SVG Path
Author:- ??
Made with:- CSS HTML JS

See the Pen CSS Motion Path with ray() by Dan Wilson (@danwilson) on CodePen.

Title:- CSS Motion Path with ray()
Author:- Dan Wilson
Made with:- CSS HTML JS

See the Pen CSS Motion Path offset-distance by Jhey (@jh3y) on CodePen.

Title:- CSS Motion Path offset-distance
Author:- Jhey
Made with:- CSS HTML JS

See the Pen Animating with motion path in CSS – hotdog by Kara (@kloo012) on CodePen.

Title:- Animating with motion path in CSS – hotdog
Author:- Kara
Made with:- CSS HTML JS

See the Pen Responsive CSS Motion Path with d3.js 😎 by Jhey (@jh3y) on CodePen.

Title:- Responsive CSS Motion Path with d3.js ??
Author:- Jhey
Made with:- CSS HTML JS

See the Pen CSS Motion Path Demo by Jhey (@jh3y) on CodePen.

Title:- CSS Motion Path Demo
Author:- Jhey
Made with:- CSS HTML JS

See the Pen Spinning rings (motion/offset path) by Amelia Bellamy-Royds (@AmeliaBR) on CodePen.

Title:- Spinning rings (motion/offset path)
Author:- Amelia Bellamy-Royds
Made with:- CSS HTML JS

See the Pen CSS Motion Path Title Slide by Dan Wilson (@danwilson) on CodePen.

Title:- CSS Motion Path Title Slide
Author:- Dan Wilson
Made with:- CSS HTML JS

See the Pen Circular Spinning Text by alphardex (@alphardex) on CodePen.

Title:- Circular Spinning Text
Author:- alphardex
Made with:- CSS HTML JS

See the Pen CSS Motion Path + Gooey Animation by Prathamesh Koshti (@prathameshkoshti) on CodePen.

Title:- CSS Motion Path + Gooey Animation
Author:- Prathamesh Koshti
Made with:- CSS HTML JS

See the Pen Infinite w/ responsive CSS motion path 😎 by Jhey (@jh3y) on CodePen.

Title:- Infinite w/ responsive CSS motion path ??
Author:- Jhey
Made with:- CSS HTML JS

See the Pen Photo Sharer (CSS Motion Path Demo) by Dan Wilson (@danwilson) on CodePen.

Title:- Photo Sharer (CSS Motion Path Demo)
Author:- Dan Wilson
Made with:- CSS HTML JS

See the Pen Motion Path Infinity (2016 Spec) by Dan Wilson (@danwilson) on CodePen.

Title:- Motion Path Infinity (2016 Spec)
Author:- Dan Wilson
Made with:- CSS HTML JS

See the Pen CSS Motion Path in an SVG by Dan Wilson (@danwilson) on CodePen.

Title:- CSS Motion Path in an SVG
Author:- Dan Wilson
Made with:- CSS HTML JS

See the Pen Star Trail by Mimo Duo (@mimoduo) on CodePen.

Title:- Star Trail
Author:- Mimo Duo
Made with:- CSS HTML JS

See the Pen CSS Motion Path Airplane by Ali Klein (@AliKlein) on CodePen.

Title:- CSS Motion Path Airplane
Author:- Ali Klein
Made with:- CSS HTML JS

See the Pen scalextric car on motion-path by Kseso (@Kseso) on CodePen.

Title:- scalextric car on motion-path
Author:- Kseso
Made with:- CSS HTML JS

See the Pen CSS Motion Path by Prathamesh Koshti (@prathameshkoshti) on CodePen.

Title:- CSS Motion Path
Author:- Prathamesh Koshti
Made with:- CSS HTML JS

See the Pen Shape Revealer 2020 by Dan Wilson (@danwilson) on CodePen.

Title:- Shape Revealer 2020
Author:- Dan Wilson
Made with:- CSS HTML JS

See the Pen CSS Motion Path with SVG by Michelle Barker (@michellebarker) on CodePen.

Title:- CSS Motion Path with SVG
Author:- Michelle Barker
Made with:- CSS HTML JS

See the Pen Motion Path Options: Responsive(ish) by Dan Wilson (@danwilson) on CodePen.

Title:- Motion Path Options: Responsive(ish)
Author:- Dan Wilson
Made with:- CSS HTML JS

See the Pen CSS is Awesome (CSS Motion Path) by yuanchuan (@yuanchuan) on CodePen.

Title:- CSS is Awesome (CSS Motion Path)
Author:- yuanchuan
Made with:- CSS HTML JS