August 17th: Pinwheels, Pups, and Perlin Noise
Learn GraphQL with React
Take your API skills to the next level. Start building your apps with React and Contentful's free GraphQL API today.
"Generative wallpaper patterns for floral enthusiasts" from Scott Weaver. Click to generate a new field of bright flowers.
The Grid: CSS Text-Based Animation
CurleyWebDev's live coding speedrun shows how to create a retro grid graphic with CSS, and demonstrates some handy Emmet snippets!
#CodePenChallenge: The Rain (Supa Dupa Fly)
For the 2nd week of the music video palettes color challenge, we cruised into the 90s with Missy Elliott's "The Rain (Supa Dupa Fly)". Check out the Pens from week two, including Ryan Mulligan's "Supa Dupa Fly Hover".Sponsored:
Jetpack, the WordPress plugin for your self-hosted WordPress sites, can make these search experience on your site dramatically better. We use it on the CodePen documentation to make search have extremely relevant, instant results in a great UI.
CodePen Radio #280: Planning Big Projects
Marie, Klare, and Dee talk about how Klare leads CodePen through project planning.
A Practical Look at Social Icons
"I've seen this done a million different ways, but here's how I normally implement social icons. An unordered list element with links & inline SVGs to allow for hover effects on the fill property. Nothing fancy, just functional, easy to understand social links." From Geoff Dusome.
Only CSS: Moon Clip
Yusuke Nakaya clips out a quarter moon shape to let a glittering starfield shine through in this lovely bit of CSS.
SVG Tip Of The Day #17 - Animating viewBox
"By animating the viewBox of your SVG, you can create a camera effect 🎥 x & y, make the camera moves. Width & height, make the camera zoom." Part of a great series of SVG tips from Louis Hoebregts.
London Bus (Pure CSS)
Yoav Kadosh translates Ekaterina Ushakova's illustration into CSS. "Every additional detail introduces another challenge, and CSS offers a variety of ways to overcome them."
Perlin Noise Nebula
Lea Rosema conjures a nebula with some help from Three.js. Spend some time with it and watch it gradually change over time.
Custom Cursor - Circle Follows The Mouse Pointer
There's a lot of fun stuff going on with Cojea Gabriel's custom cursor. Try hovering the image from different angles and watch how the cursor squishes and expands.
Mechanical Number Counter