127 Followers
37 Following
58 Posts
Getting back into public/social web discussions after a couple years of focusing on sidewalk chalk art
Webhttps://danielcwilson.com
CodePenhttps://codepen.io/danwilson
Chalk Arthttps://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

Tree: Rainbow Glitch (#dzy)

A code demo by Dan Wilson created on CodePen

CodePen

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:

https://codepen.io/danwilson/pen/LEPbdYY

Tree 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)

https://danielcwilson.com/posts/mathematicss-constants/

The New CSS Math: pi and other constants

New math constants and functions are coming to CSS... now with more mathematical constants

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

https://danielcwilson.com/posts/mathematicss-powers/

#css #CodePen #math

The New CSS Math: pow(), sqrt(), and exponential friends

New math constants and functions are coming to CSS... now with more powers and roots

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.

https://codepen.io/danwilson/pen/NWJYxzG

#css #CssMotionPath #MotionPath #CodePen

Animating with offset-path: ray()

...

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/

How to use a Custom Easing Function with the Web Animations API (WAAPI)

So, you’ve found a custom easing function defined in JavaScript. Great! But how do you use that with the Web Animations API (WAAPI)? Turns out that’s more difficult than you’d first expect it to be.

Bram.us

All right... ended up making a second holiday tree this year on #codepen, feeling the neon right now for some reason...

https://codepen.io/danwilson/full/gOqVbaV

Neon Tree

...

'tis the season for an excessive holiday animation, this year with more 3D transforms and a dash of `composite: add`:

https://codepen.io/danwilson/full/ExrrJYq

#codepen

Emotional Holiday Tree

_He sees you when you're sleeping_ _He knows when you're awake_ _He knows when you've left a holiday animation involving 3D transforms and `composite: ...