This week: Checkbox Styles, Emojifying Notion, and SVG Path Animation

Build More Accessible Websites

Are you testing for accessibility? If not, your website could be inaccessible to people with disabilities. Find & fix accessibility bugs with the axe DevTools browser extension.

#CodePenChallenge: Fractals

Fractals were the theme for week three of the January "Generative Art" challenge. Flip through our collection of Pens from the third week, including leimapapa's fractal castle "Battlements".

Netlify CLI makes local dev painless

Spin up a project in seconds! Run serverless functions & test your logic before deploying globally all from your command line terminal.

The Lonely Claw

In Amit Sheen's strangely affecting pure CSS animation, a lonesome claw plays ball by itself, forever. Check out the HTML and CSS panels for a glimpse at how it was done.

Bubblegum on hover

A fun, gooey hover animation built with GSAP & SVG by natszafraniec. Hover anywhere to merge the bubbles together.

Super Thread

James Hancock demonstrates "how to animate an SVG path using JavaScript (without GSAP)" in this striking animation inspired by Charlotte Higgins' book "Red Thread: On Mazes and Labyrinths".

Styling native checkboxes using pseudo-elements

"Native checkboxes created using input type=checkbox don't offer an intuitive way of styling, but we can use appearance:none to hide the default checkbox and use pseudo-elements to display our custom styles. In this example, I use mask-image to display an inline svg using ::after. I also make use of browser colors wherever possible to provide support for the built in light and dark themes." From MrRoboto.

CSS 3D Donut

S. Shahriar bakes up a scrumptious CSS donut with lots of options to make it just the way you like it, including a "gradient colors" mode to create a rainbow donut.

VHS Stuck

Sophia Wood answers the #genuary2022 prompt "VHS" with this retro glitch animation built with p5.js.

Updating color darkness with 'Screen' blend mode

"When you are using a 'Screen' blend mode on your animation but it is too white, darken your colour palette until you find the good result. chroma.js is very useful for it". From Louis Hoebregts.

10,000 CodePen Followers!

CodePen legend Chris Gannon celebrates a follower milestone with this cheerful animation in his inimitable style. Drop into the comments to say cheers!

emoji_cover

Adir-SL built a tool to make Notion dashboards more fun with emoji! Pick up to two of your favorite emoji and a background color to generate an image you can save for all of your emoji header needs.