Creative coding and front-end development playground CodePen has established itself as an amazing community for testing and showcasing HTML, CSS and JavaScript code snippets. It’s both an online code editor and learning environment that enables developers to write and experiment with code right in the browser and see the results as they build. Browsing, forking and playing with so-called “pens” is immensely valuable to understand how they were created and how code works.

CodePen now features the work of more than 1.8 million designers and front-end developers, and it can feel overwhelming to discover the pens that are most useful to you. So, in this article, we round up some of the most inspiring CodePen demos from the last few months. We cover CSS selectors, animating with CSS and SVG, cutting edge features like CSS variables and variable fonts, CSS Grid layouts, JavaScript frameworks and more. One of the big benefits of CodePen is that it’s very visual but the focus isn’t just on eye candy. Most of the pens in this post also come with tutorials, so you can really learn how the effects were created and sharpen your front-end development skills. Let’s get stuck in!

CSS Selectors

1. How well do you know CSS selectors?

See the Pen
QUIZ: Well aimed? How well do you know CSS selectors? by Paulina Hetman (@pehaa)
on CodePen.

Front-end and WordPress developer Paulina Hetman aka PeHaa shares a series of three quizzes around CSS selectors and explains her process of teaching web development. In the example above your task is to decide whether the selector targets exactly the highlighted element. Choosing the right selector and understanding the cascade, inheritance, and specificity is crucial, PeHaa says, as often you need to override existing styles and you don’t have control over the HTML structure.

SVG

2. Animating SVG with CSS

 

See the Pen
Melting Popsicle SVG Animated with CSS / Sass by Hope Armstrong (@hopearmstrong)
on CodePen.

Hope Armstrong, a product designer at Treehouse, has written an article demonstrating why the simple combination of SVG and CSS is appealing and how to make these lightweight, scalable animations! There are various CodePens, including the melting popsicle above, which Hope animated by changing the position of the drops using transform: translate. To make them disappear, she animated the opacity.

3. Figuring out CSS Animation Properties with a Magic Kittencorn

See the Pen
Magical kittencorn by Chen Hui Jing (@huijing)
on CodePen.

Chen Hui Jing builds and animates the unofficial mascot of SingaporeCSS and explains the basics of CSS and SVG animation.

4. Animate a Blob of Text with SVG and Text Clipping

 

See the Pen
Animated blob SVG text clipping effect – Pt. 6 by Zach Saucier (@ZachSaucier)
on CodePen.

Zach Saucier walks us through creating a neat blob reveal animation with SVG and clip-path. To make the colours change for every new set of words as in the example above, Zach used JavaScript (and moved the CSS animation that was hiding the text lines to the JavaScript).

5. Color this sofa! – SVG + Blend Mode trick

 

See the Pen
Color this sofa! – SVG + Blend Mode trick by Kyle Wetton (@kylewetton)
on CodePen.

Kyle Wetton has created an amazing demo that lets you colour a sofa using some smart SVG and CSS blend mode trickery. Take the PNG of an object, save it as a specific size, draw an SVG vector around the section you want to colour change, photoshop this section of the PNG white, and keep the blank space. Stack these in CSS, and set the blend mode of the SVG to multiply, then simply change out the fill colour.

CSS Variables

6. Using CSS Custom Properties to Wrangle Variations in Keyframe Animations

 

See the Pen
Dynamic CSS @keyframes w/ CSS Vanilla by Sandrina Pereira (@sandrina-p)
on CodePen.

In this article over at CSS Tricks, front-end developer Sandrina Pereira explains how CSS keyframes work and how we can enhance them with CSS and a touch of custom properties aka CSS variables. Also see Mauricio Palma’s article on Getting Started with CSS Variables here on the Heart Internet blog as well as Val Head’s post on Animating with CSS Variables, which also includes some ways to combine CSS custom properties and keyframe animations.

7. Dynamic SVG Animation with CSS Variables

 

See the Pen
SVG Animation with Speech Recognition by Lisi (@lisilinhart)
on CodePen.

Lisi Linhart has written a terrific tutorial on how to make an SVG animation with speech recognition that changes colour based on CSS variables and use it alongside animation library GSAP. Also check out Lisi’s developer’s guide to native web animation and watch her Pixel Pioneers talk on Practical Web Animation (and see the slides and CodePens she created for the presentation).

8. Logical Operations with CSS Variables

 

See the Pen
Building compound shape: rotating faces into final position by Ana Tudor (@thebabydino)
on CodePen.

Ana Tudor explores the interesting possibilities of logical operations using CSS custom properties. The article came about because Ana often wished to perform logical operations on switch variables (a variable that’s either 0 or 1, a concept that’s explained in greater detail in this post). Her article explains what calc() formulas we need to use for each logical operation.

