The
All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

September 23rd: Patterns, Pizza, and Pirouette

Background Pattern

This grid of "A"s by Ricardo Oliva Alonso is attractive on its own, but the hover effect with the staggered delay for each letter is a very satisfying watch.

Feature Flag Management Made Simple

Easily manage and deploy features across different users or segments to get instant feedback on how customers are using it in production.

HSL Slider

Inspired by a section of the book "Refactoring UI" recommending HSL as a color format, Jhey makes use of some React and CSS variables to make this cute color picker. Slide it left-to-right for hue, and use the dials above and below to adjust the saturation and lightness.

Paper Pirouette

You can always count on the @keyframers (David Khourshid and Stephen Shaw) to build out super fancy animations and teach us as they are doing it. This past week was this 3D isometric flying paper animation they did with CSS alone.

Build Sites on WordPress.com

Join the 34% of the internet already using WordPress and build your site there, where you won't have to worry about security, spam, upgrading software, and all that technical debt. You can start your blog, build a portfolio, or even open a store!

Antsy Toggles

Toggles that have a bit of anxiety from Daryn St. Pierre. The blobs are built from a couple of pseudo-elements with animated scaling transforms.

Earthchan

The Earth is most definitely not flat! This is Natalie's shout-out to the climate strikers.

UFO

Inspired by a Dribbble shot by Jemka Gasanov, this is Conner's nod to all the Area 51ers this week. We still don't know what's out there, and maybe that's good for all our imaginations and creative sparks. This was drawn with just HTML elements and CSS shaping them.

Variable Google Fonts

Nathan Williams shows us that Google Fonts is going to start offering variable fonts, and in fact already is using a special URL format. Best for experimental work while this is all still in beta.

Noisy SVG Lines

Johan Karlsson with some generative art. Click to generate a new pattern, and you can download them if you'd like.

Eggs

Irresistible little chicks from Adir. The eggs shape come from a very fancy border-radius value, and look solid especially with that inner shadow, but they break apart thanks to a clip-path: polygon() and animation. Even the blinking chicks are created with CSS.

Pinball-like Sparkles

Dan Zen is always showing us the cool powers of ZIM. In this case, the Pen is a re-make of an incredibly lovely Pen by K-T, but in 1/5 of the code thanks to some built-in powers of ZIM like physics and particle emissions. Thank god for learning JavaScript throwing sparkly showers of rainbow stars.

Navigation bar with circle

A Dribbble shot by Ketan turned into an interactive UI by Zed Dash. It's certainly unexpected to see that knocked out circle area move along the bar. Looks like the trick is that it is the whole area (circle and knockout area) is one SVG shape that moves together. A CSS drop-shadow filter makes it look extra convincing.

Wonderland

There is something nicely Dr. Seuss-y about this programmatic canvas drawing by pimskie. SimplexNoise is the JavaScript library at work, and the color palette is right up top if you want to play with the colors.