Nataly Birch December 26th, 2016

Codepen Treasure Chest: 10 Pearls and 10 Helpful Code Snippets

Like Dribbble or Behance, Codepen is a sacred place that attracts and gathers together thousand of creative people of utterly different skill and knowledge levels. Whether you are a highly proficient developer who knows his stuff or just a novice coder who has only embarked on an adventurous journey of converting ideas into digital reality, you will certainly find here something special. If you are lacking in inspiration, there is a ton of incredible, mind-blowing projects: each one is an interfusion of styles, pioneering techniques, and smart ideas. The great thing is that it is not just a collection of masterpieces that you are only allowed to contemplate excluding unnecessary touching much like in an exhibition in the museum. On the contrary, you are welcome to not only touch, in a figurative manner of speaking but also break any of these pieces of art into fragments and leave no stone unturned in the struggle of getting to grips with the concept. Sharing is caring – is one of Codepen’s doctrine; it is destined to be explored. So why not to make the most out of it? Today we have compiled a list of pens that is split into two. The first part is dedicated to some innovative and top-notch projects that show that testing the limits can actually bring some spectacular results. It is here where you can get a boost and spur for pushing your boundaries. Maybe some of the examples in this section do not work properly even in all modern browsers, but they certainly have a wow factor. The second part includes code snippets that are down to earth and in some cases are even trivial, but they are practical and sought-after and can be used for solving mundane issues.

For Inspiration

3D Carousel Using TweenMax.js & jQuery

3d-carousel Creator: John Blazek

Chill the Lion

chill-the-lion Creator: Karim Maaloul

Infinite Star Field

infinite-star-field Creator: Eduardo Lopes

Simple Particle Engine

simple-particle-engine Creator: Jason Mayes

Morph Character

morphing-characters Creator: Sascha Sigl

Audio Cloud

audio-cloud Creator: André Mattos


butterfly-particles Creator: Timur Bilalov

Canvas Bokeh Generation

bokeh-generator Creator: Jack Rugile

The Wave

the-wave Creator: Chris Coyier

Star Wars - Polygons of the Galaxy II 

polygons-of-galaxy Creator: Lloyd James

Ideas/Solutions For Work

A Menu Overlay Simulating a Camera Focus Change

menu-overlay Creator: Chris Arasin

Schedule Template

schedule-template Creator: Oltika

Responsive Signup/Login form

login-form Creator: Mohamed Hasan

Hero Zoom on Scroll

zoom-hero-image Creator: Vail

GSAP Cubic bezier page transition

cubic-bezier-transition Creator: Maciej Siwanowicz

Image Effects with CSS

image-effects Creator: Bennett Feely

CSS Text 3D Effect

css3-text-effect Creator: Luke Meyrick

Fully responsive navigation with CSS3 animations and jQuery

fully-responsive-navigation Creator: Jan Czizikow

Material Navigation Pure CSS

material-navigation Creator: Manasseh Pierce


triangled Creator: Dronca Raul Image by Gerd Altmann from Pixabay

Nataly Birch

Nataly is an internet entrepreneur and an amateur web designer and developer from Sevastopol, Ukraine. She is running a blog for web designers and developers where you can find some inspirational and useful stuff. In her spare time she reads books, unveils the secrets of the world and plays volleyball. Visit her blog or follow her on twitter


  1. Hi Nataly,
    I must agree, that is unique. I have seen so many different art and styles but i love the butterfly. 3D Carousel is simply amazing and these types of things amuse people and attract more readers to the site.
    Great job Nataly, well done.

Leave a Reply

Your email address will not be published. Required fields are marked *