CSS clip-path: path() Guide (SVG → CSS)

This guide explains how to turn an image or SVG shape into a usable CSS clip-path: path().

Hi! I’m Rae, and I make CSS for JAI ! This guide walks through my process for turning SVGs/images into usable CSS clip paths.
If something here breaks, feels unclear, or you find a better method, feel free to reach out — I’m always tweaking things.

You can find me here:
@Mantarae on JanitorAI and @Mantarae33 on Ko-fi

Important reminder:

Please make sure you’re following JanitorAI’s CSS policy when customizing profiles. This guide is meant for learning and decoration — not for bypassing restrictions or breaking site behavior.


Part 1: Getting the SVG Path

1. Find a good source image

  • Use a solid, high-contrast SVG or PNG
  • Avoid gradients, outlines, or thin lines — bold silhouettes work best

Upload it to:
https://picsvg.com/

Important:

Do not download the SVG !!!!

In the top right corner you'll see a few symbols. Click on “Code” and copy everything into a notes app

2. Strip the SVG down to just the path

You’ll see something like this:

1
2
3
4
5
6
7
8
9
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="178.000000pt" height="178.000000pt"
 viewBox="0 0 178.000000 178.000000"
 preserveAspectRatio="xMidYMid meet">
  <g transform="translate(0.000000,178.000000) scale(0.100000,-0.100000)"
     fill="#000000" stroke="none">
    <path d="M23.36 172.32c-3.04-1.6-5.52-4.8-5..." />
  </g>
</svg>

Delete everything except what’s inside the d="...".

You want only this part:

M23.36 172.32c-3.04-1.6-5.52-4.8-5...

That’s the actual shape.


Part 2: Scaling & Editing the Path

3. Paste the path into an SVG path editor

Go to:
https://yqnn.github.io/svg-path-editor/

Paste your path into the editor.

4. Scale it down

Scale both X (width) and Y (height) to 0.1

0.1 ≈ ~100px range (rough estimate)

Zoom in until you can clearly see coordinate numbers

Tips:

  • Always move the shape close to the top-left corner
  • This prevents weird offset issues in CSS
  • Expect to adjust this multiple times

Disclaimer:

Getting it right on the first try is rare. Trial and error is normal. Don't give up! <3

Part 3: Using It in CSS

5. Apply the clip-path to a pseudo-element

Do not apply clip-path: path() directly to an <img> — browser support can be inconsistent.

Instead, use a pseudo-element on a container.

.container {
  position: relative;
}

.container::before {
  content: "";
  position: absolute;

  width: 180px;   /* must be explicit */
  height: 180px;  /* must be explicit */

  background: #8b5cf6;
  z-index: 1;

  clip-path: path(
    "M23.36 172.32c-3.04-1.6-5.52-4.8-5..."
  );
}

Positioning & Adjustments

You can move or tweak it with:

top: 0;
left: 0;

/ and /

bottom: 10px;
right: 20px;

If it’s slightly off and you don’t want to reopen the editor:

transform: scale(1.2);

(Yes, this is the lazy-but-valid approach.)

Common Problems & Fixes

  • Shape is invisible
    • Width/height missing
    • Path scaled too small
    • Background color missing
  • Shape is cut off
    • Path not near top-left in editor
    • Container too small
  • Looks warped
    • X and Y scaled unevenly
    • SVG had transforms you didn’t fully neutralize
Edit

Pub: 11 Jan 2026 23:12 UTC

Edit: 11 Jan 2026 23:30 UTC

Views: 336