That is, we need to add:
i*2*α_dx

If k > 1, then we need to add half a turn as well, that is:
round(down, k)*180°

Adding these to the angular progress along the edge, we get the conic-gradient angle producing a point that moves at constant speed along the perimeter.

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

If progress at the bottom left corner (= at half the perimeter starting from the top right corner) is 1, then progress at the bottom right corner is the height 100cqh over half the perimeter (one height 100cqh plus one width 100cqw):

f = 100cqh/(100cqh + 100cqw)

Dividing lengths is supported by Safari & Chrome + we have a Firefox fallback https://frontendmasters.com/blog/count-auto-fill-columns/#getting-the-number-of-columns

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

Anyway, what we want to animate here linearly isn't a conic-gradient() angle, it's the progress around the perimeter.

This is k, going from 0 to 2. When k is 0, we're at the top right corner. When it's 1, we're at the bottom left corner, having gone across half the perimeter.

What about the progress value at the bottom right? We'll be calling that f, but how much is it?

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

Missed this, made on the 1st of Jan on @codepen:

✨ Sliding border glow on hover for beveled cards, heavily commented https://codepen.io/thebabydino/pen/EayVXKj

Trivial if we have `corner-shape` support & even simpler with `border-area`. But here it's cross-browser.

Detailed explanation of the Maths behind on Ko-fi/ Patreon. This way, you get to both become smarter and support my work so I can continue coding.

#CSS #Maths #cssMaths #cssGradient #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment