Squids, Splashes, and Spirals

There is some incredible visual work this week to look at. From literal flowy arms wanting to give you a high five to neon tentacles bursting through space to a nanny with a nest of blinking critters as a hat. The sheer creativity of the CodePen community is a thing to behold. But of course, we have people experimenting with interesting technology and sharing that as well, from shaders to color fonts to combining SVG filters. Don't miss a single thing this week.

WWPº153 "GRIIID" Generator

Antoinette Janus says this was inspired by Martin Neumann's 'WWPº153 "GRIIID"' shot on Dribbble and uses the library PleaseJS to generate colors and palettes.

A Case for CSS Variables

Jody LeCompte introduces the concept of CSS variables including some demo Pens that show off the idea in clear demos.

Pure CSS Moustached Nanny

An absolutely incredible animated scene from Julia Muzafarova. Make sure to check out Julia's profile for other mindbending illustration work done entirely in CSS.

How to get better at writing CSS

Thomas Lombart goes over things like using variables in preprocessors, methodologies like BEM, file organization, and bonus stuff like live reloading CSS changes.

Northwestern MS in Info Design+Strategy

Learn to use research and analytics to drive communication strategies and to translate complex data into compelling visuals and narratives.

Vine Squids

Wonderful colors and activity in Jacob Foster's vines. Interesting to see how it was inspired by a Gerard Ferrandez, but the code was originally fork of another of Jacob's Pens that is only very loosely similar.

Live Coding MIDI Controller

Part 6 of Jake Albaugh's Tone.js series, this time using a physical MIDI controller device to modify a Tone.js PolySynth.

Tilt.js

Flat looking buttons by Joshasusual come alive with Tilt.js when you hover over them, giving a fancy thick 3D look about them complete with lighting.

CSS-Grid Gantt Chart

CSS Grid makes it easy to span elements across flexible columns by simply specifying the start and end column numbers. Very nice little design here by Phil.

Manage your projects & tasks with ease

monday.com is a powerful tool for project and team management, communications and collaboration.we keep it all in one place.

Incredibles 2 Logo Animation (CSS)

Andy Pagès was inspired by the Incredibles 2 trailer and recreated the logo animation in CSS.

🙌🏻 Catch these hands

These wacky hands by J Scott Smith wiggle wobble their way both toward and away from you, it seems. They are like those creepy creatures the put up at oil change places with the fan blowing under them.