DEV Community

Codepen Designs Series' Articles

Back to Jon Snow's Series
CodePen Designs - 1 : Playing Lemmings - Windows 95 - CSS
Cover image for CodePen Designs - 1 : Playing Lemmings - Windows 95 - CSS

CodePen Designs - 1 : Playing Lemmings - Windows 95 - CSS

5
Comments
1 min read
CodePen Designs - 2 : 90s Vaporwave Computer Screen - CSS Animated Pixel Art
Cover image for CodePen Designs - 2 : 90s Vaporwave Computer Screen - CSS Animated Pixel Art

CodePen Designs - 2 : 90s Vaporwave Computer Screen - CSS Animated Pixel Art

2
Comments
1 min read
CodePen Designs - 3 : Rounded Box - Matcap texture
Cover image for CodePen Designs - 3 : Rounded Box - Matcap texture

CodePen Designs - 3 : Rounded Box - Matcap texture

3
Comments
1 min read
CodePen Designs - 4 : 3D Room - Pure CSS
Cover image for CodePen Designs - 4 : 3D Room - Pure CSS

CodePen Designs - 4 : 3D Room - Pure CSS

2
Comments
1 min read
CodePen Designs - 5 : Snowball Preloader
Cover image for CodePen Designs - 5 : Snowball Preloader

CodePen Designs - 5 : Snowball Preloader

2
Comments
1 min read
CodePen Designs - 6 : LEGO Preloader
Cover image for CodePen Designs - 6 : LEGO Preloader

CodePen Designs - 6 : LEGO Preloader

3
Comments
1 min read
CodePen Designs - 7 : Christmas Cannon
Cover image for CodePen Designs - 7 : Christmas Cannon

CodePen Designs - 7 : Christmas Cannon

3
Comments 1
1 min read
CodePen Designs - 8 : ThreeJS Toys - Particles Cursor
Cover image for CodePen Designs - 8 : ThreeJS Toys - Particles Cursor

CodePen Designs - 8 : ThreeJS Toys - Particles Cursor

6
Comments
1 min read
CodePen Designs - 9 : Dreaming of Jupiter - Three.js
Cover image for CodePen Designs - 9 : Dreaming of Jupiter - Three.js

CodePen Designs - 9 : Dreaming of Jupiter - Three.js

1
Comments
1 min read
CodePen Designs - 10 : Just Ice
Cover image for CodePen Designs - 10 : Just Ice

CodePen Designs - 10 : Just Ice

Comments
1 min read
CodePen Designs - 11 : Impossible Checkbox v2 🐻
Cover image for CodePen Designs - 11 : Impossible Checkbox v2 🐻

CodePen Designs - 11 : Impossible Checkbox v2 🐻

Comments
1 min read
CodePen Designs - 12 : Pixel art studio
Cover image for CodePen Designs - 12 : Pixel art studio

CodePen Designs - 12 : Pixel art studio

Comments
1 min read
CodePen Designs - 13 : Emoji Art Maker -Automatic Emoji Mosaics
Cover image for CodePen Designs - 13 : Emoji Art Maker -Automatic Emoji Mosaics

CodePen Designs - 13 : Emoji Art Maker -Automatic Emoji Mosaics

1
Comments
1 min read
CodePen Designs - 14 : Sunrise and sunset
Cover image for CodePen Designs - 14 : Sunrise and sunset

CodePen Designs - 14 : Sunrise and sunset

1
Comments
1 min read
CodePen Designs - 15 : Neumorphic Elements
Cover image for CodePen Designs - 15 : Neumorphic Elements

CodePen Designs - 15 : Neumorphic Elements

4
Comments
1 min read
CodePen Designs - 16 : SVG rope from path
Cover image for CodePen Designs - 16 : SVG rope from path

CodePen Designs - 16 : SVG rope from path

1
Comments
1 min read
CodePen Designs - 17 : Daily UI #002: Credit Card Checkout
Cover image for CodePen Designs - 17 : Daily UI #002: Credit Card Checkout

CodePen Designs - 17 : Daily UI #002: Credit Card Checkout

2
Comments
1 min read
CodePen Designs - 18 : Video Sharing Platform UI
Cover image for CodePen Designs - 18 : Video Sharing Platform UI

CodePen Designs - 18 : Video Sharing Platform UI

Comments
1 min read
CodePen Designs - 19 : CodePen Loader
Cover image for CodePen Designs - 19 : CodePen Loader

CodePen Designs - 19 : CodePen Loader

1
Comments
1 min read
CodePen Designs - 20 : NightLight
Cover image for CodePen Designs - 20 : NightLight

CodePen Designs - 20 : NightLight

Comments
1 min read
CodePen Designs - 21 : Scroll direction rotation
Cover image for CodePen Designs - 21 : Scroll direction rotation

CodePen Designs - 21 : Scroll direction rotation

1
Comments
1 min read
CodePen Designs - 22 : Auto Rotate Slider
Cover image for CodePen Designs - 22 : Auto Rotate Slider

CodePen Designs - 22 : Auto Rotate Slider

Comments
1 min read
CodePen Designs - 23 : Services Section | Learn CSS Garden
Cover image for CodePen Designs - 23 : Services Section | Learn CSS Garden

CodePen Designs - 23 : Services Section | Learn CSS Garden

Comments
1 min read
CodePen Designs - 24 : 3D Card
Cover image for CodePen Designs - 24 : 3D Card

CodePen Designs - 24 : 3D Card

9
Comments 2
1 min read
CodePen Designs - 25 : Music App
Cover image for CodePen Designs - 25 : Music App

CodePen Designs - 25 : Music App

2
Comments
1 min read
CodePen Designs - 26 : A Pen by Paul Slaymaker
Cover image for CodePen Designs - 26 : A Pen by Paul Slaymaker

CodePen Designs - 26 : A Pen by Paul Slaymaker

1
Comments
1 min read
CodePen Designs - 27 : Colorful Vitamins
Cover image for CodePen Designs - 27 : Colorful Vitamins

CodePen Designs - 27 : Colorful Vitamins

3
Comments 2
1 min read
CodePen Designs - 28 : CSS Only Cubes Hover Effects 00:08

CodePen Designs - 28 : CSS Only Cubes Hover Effects

3
Comments 2
1 min read
CodePen Designs - 29 : tsParticles - Cursor Rainbow Shapes Trail
Cover image for CodePen Designs - 29 : tsParticles - Cursor Rainbow Shapes Trail

CodePen Designs - 29 : tsParticles - Cursor Rainbow Shapes Trail

2
Comments
1 min read
CodePen Designs - 30 : Daily UI #008 - 404 Page
Cover image for CodePen Designs - 30 : Daily UI #008 - 404 Page

CodePen Designs - 30 : Daily UI #008 - 404 Page

Comments
1 min read
CodePen Designs - 31 : Pure CSS Mario 64 - 3D - No JavaScript!
Cover image for CodePen Designs - 31 : Pure CSS Mario 64 - 3D - No JavaScript!

CodePen Designs - 31 : Pure CSS Mario 64 - 3D - No JavaScript!

1
Comments 2
2 min read
CodePen Designs - 32 : Space globe - Three.js
Cover image for CodePen Designs - 32 : Space globe - Three.js

CodePen Designs - 32 : Space globe - Three.js

3
Comments 1
1 min read
CodePen Designs - 33 : playing kid — morph and skeletal animation
Cover image for CodePen Designs - 33 : playing kid — morph and skeletal animation
00:48

CodePen Designs - 33 : playing kid — morph and skeletal animation

2
Comments
1 min read
CodePen Designs - 34 : Pricing - pure css - #16
Cover image for CodePen Designs - 34 : Pricing - pure css - #16

CodePen Designs - 34 : Pricing - pure css - #16

Comments
1 min read
CodePen Designs - 35 : 3D Ecommerce Experience with Spline
Cover image for CodePen Designs - 35 : 3D Ecommerce Experience with Spline

CodePen Designs - 35 : 3D Ecommerce Experience with Spline

5
Comments
1 min read
CodePen Designs - 36 : Kill The King - Vue / HTML game
Cover image for CodePen Designs - 36 : Kill The King - Vue / HTML game

CodePen Designs - 36 : Kill The King - Vue / HTML game

3
Comments
1 min read
CodePen Designs - 37 : How Fast Can You Scroll?
Cover image for CodePen Designs - 37 : How Fast Can You Scroll?

CodePen Designs - 37 : How Fast Can You Scroll?

1
Comments
1 min read
CodePen Designs - 38 : Exhibition
Cover image for CodePen Designs - 38 : Exhibition

CodePen Designs - 38 : Exhibition

1
Comments
1 min read
CodePen Designs - 39 : Interactive particles text create with three.js
Cover image for CodePen Designs - 39 : Interactive particles text create with three.js

CodePen Designs - 39 : Interactive particles text create with three.js

5
Comments
1 min read
CodePen Designs - 40 : 3D First Person Art Gallery - No Javascript!
Cover image for CodePen Designs - 40 : 3D First Person Art Gallery - No Javascript!

CodePen Designs - 40 : 3D First Person Art Gallery - No Javascript!

1
Comments
2 min read
CodePen Designs - 41 : Traffic Run Game with Three.js
Cover image for CodePen Designs - 41 : Traffic Run Game with Three.js

CodePen Designs - 41 : Traffic Run Game with Three.js

2
Comments
2 min read
CodePen Designs - 42 : Keyboard Hero
Cover image for CodePen Designs - 42 : Keyboard Hero

CodePen Designs - 42 : Keyboard Hero

1
Comments
1 min read
CodePen Designs - 43 : Lottie Animations in React
Cover image for CodePen Designs - 43 : Lottie Animations in React

CodePen Designs - 43 : Lottie Animations in React

3
Comments
1 min read
CodePen Designs - 44 : Newton's Light Bulbs 💡😎
Cover image for CodePen Designs - 44 : Newton's Light Bulbs 💡😎

CodePen Designs - 44 : Newton's Light Bulbs 💡😎

1
Comments
1 min read
CodePen Designs - 45 : CSS Sleeping Blob
Cover image for CodePen Designs - 45 : CSS Sleeping Blob

CodePen Designs - 45 : CSS Sleeping Blob

7
Comments
1 min read
A Realistic 3D Card hover effect using only CSS
Cover image for A Realistic 3D Card hover effect using only CSS

A Realistic 3D Card hover effect using only CSS

17
Comments
1 min read
Hexagon rotating gradient border
Cover image for Hexagon rotating gradient border

Hexagon rotating gradient border

7
Comments
1 min read
Image gallery with smooth hover effect
Cover image for Image gallery with smooth hover effect

Image gallery with smooth hover effect

15
Comments
1 min read
Mind-blowing CodePen for web developers
Cover image for Mind-blowing CodePen for web developers

Mind-blowing CodePen for web developers

11
Comments 3
3 min read