Collection of free CSS motion path (offset-path) code examples. Update of 2020 collection. 4 new items.

Related Articles

  1. CSS clip-path

Author

  • Michelle Barker

Links

Made with

  • HTML / CSS / JS

About a code

Take Care

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

Responsive: no

Dependencies: splitting.js

Author

  • Michelle Barker

Links

Made with

  • HTML / CSS / JS

About a code

Splitting and Motion Path

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

Responsive: no

Dependencies: splitting.js

Author

  • Prathamesh Koshti

Links

Made with

  • HTML / CSS / JS

About a code

CSS Motion Path

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

Responsive: no

Dependencies: particles.js

Author

  • Michelle Barker

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

CSS Motion Path Spirograph

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

Responsive: yes

Dependencies: -

Demo image: CSS Is Awesome CSS Motion Path

Author

  • yuanchuan

Links

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

Links

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

Links

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

Links

Made with

  • HTML / CSS

About a code

SVG Motion Path

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

Responsive: yes

Dependencies: -

Author

  • Mikael Ainalem

Links

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

Links

Made with

  • HTML / CSS

About a code

Motion Path

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

Responsive: no

Dependencies: -

Author

  • Katarzyna Marcinkiewicz

Links

Made with

  • HTML / CSS

About a code

Bouncing Heart

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

Responsive: no

Dependencies: -

Author

  • Dan Wilson

Links

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

Links

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

Links

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