🛣️ CSS offset-path — Complete Tutorial

The CSS offset-path property defines a motion path that an element will follow during animation. Instead of moving in straight lines (like translate animations),offset-path allows **curved paths, circular paths, custom paths, and SVG-like trajectories**.

>>“offset-path lets you animate elements along any path — straight, curved, circular, or even hand-drawn.”

Note

✔ Works with offset-distance
✔ Can use SVG path syntax
✔ Great for advanced UI animations, loaders, complex movement
✔ Supported in all modern browsers

📦 Syntax

offset-path syntax

offset-path: <path() | ray() | none>;
OptionDescription
path()Custom SVG-style path
ray()Straight line from element
noneNo path (default)

🎨 1. Basic Curved Motion Path

Basic path

.ball {
  offset-path: path("M0,0 C100,0 100,100 200,100");
  animation: move 3s linear infinite;
}

@keyframes move {
  to {
    offset-distance: 100%;
  }
}

The object moves along a cubic Bézier curve like an SVG path.

🎨 2. Circular Path

Circular motion

.planet {
  offset-path: path("M 100 50 A 50 50 0 1 1 99 50");
  animation: orbit 4s linear infinite;
}

@keyframes orbit {
  to {
    offset-distance: 100%;
  }
}

Creates orbit-like animations — great for loaders or solar-system effects.

🎨 3. Straight Line Using ray()

ray path

.shoot {
  offset-path: ray(45deg closest-side);
  animation: fly 1s linear infinite;
}

@keyframes fly {
  to { offset-distance: 100%; }
}

ray() creates straight-line motion in a chosen direction.

🎨 4. Motion With Rotation

Use offset-rotate to rotate the element so it faces the direction of the path.

rotate along path

.car {
  offset-path: path("M0,0 L200,50 L300,150");
  offset-rotate: auto;
  animation: drive 4s ease-in-out infinite;
}

@keyframes drive {
  to { offset-distance: 100%; }
}

🎨 5. Complex Path (SVG Heart Shape)

heart path

.heart {
  offset-path: path("M10,30 A20,20 0 0,1 50,30 A20,20 0 0,1 90,30 Q90,60 50,90 Q10,60 10,30");
  animation: follow-heart 5s ease-in-out infinite;
}

@keyframes follow-heart {
  to { offset-distance: 100%; }
}

The element follows a heart-shaped curved trajectory.

🎨 6. Combine offset-path + translate/scale

Combined transforms

.object {
  offset-path: path("M0,0 C100,50 150,150 250,200");
  scale: 1.2;
  translate: -10px -10px;
  animation: move 3s linear infinite;
}

@keyframes move {
  to { offset-distance: 100%; }
}

Individual transform properties work beautifully with offset motion.

📌 Important Supporting Properties

PropertyDescription
offset-distanceWhere the element is along the path (0–100%)
offset-rotateControls element rotation along the path
offset-anchorControls anchor point relative to the path

🧪 Real-World Use Cases

1️⃣ Airplane Following a Smooth Route

airplane route

.plane {
  offset-path: path("M0,50 C150,0 300,100 450,50");
  offset-rotate: auto;
  animation: fly 5s linear infinite;
}

2️⃣ Loading Spinner Animation

loader

.dot {
  offset-path: path("M60,10 A50,50 0 1 1 59,10");
  animation: loop 1.5s linear infinite;
}

3️⃣ Particle Effects

particles

.particle {
  offset-path: ray(120deg farthest-side);
  animation: drift 2s ease-out infinite;
}

⚠️ Common Mistakes

  • ❌ Forgetting to animate offset-distance
  • ❌ Using offset-path without proper path syntax
  • ❌ Expecting rotation without offset-rotate: auto;
  • ❌ Using url(#path) — NOT supported in CSS

Note

Only path() works — external SVG paths require embedding the path string manually.

🔥 Summary

offset-path is a powerful CSS feature that enables complex, smooth, natural motion along custom-defined paths. When paired with offset-distance and offset-rotate, it unlocks advanced animation capabilities.

  • offset-path → shape of the motion path
  • offset-distance → position along the path
  • offset-rotate → direction of rotation
>>“With offset-path, CSS animations go from simple to cinematic.”