SVG Motion Path using HTML and CSS

Share your love

SVGs are a powerful tool for creating vector graphics that can be scaled and animated without losing quality. In this tutorial, we’ll show you how to create an SVG motion path using HTML and CSS. A motion path is an animation technique that allows you to move an object along a specific path, giving the illusion of motion. We’ll start by creating a basic SVG shape, then define a motion path using the <path> element. Next, we’ll use CSS to style the SVG and add animation properties to make the object move along the path. We’ll also show you how to adjust the speed and direction of the animation, as well as adding easing effects for a more natural movement. By the end of this tutorial, you’ll have a good understanding of how to create SVG motion paths and how they can be used to add dynamic and engaging animation to your web projects. So, let’s get started on creating an SVG motion path using HTML and CSS!

Before we start here are 50 projects to create using HTML CSS and JavaScript –

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>SVG Motion Path using HTML and CSS - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->
</body>

</html>

Paste the below code in your <body> tag.

<!-- be warned: messy syntax -->
<svg viewBox="0 0 700 500" width="700" height="500">
    <defs>
        <!-- group element describing the bicycle
    the icon was actually designed for a different project :P
    -->
        <g id="bicycle">
            <svg viewBox="0 0 100 60" x="-75" y="-45" width="150" height="90">
                <g fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="21" cy="39" r="19" />
                    <circle cx="21" cy="39" r="7" />

                    <circle cx="48" cy="39" r="6" />

                    <path d="M 40 39 h -19 l 15 -25 h 29 l 15 25 m -13.2 -22 l -14 15" />
                    <path d="M 44 32 l -12 -27 h -6 h 10 q 5 0 5 2" />
                    <path d="M 65 13 l -5 -12 h -2 h 15 a 6 6 0 0 1 0 12" />

                    <circle cx="79" cy="39" r="19" />
                    <circle cx="79" cy="39" r="7" />
                </g>
            </svg>
        </g>

        <!-- rectangles clipping the visible area for the bike icon -->
        <clipPath id="clip--blue" clipUnits="userSpaceOnUse">
            <rect transform="rotate(-45)" x="-75" width="300" y="-50" height="100" />
        </clipPath>
        <clipPath id="clip--red">
            <rect transform="rotate(45)" x="-50" width="220" y="-362.5" height="140" />
        </clipPath>
        <clipPath id="clip--yellow">
            <rect transform="rotate(-45)" x="217.5" width="217.5" y="167.5" height="100" />
        </clipPath>
    </defs>
    <g transform="translate(75 400)">
        <!-- path element describing the path picked up by CSS -->
        <!-- <path id="motion-path" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="5" d="M 0 0 l 200 -200 a 50 50 0 0 1 50 0 l 100 100 a 50 50 0 0 0 50 0 l 125 -125" /> -->

        <!-- include four variants of the bike group, with a different color and a clip hiding the variant past a defined threshold  -->
        <use href="#bicycle" stroke="#34a853" />
        <use clip-path="url(#clip--yellow)" href="#bicycle" stroke="#fabb05" />
        <use clip-path="url(#clip--red)" href="#bicycle" stroke="#ea4335" />
        <use clip-path="url(#clip--blue)" href="#bicycle" stroke="#4285f4" />

        <!-- colored rectangles included below the bicycle, and very loosely matching the clipPath elements -->
        <g transform="translate(37.5 22.5) rotate(-45)">
            <rect fill="#4285f4" rx="10" width="262.5" height="50" />
            <g transform="translate(262.5 0)">
                <g transform="rotate(90)">
                    <rect fill="#ea4335" rx="10" width="262.5" height="50" />
                    <g transform="translate(212.5 50)">
                        <g transform="rotate(-90)">
                            <rect fill="#fabb05" rx="10" width="212.5" height="50" />
                            <g transform="translate(212.5 50)">
                                <path fill="#34a853" stroke="#34a853" stroke-width="10" stroke-linejoin="round"
                                    stroke-linecap="round" d="M 0 0 v 50 l 80 -75 -80 -75 z" />
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

CSS Code 

Create a file style.css and paste the code below.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
/* center in the viewport */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body > svg {
  display: block;
  width: 80vw;
  max-width: 500px;
  height: auto;
}

/* animate the group describing the bicycle along a prescribed path */
#bicycle {
  offset-path: path(
    "M 0 0 l 200 -200 a 50 50 0 0 1 50 0 l 100 100 a 50 50 0 0 0 50 0 l 125 -125"
  );
  offset-distance: 0%;
  animation: offsetDistance 4s cubic-bezier(0.645, 0.045, 0.355, 1) infinite
    alternate;
}
@keyframes offsetDistance {
  to {
    offset-distance: 100%;
  }
}

Final Output

SVG Motion Path using HTML and CSS

Written by: Piyush Patil

Code Credits: @borntofrappe

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Share your love