Collection of free CSS motion path (offset-path) code examples.


Demo image: CSS Is Awesome CSS Motion Path

Author

  • yuanchuan

Made with

  • HTML / CSS (SCSS)

About a code

CSS Is Awesome CSS Motion Path

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Prathamesh Koshti

Made with

  • HTML / CSS

About a code

CSS Motion Path + Gooey Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Michelle Barker

Made with

  • HTML / CSS (SCSS)

About a code

CSS Motion Path With SVG

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Gabriele Corti

Made with

  • HTML / CSS

About a code

SVG Motion Path

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

About a code

Think - Create Cycle

The think, create, think, create, etc cycle.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Behnam Mohammadi

Made with

  • HTML / CSS

About a code

Motion Path

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Katarzyna Marcinkiewicz

Made with

  • HTML / CSS

About a code

Bouncing Heart

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Dan Wilson

Made with

  • HTML / CSS (SCSS) / JS

About a code

Shape Revealer Via CSS Motion Path

Shape is revealed as animating faster and creates illusion of an actual line/path.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Dan Wilson

Made with

  • HTML / CSS (SCSS)

About a code

CSS Motion Path In An SVG

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Dan Wilson

Made with

  • HTML / CSS (SCSS) / JS

About a code

Motion Path Infinity

Using an infinity motion path to animate a number. Uses the CSS Motion Path module, using the newer spec (offset-* instead of motion-*).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -