- From: Andrew Bone via GitHub <sysbot+gh@w3.org>
- Date: Fri, 15 Dec 2023 14:45:22 +0000
- To: public-css-archive@w3.org
I was thinking of using an `::after` that takes the x and y of the mouse and draws a triangle to the target, with a delay on the triangle updating. Though I imaging triggering paint on the after would be heavy, so if there is a native solution in the works that would be way better (and flee like less of a hack).
___
As for syntax it almost feels like this should be wrapped in with anchor somehow.
```css
div {
/* Coordinates that indicate the center of the element */
anchor-name: --pointer;
background: transparent radial-gradient(25vw 25vw at calc(((anchor(--pointer pointer-x) / 2) + 0.5) * 100%)
/* ❌ Values need to be manually divided by 2 and be offset by 0.5 due to origins of background (which uses PCS) not aligning with XYCS */
calc((-1 * (anchor(--pointer pointer-y)/ 2) + 0.5) * 100%),
lightblue,
rebeccapurple) no-repeat 0 0;
transform: rotate3d(anchor(--pointer pointer-y),
/* ✅ Values can be used directly */
anchor(--pointer pointer-x),
0,
-15deg);
}
```
(Which after writing this I see is already discussed in #8639)
--
GitHub Notification of comment by Link2Twenty
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6733#issuecomment-1857996303 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 15 December 2023 14:45:24 UTC