9. Animating a Hue around the Colour Wheel with Houdini

See the Pen
HSL Houdini by Dan Wilson (@danwilson)
on CodePen.

In this post, front-end developer Dan Wilson explores how colour interpolation works on the web, looks at our options to animate a hue around a colour wheel, and explains how Houdini gives us a mechanism to do this and use custom properties to animate the hue. Also don’t miss Dan’s article on the power of CSS transforms here on the Heart Internet blog.

Variable Fonts

10. Variable Font Animation with CSS and Splitting JS

 

See the Pen
Variable font animation by Michelle Barker (@michellebarker)
on CodePen.

Michelle Barker explains how she made an animated variable font demo with CSS and JavaScript library Splitting.js and followed it up with another article on how to split text for animations with accessibility in mind. For more Splittling.js demos, check out Ryan Mulligan’s series on animated verbs (Part I, Part II and Part III).

11. Variable font resize on device orientation

 

See the Pen
Variable font resize on device orientation by Mandy Michael (@mandymichael)
on CodePen.

Mandy Michael created this demo which detects the device orientation and updates the variable font weight axis (plus a transform) using the Google Fonts V2 API. Load in debug mode to see it in action and make sure to turn on motion and rotation info in iOS Safari’s preferences to try it out for yourself. Also check out Mandy’s many other variable fonts experiments.

12. Compressa

 

See the Pen
Variable Fonts | Compressa by Juan Fuentes (@JuanFuentes)
on CodePen.

A little bit of fun animating different axes of a variable font by creative developer Juan Fuentes, using JavaScript, CSS 3D and requestAnimationFrame. Learn more about this font at v-fonts.com.

For more on variable fonts, check out Jason Pamental’s introductory guide, Better Web Typography, here on the Heart Internet blog. 

CSS Grid

13. Building a Scrapbook Layout with CSS Grid

See the Pen
Recreating my child’s pre-school scrapbook with CSS Grid by Michelle Barker (@michellebarker)
on CodePen.

Another tutorial by Michelle Barker. This time she writes about her process of recreating her son’s pre-school scrapbook layout with CSS Grid. She even built a compound grid generator, a little tool that’s also available on CodePen. Also make sure to check out Michelle’s three–part article on debugging CSS Grid.

14. CSS Grid: Magazine Layouts

 

See the Pen
CSS Grid: Magazine Layouts by Olivia Ng (@oliviale)
on CodePen.

This CodePen by Olivia Ng showcases a range of layouts that are possible with CSS Grid. Just click ‘Next’ on the top right to see more layouts and be blown away how complex they get. Also make sure to read Olivia’s post on how you can get started with CSS Grid and check out her other CSS Grid experiments.

15. Grid Experiment No. 7

 

See the Pen
Grid Experiment No. 7 by Jules Forrest (@julesforrest)
on CodePen.

Product designer Jules Forrest has been posting some excellent CSS Grid experiments like this one that mimics the menu of New York City cafe Russ & Daughters. It’s a fantastic example of what’s possible with Grid and how print can inspire new layouts on the web.

16. Procedurally Generated CSS Numbers

See the Pen
Procedurally Generated CSS Numbers by Adam Kuhn (@cobra_winfrey)
on CodePen.

Web developer Adam Kuhn created an impressive generative numbers demo with Sarah Drasner’s CSS Grid Generator for cell drawing, CSS variables and jQuery. Type in a number and watch it emerge from a sea of cubes.

17. Find the Rainbow

 

See the Pen
Find The Rainbow by ilithya (@ilithya)
on CodePen.

Creative coder ilithya made a little game with some CSS and plain JavaScript. It’s fully responsive via CSS Grid and Flexbox, and you can play as many times as you like because the rainbow is always hidden in a different place.

State Machines

18. CSS Animations with Finite State Machines

 

See the Pen
(⌐🔴_🔵) Turnable Tables, Part 2 (🔴_🔵¬) | 3D CSS Record Player App | @keyframers 1.18.1 by @keyframers (@keyframers)
on CodePen.

David Khourshid is deeply passionate about state machines, and how they can be used to simplify otherwise complex UI animations and user flows. Check out Turnable Tables, one of the most complex animations David and Steven Shaw have built for Keyframers, their weekly animated collaborative coding live stream, and watch the video to find out how they did it. Finally, also check out David’s introductory guide to finite state machines.

JavaScript Frameworks

19. How To Make an Animated Interactive Vue.js Slider

 

See the Pen
Vue Slider UI Interaction by Henry Desroches (@xdesro)
on CodePen.

