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.

January 20th: Patterns, Projects, and Pulses

SVG Pattern Doodler

"Another simple algorithm which draws patterns and doodles into a svg element. Every time a new work of art is created. Watching is fun. You can save your exclusive work of art on your computer. Play with the values of the variables to create a more independent work of art." From Niklas Knaack.

Serverless Now Became Code-less

Tangram Memory Game

Paulina Hetman's beautiful memory game features animated tangram animals, symbols, and shapes. Click a square to start playing!


Adam Kuhn takes an ordinary email signup form on a wild ride with Squigglevision in this adventurous Pen. Check out the Pen description for an in-depth account of how it was all made.

#CodePenChallenge: Full-Page Navigation

For week two of the January #CodePenChallenge, we worked with full page navigation. Check out the Pens from the challenge, including Olivia Ng's mega-menu "E-Commerce Navigation".

CodePen Radio #251: Marketing

It's January, and that means Chris and Marie are thinking about marketing (again). In this episode we talk about the challenges of marketing and user education for a complex app like CodePen.

All Projects - #100 of #100Days100Projects

Florin Pop set a personal challenge to create 100 projects in 100 days, and this is the result! Scroll through to see the huge variety of work — everything from practical UI pieces to playable games. Congrats Florin!

Product Card - Three JS

Ricardo Oliva Alonso takes inspiration from a Dribbble shot by Ishu Subedi to create a futuristic animated product card with Three.js.

Box Model

Adam Argyle takes you back to basics with this eye-catching explanation of the CSS box model.

Mobile View Slider | with Swiper

"A little mobile view slider screen. I got my inspiration from some iOS app slider elements and tried to get this into a web-screen. I used the slider-framework: 'swiper'." From Max Kobus.

Pure CSS loader #14/ 2020 - Pulse

Ana Tudor continues a series of intriguing loaders with "the shape blobbing technique plus a bit of mix-blend-mode trickery, plus transforms on the individual items and one of their pseudos. And of course, relies heavily on CSS variables."

Vue.js All-In-One Range & Number Input

Slide the range input or type in a value to rotate the pinwheel in this interactive Pen coded by Viesturs Marnauza, from a design by Līva Raita.

Waves (SVG)

Kevin Levron uses VueJS and simplex noise to create animated SVG paths in this tranquil Pen. Click on the waves to change the color scheme.

An Event Apart

To design a better web experience, attend a better-designed web conference. An Event Apart is three days of design, code, and content taught by absolute masters—the people who shape our medium.