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>
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. |
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. |
update | After you have changed any of the attributes on the default slots, call this function to recalculate the clip paths. |
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>
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>
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>