Clip Path Arc
Source on GitHub

Version: 0.2

Take an existing element and create a clip path for it, in the form of an arc, part of a circle or donut shape.

<clip-path-arc>
  <div radius-outer="100" radius-inner="60" start-angle="10" end-angle="120"></div>
</clip-path-arc>

Slots

default

Each element inside the web component is a default slot. You need to set the attributes for each one to control the radius and the angles of the arc that will be used to clip around the part of the element you want to remain.

Attributes

radius-outer	The radius length of the outer part of the arc. The value is a percentage amount, between 0 to 100.
radius-inner	The radius length of the inner part of the arc. The value is a percentage amount, between 0 to 100.
start-angle	The angle from which the arc starts from. The value is in degrees, between 0 and 360.
end-angle	The angle to where the arc ends. The value is in degrees, between 0 and 360.

Properties & Functions

update

After you have changed any of the attributes on the default slots, call this function to recalculate the clip paths.

Examples

Color Backgrounds

In this example we have 3 elements with different background colors. We use the clip path arc to remove all of the element except the parts within the arc clip path.

<clip-path-arc style="width: 20rem; height: 20rem;">
  <div
    style="background-color: darkorange;"
    start-angle="20"
    end-angle="135"
    radius-outer="100"
    radius-inner="80"></div>
  <div
    style="background-color: lightblue;"
    start-angle="140"
    end-angle="235"
    radius-outer="100"
    radius-inner="80"></div>
  <div
    style="background-color: gold;"
    start-angle="240"
    end-angle="15"
    radius-outer="100"
    radius-inner="80"></div>
</clip-path-arc>

Image Backgrounds

Here we have 3 image elements. Only those parts within the arcs clip path are shown.

<clip-path-arc style="width: 20rem; height: 20rem;">
  <img
    src="fish.jpg"
    start-angle="20"
    end-angle="140"
    radius-outer="100"
    radius-inner="40">
  <img
    src="sea.jpg"
    start-angle="140"
    end-angle="240"
    radius-outer="90"
    radius-inner="50">
  <img
    src="clouds.jpg"
    start-angle="240"
    end-angle="20"
    radius-outer="80"
    radius-inner="60">        
</clip-path-arc>

Interactive Images

This example shows how to make the clipped elements interactive. Press the arc slices to see them change in color and size. It is all placed over a background image and given a drop shadow.

<style>
  .water {
    position: relative;
    width: 20rem;
    height: 20rem;
  }
  .water > img {
    width: 100%;
    height: 100%;
  }
  .water > clip-path-arc {
    position: absolute;
    inset: 0.25rem;
    filter: drop-shadow(0 0 8px rgb(0 0 0 / 70%));
  }
  .water > clip-path-arc > img {
    cursor: pointer;
  }
  .water > clip-path-arc > img:hover {
    filter: grayscale(60%);
  }
  .water > clip-path-arc > img:active {
    transform: scale(0.9);
    filter: grayscale(60%);
  }
</style>

<div class="water">
  <img src="drought.jpg">
  <clip-path-arc>
    <img
      src="fish.jpg"
      draggable="false"
      start-angle="20"
      end-angle="135"
      radius-outer="100"
      radius-inner="40">
    <img
      src="sea.jpg"
      draggable="false"
      start-angle="140"
      end-angle="235"
      radius-outer="90"
      radius-inner="50">
    <img
      src="clouds.jpg"
      draggable="false"
      start-angle="240"
      end-angle="15"
      radius-outer="80"
      radius-inner="60">        
  </clip-path-arc>
</div>

Clip Path Arc Source on GitHub