This step-by-step tutorial by creative front-end developer Henry Desroches walks you through creating a nice swipe loading effect with a staggered timeline. The fluid animation is built with Vue.js and SCSS for style.

20. Vue.js Fancy Flyout Selector

 

See the Pen
Vue.js Bites: Fancy Flyout Selector by Daryn St. Pierre (@bloqhead)
on CodePen.

Front-end engineer Daryn St. Pierre built a fun flyout interface that leverages the Vue.js transition system to create smooth animations that use cartoonish easings.

21. React Slider with Parallax Hover Effects

 

See the Pen
React Slider w/ Hover Effect by Ryan Mulligan (@hexagoncircle)
on CodePen.

Ryan Mulligan (who created the excellent animated verbs, see above) has written a tutorial to explain how to create a slider/carousel with React. The post dives into the details of the slider’s components, the dynamic CSS variables used for the parallax hover effect, and some of the other properties that brought this project to life.

22. HSL Slider

 

See the Pen
HSL Slider w/ React + CSS vars 🤓🎨 by Jhey (@jh3y)
on CodePen.

Inspired by a section of Refactoring UI, which recommends ditching Hex for HSL as a colour format, Jhey Tompkins created this little colour picker with React Hooks, pointer events and CSS variables. Slide it left to right for hue, and use the dials above and below to adjust the saturation and lightness.

WebGL

23. WebGL-enhanced drag slider tutorial with curtains.js

 

See the Pen
WebGL enhanced javascript drag slider (performance improved) by Martin Laxenaire (@martinlaxenaire)
on CodePen.

In this three–part tutorial, web designer Martin Laxenaire explains how to build a responsive drag slider in JavaScript, enhance it with powerful WebGL capabilities and improve the overall performance of the slider by removing any layout repaint calls.

24. 80’s

 

See the Pen
80’s by Clément Roche (@ClementRoche)
on CodePen.

An impressive WebGL demo by development student Clément Roche.

CSS-only

25. Hover Effect for Headers

See the Pen
Hover Effect for Headers by Olivia Ng (@oliviale)
on CodePen.

Olivia Ng created a CSS-only CodePen that demonstrates various subtle hover effects for headers, in particular via animating individual letters. It also makes use of CSS Scroll Snap, which allows a scroll container to snap to certain positions automatically.

26. Rebuilding the Solar System with CSS

 

See the Pen
Solar CSSystem by Rob DiMarzo (@robdimarzo)
on CodePen.

UX designer Rob DiMarzo has written an article that dissects his Solar CSSystem demo and explains how he built the planets complete with their relative rotation speed, tilt, and other photorealistic goodies — using only CSS!

27. Clip Clop Clippity Clop

 

See the Pen
Clip Clop Clippity Clop [CSS Only] by Steve Gardner (@ste-vg)
on CodePen.

A beautiful CSS-only animated horse (with x-ray view on click!) by Steve Gardner. Click or touch the horse to slow things down and see how things are done.

28. Zero Divs Pure CSS Pixel Art Animation

See the Pen
Zero Divs! Pure CSS pixel art animation! by Ben Evans (@ivorjetski)
on CodePen.

An experiment in CSS art, using box-shadow and parallax scrolling, by front-end developer Ben Evans that is done completely without HTML, JavaScript and images. Ben also took a few thousand screenshots to make a time-lapse video, so you can see the ‘making of’.

29. CSS Tic-Tac-Toe

See the Pen
CSS Tic-Tac-Toe… now with AI! by Alvaro Montoro (@alvaromontoro)
on CodePen.

A Tic-Tac-Toe game developed using only HTML and CSS, without any JavaScript, by full-stack software engineer Alvaro Montoro. Also check out his CSS and HTML Snake and Ladders.

30. Paper Pirouette

 

See the Pen
➰📃 Paper Pirouette | 3D CSS-only flying page animation tutorial | @keyframers 2.18.0 by @keyframers (@keyframers)
on CodePen.

Another impressive demo by the Keyframers, David Khourshid and Stephen Shaw. If you want to know how they created this 3D isometric flying paper animation using CSS only, watch them code it live. Topics covered include CSS variables, segments for creating smooth curves and 3D CSS transforms and 3D transform-origin.

Even more pens and how to join in yourself

To find out more about CodePen, watch this video and learn from CodePen co-founder Chris Coyier how to use the platform. And for more inspiring demos, sign up to the CodePen Spark newsletter and check out Sarah Drasner’s collection of useful pens for everyday front-end development. You can also join the community by taking part in one of the weekly challenges or attending one of the many CodePen meetups around the world.

And if you’ve created a pen yourself or would like to tell us about your favourites, share them with us on social or in the comments below!