Hacker News Reader

Comment by dsmmcken | Hacker News Reader

> I wanted to come up with a flashlight that really works for all elements on the page, but I don't think any combination of DOM elements and mix-blend-modes would do it.

I think CSS clip-path might be a solution like you want but without the canvas. Just tried it out here to confirm: https://codepen.io/dsmmcken/pen/BaJqrwX

View on HN

You could also use a mask, which would allow things like fuzzy edges. As a starting point, you can replace the clip-path in your example with this:

  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200%25" height="200%25"><circle r="160" cx="50%25" cy="50%25" fill="white"/></svg>') calc(var(--x) - 100%) calc(var(--y) - 100%) / 200% 200%;

This doesn’t seem to work below one screenful of content, though, and I’m not sure why and don’t intend to spend the time required to make it work. The SVG size technique I’ve used is a bit dodgy (in a fun kind of way) anyway. You’d probably be better to have a separate `position: fixed` element that sits on top of everything, and apply the mask to it.

Wow! That's perfect, thanks for your help. I'll add that to the article soon.

Reply on news.ycombinator.com