Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
SVG✨ Premium

SVG Clip Path

A block cut into a five-pointed star by a real SVG clipPath, tilting and growing on hover; gradient, text or photo inside.

SVGClip-pathShape

Updated

SVG Clip Path — preview ▶ Free account: live preview + 1 free effect

This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. SVG has 30 effects, including 3 free. Explore the category →

View in catalogue

3 usage examples

Star-shaped “New” badge on a wooden toy card — SVG Clip Path example 1

① Star-shaped “New” badge on a wooden toy card

WhenA wooden toy shop grid: three cards (train, stacking tower, rocking horse). The tower is just out: a 92 px orange star reading “New” sticks out of its top-right corner and tilts when the card is hovered.
WhyA star is the expected sign for something new; cut out of the gradient it stays crisp at any size. The motion only comes when that card is hovered: the grid stays calm.
Settings--stc-size:92px, --stc-fill:linear-gradient(135deg,#f59e0b,#ef4444), --stc-page:transparent, --stc-height:0px; label at 13 px in the scene CSS. The scene script adds stc-on to the star on the card's pointerenter and removes it on pointerleave.
Volunteer of the month portrait cut into a star — food bank — SVG Clip Path example 2

② Volunteer of the month portrait cut into a star — food bank

WhenA food bank's “The team” page: on the left Mireille's portrait in a 184 px star, on the right “Volunteer of the month · October”, her name, her quote and two figures (parcels packed, hours given). On hover the star turns slightly the other way.
WhyThe star shape says “in the spotlight” with no medal or banner. The photo fills the whole square before the cut: the face stays in the centre, in the solid part of the star.
Settings--stc-size:184px, --stc-tilt:-8deg, --stc-grow:1.06; an <img alt=""> instead of the label (portrait drawn in SVG here, a photo in production) — the name is already written next to it.
Stars earned at the end of a story — children's reading app — SVG Clip Path example 3

③ Stars earned at the end of a story — children's reading app

WhenA reading app: a short text about a fox, a question with the right answer ticked, then three grey stars and the “I'm done!” button. Each press turns the next star gold; it tilts and grows for a moment, and the counter moves to “1 of 3 stars”.
WhyA child instantly understands a star lighting up. The little jump (tilt + scale, then back) marks the reward moment without a long animation.
Settings--stc-size:62px, --stc-fill:#3a3f4b (empty star), --stc-tilt:18deg, --stc-grow:1.25. The scene script switches --stc-fill to the gold gradient and adds stc-on for 650 ms; with no click it earns a star every 1.1 s for the demo.

How it works

The HTML holds a small invisible SVG (width="0" height="0") whose only job is to define a <clipPath>: a 10-point polygon, the 5 tips and 5 notches of a regular star. Its coordinates run from 0 to 1 (clipPathUnits="objectBoundingBox"): the star fits the box of the clipped element, whatever its size.

The .stc-star block is a square (aspect-ratio:1, 200 px by default) filled with a pink → magenta gradient and cut by clip-path:url(#…). Everything inside is cut with it: the centred word “Star”, or an <img> filling the square (object-fit:cover). On mouse hover, on focus of a link placed inside the star, or with the stc-on class, it tilts 15° and grows 10% over 0.3 s.

The small script gives each copy its own clipPath id (fx-0623-star- followed by random characters) and writes it into its star's clip-path. Two stars on one page never depend on each other, even when the first sits in a closed tab. Without JavaScript the fixed fx-0623-star id in the HTML is the default.

Accessibility

  • Hidden SVG: the definition SVG has aria-hidden="true" and focusable="false"; it draws nothing and is not announced.
  • Readable content: the text inside the star is a real <span>. A photo placed inside keeps its alt; leave it empty when the person's name is written right next to it, as in the food bank example.
  • Keyboard and touch: the star itself is not a control. If it contains a link or button, keyboard focus triggers the same tilt (:focus-within). Touch has no hover: the :hover rule is limited to devices that have one (@media (hover:hover)) so the star does not stay tilted after a tap; add stc-on from JS if the tilt should follow a tap.
  • Reduced motion: under prefers-reduced-motion: reduce the transition is removed; the star switches angle at once, with no animated rotation.

Browser compatibility

clip-path:url() to an SVG <clipPath> on an HTML element (-webkit- prefix included), aspect-ratio, inset, @media (hover:hover). Measured in Chromium, Firefox and WebKit (Playwright): star cut-out (removing the clip changes 14.7% of the image), tilt on hover, two copies with distinct ids, lone copy shown when the first one is hidden, 390 px, reduced motion.

Chrome 88+✓ Full (measured)
Firefox 89+✓ Full (measured)
Safari 15+✓ Full (measured in WebKit)
Edge 88+✓ Full (Chromium engine)
Safari iOS 15+✓ WebKit engine, not verified on a real device
Chrome Android 88+✓ Full (Chromium engine)

Without aspect-ratio (browsers older than those listed) the block loses its height: give it a height equal to --stc-size. If the clipPath does not apply, the whole square shows, content included.

The code

HTML structure to paste into your page (the CSS + JS come with your purchase):

index.html — structure 
<div class="fx-0623-root">
  <svg class="stc-defs" width="0" height="0" aria-hidden="true" focusable="false">
    <clipPath id="fx-0623-star" clipPathUnits="objectBoundingBox">
      <polygon points="0.500,0.048 0.612,0.393 0.976,0.393 0.682,0.607 0.794,0.952 0.500,0.739 0.206,0.952 0.318,0.607 0.024,0.393 0.388,0.393"/>
    </clipPath>
  </svg>
  <div class="stc-star">
    <span class="stc-label">Star</span>
  </div>
</div>

One-time payment, no subscription — the code is yours forever

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
Size (CSS — --stc-size) 200px Side of the clipped square; the star follows and keeps its proportions.
Fill (CSS — --stc-fill) linear-gradient(135deg, #f43f5e, #ec4899, #d946ef) Any background value: colour, gradient, image. An <img> placed in .stc-star fills it too.
Tilt (CSS — --stc-tilt) 15deg Angle on hover; a negative value turns the other way, 0deg keeps only the growth.
Growth (CSS — --stc-grow) 1.1 Scale on hover. Leave room around it: at 1.25 a 200 px star takes 250 px.
Duration (CSS — --stc-speed) .3s Transition time, both ways.
Active state without hover (stc-on class on .stc-star) absent Same tilt as hover, set from JS: tap on touch screens, reward, hover on a parent.
Block background and height (CSS — --stc-page, --stc-height) #0a0a0f / 300px transparent and 0px to drop the star into a card, a badge or a row of icons.
Shape (HTML — points of the <polygon>) 5-pointed star Coordinates between 0 and 1. For a slimmer star, move the 5 notch points closer to the centre (0.5, 0.5).

FAQ

The clip-path points to an id that does not exist on the page: definition SVG left out when pasting, or id edited by hand. Keep the .stc-defs SVG inside the root; the script links each star to its clipPath itself.
Yes: replace the <span class="stc-label"> with <img src="photo.jpg" alt="…">. It fills the square (object-fit:cover), then the whole thing is cut. Keep the subject centred: the tips only keep thin strips of the picture.
On a touch screen the star stays upright: the hover rule only applies to devices whose pointer can hover. For a tilt on tap, add and remove the stc-on class in a pointerdown listener, or put a link inside the star: focus has the same effect.