Another year, another tree. I also promise I thought of this before the Apple TV logo came out
https://codepen.io/editor/danwilson/pen/019af433-432e-77fd-aeee-78017d0cefd3
| Web | https://danielcwilson.com |
| CodePen | https://codepen.io/danwilson |
| Chalk Art | https://chalk.livelyline.com |
Another year, another tree. I also promise I thought of this before the Apple TV logo came out
https://codepen.io/editor/danwilson/pen/019af433-432e-77fd-aeee-78017d0cefd3
264 gradient lines, rotated back and forth between 18deg and -18deg (around almost-at-the-end-of-one-side of each line)... resulting in some sort of tree and/or tassle:
Weirdly stressful day with wondering where we should try to be for the eclipse as cloud forecasts only got worse each hour leading up.
Ultimately lucked out and got several pockets for the partial and light enough clouds to see during the totality. Wild.
New post about new math constants in CSS
tl;dr: adding pi to CSS is cool because it makes radians cool (and more useful than before)
After a week of conflicting bundler issues transforming CSS in mysterious ways, the fix was to remove the default transformers and release the “CSS as is”
Breath of fresh air.
CSS math functions... now with more powers, roots, and other exponential friends
Interop for CSS is lovely.
In 2023, Motion Path went from being kinda supported for a subset of path types to being implemented across shapes and even the polar coordinates piece that got merged into the spec back in 2016.
New blog post: “How to use a Custom Easing Function with the Web Animations API (WAAPI)”
So, you’ve found (or written) a custom easing function. Great! But how do you use that with the Web Animations API? Turns out it’s more difficult than you’d first expect it to be …
🔗 https://www.bram.us/2024/01/12/waapi-custom-easing-function/
All right... ended up making a second holiday tree this year on #codepen, feeling the neon right now for some reason...
'tis the season for an excessive holiday animation, this year with more 3D transforms and a dash of `composite: add`: