Implementing a Fragmented Shard Effect with CSS clip-path and JavaScript

One day a designer asked the author to recreate a website effect that looked like fragmented shards. After opening the page in the browser’s developer tools, the author discovered many shard-wrap elements that each cover their parent element.

By hiding some of these elements with display: none; the visual layout changes, revealing that the core technique relies on clip-path: polygon(); . The clip-path property defines a polygon inside a div , effectively cutting the element into a custom shape.

The polygon is defined by a series of percentage coordinates, for example (9.38%,59.35%), (13.4%,58.95%), (9.28%,61.08%). The shape is then filled with the element’s backgroundColor to produce a colored shard.

To extract the data automatically, the author wrote a small JavaScript function that iterates over all elements with the class shard , reads their computed clipPath and backgroundColor , strips the surrounding polygon() text, and returns an array of objects containing polygon and color :

function getShardDomData() {
  const doms = document.getElementsByClassName('shard');
  const list = [];
  for (let i = 0; i < doms.length; i++) {
    const style = window.getComputedStyle(doms[i]);
    let str = style.clipPath.replace('polygon(', '').replace(')', '');
    list.push({
      polygon: str,
      color: style.backgroundColor,
    });
  }
  return list;
}
console.log('res: ', getShardDomData());

Using this data, a reusable React component called ShardCom is built. The component receives an array of items (each with color and polygon ) and renders a stack of absolutely positioned div elements. Each shard uses Tailwind CSS classes for a smooth transition and a calculated transitionDelay to create a staggered animation effect:

export type ShardComItem = { color: string; polygon: string };
export type ShardComProps = { items: ShardComItem[] };
export default function ShardCom({ items }: ShardComProps) {
  return (
{items?.map((item, index) => (
))}
);
}

The demo code is hosted on Juejin (link provided) and can be cloned for experimentation.

Beyond reproducing the existing effect, the author also created a simple drawing board that lets designers drag points to generate custom clip-path polygons. The board’s implementation is described in a follow‑up article.

In conclusion, the tutorial presents a practical way to dissect and rebuild a complex visual effect using standard web technologies, though the final implementation is a simplified version that lacks some of the original site’s animations.