The five best design links, every weekday

Domain: codepen.io

codepen.io

Most Hearted Pens of 2023

The most popular CodePen code snippets of 2023.

codepen.io

The Most Hearted CodePens of 2022

The number itself is how many people hearted the Pen, but the ranking takes into account heart-levels as well.

codepen.io

The Caretaker

A pure CSS Horror / Puzzle game

codepen.io

Mandala Maker

Make mandalas and other geometric shapes in your browser.

codepen.io

Responsive CSS Grid - Books

A "product grid" demo using - CSS Grid - Clip Path - Conic Gradient, and more.

codepen.io

Compound grid generator

Enter the number of columns for each of your grids, and they’ll be magically merged into a compound grid.

codepen.io

Flowfield

Beautiful generative art by Sikriti Dakua.

codepen.io

Flowing Image - How To

A demo break down using P5.js.

codepen.io

Walkers - How to

A step by step tutorial on generating a procedural animation.

codepen.io

Top Pens of 2019

CodePen's most hearted pens of the year.

codepen.io

Color this sofa!

SVG + Blend Mode trick.

codepen.io

Calculating PI Using Raindrops

Dividing the number of raindrops that hit the circle and the square and multiplying the result by 4 gives an approximation to PI.

codepen.io

Animated Verbs

Animating characters in verbs to represent their action.

codepen.io

Procedurally Generated CSS Numbers

jQuery + CSS Vars to create generative numbers using Sarah Drasner's CSS grid generator for cell drawing.

codepen.io

30-50 hogs

A CSS-only hog-shooting game.

codepen.io

CSS Tic-Tac-Toe... now with AI!

Tic-Tac-Toe game developed using only HTML and CSS, without any JavaScript.

codepen.io

Only CSS: 3D Scan

A CSS-only interactive animation.

codepen.io

QUIZ: Well aimed? How well do you know CSS selectors?

Your task is to decide whether a given selector targets all and only the elements marked on the right.

codepen.io

Pure CSS Still Life

Water and Lemons.

codepen.io

Canvas Times Tables

Created for the February 2019 CodePen Challenge.