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

A pure CSS Horror / Puzzle game

Make mandalas and other geometric shapes in your browser.

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

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

Beautiful generative art by Sikriti Dakua.

A demo break down using P5.js.

A step by step tutorial on generating a procedural animation.

CodePen's most hearted pens of the year.

SVG + Blend Mode trick.

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

Animating characters in verbs to represent their action.

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

A CSS-only hog-shooting game.

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

A CSS-only interactive animation.

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

Water and Lemons.

Created for the February 2019 CodePen Challenge.

These are the most hearted Pens of 2018.