How to use clip-path with SVG

You can clip shapes with a mask to hide parts of the shape you don’t want to see. This ornament is the same as we drew on the first day, except it has a motif on its side defined as a polyline. By default, the polyline wouldn’t match the edge of the circle. Without clipping, this motif would look like this:

We use clip-path here to ensure the motif fits perfectly on the ornament. The clip-path is defined in the definitions section.

Here we define a clipPath with an id. The content of this clip-path is a circle that matches the size of our ornament. Then we use it to clip the polyline, by setting its clip-path property.

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <clipPath id="ball">
    <circle cx="0" cy="20" r="70" />
  </clipPath>

  <circle cx="0" cy="20" r="70" fill="#D1495B" />

  <polyline
    clip-path="url(#ball)"
    points="-120 40 -80 0 -40 40 0 0 40 40 80 0 120 40"
    fill="none"
    stroke="#9C2D2A"
    stroke-width="20"
  />

  <circle
    cx="0"
    cy="-75"
    r="12"
    fill="none"
    stroke="#F79257"
    stroke-width="2"
  />
  <rect x="-17.5" y="-65" width="35" height="20" fill="#F79257" />
</svg>