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 (
    <div className="relative w-full h-full min-w-20">
      {items?.map((item, index) => (
        <div className="absolute w-full h-full" key={`${index}`}>
          <div
            className="w-full h-full transition-all duration-1000 ease-in-out"
            style={{
              backgroundColor: item.color,
              clipPath: `polygon(${item.polygon})`,
              transitionDelay: `${index * 15}ms`,
            }}
          />
        </div>
      ))}
    </div>
  );
}

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.