[csswg-drafts] [css-masking] Inverse clip-path (#10445)

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-masking] Inverse clip-path ==
When applying a clip-path it is sometimes wanted to do an inverse clip path to cut out a hole of something. To do that today, you need to get creative with positioning the points in a polygon, as detailed in https://css-tricks.com/cutting-inner-part-element-using-clip-path/ from 2015.

Take this revealing rectangle that opens up from the center, using 4 points in a polygon:

```css
@keyframes clippy {
 from {
  clip-path: polygon(50% 0%, 50% 100%, 50% 100%, 50% 0%);
 }
 to {
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
 }
}
```

To invert that, you need this path which requires 8 points and then animate the 4 inner points:

```css
@keyframes clippy--inverse {
  from {
    clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0%, 50% 0%, 50% 100%, 100% 100%, 100% 0%);
  }
  to {
    clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 0%);
  }
}
```

Demo: https://codepen.io/bramus/pen/gOJXzrq/dda132b7b26b1236da82724053ac1643

For more complicated shapes such as an opening square/rectangle you need 10 points. And for some other shapes like a circle it’s not really possible as that requires script to calculate the inverse path and you’d need a whole bunch of points in order to get a smooth shape.

Ideally, an author would be able to reuse an simple shape – such as a circle – and invert that through other means. Masks for example have `mask-composite: exclude`. Maybe we can have something similar for `clip-path`?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10445 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 13 June 2024 21:04:24 UTC