India : +91 738 333 7777 | USA/Canada : +1 343 300 0044

The Best of CodePen for 2017

The web dev community is full of talented programmers, designers, and artists, always building new things and pushing the web forward.

With the new year around the corner, we thought it would be fun to look back and celebrate all the amazing projects submitted to CodePen. It is truly amazing what the web is capable of today, and how much can be achieved with just a browser and a tiny bit of HTML, CSS and JavaScript.


the-last-experience.png

The last experience is a cool and interesting demo that shows some human-like robots moving and dancing. You can spin them, move them, and even throw them around with your mouse.


i-could-not-stop.png

This is a fun demo where you can split a picture into smaller new ones for an infinite amount of times. Every time you click on any of the images, it generates four new smaller images on it’s place. It has no limitations and you can do this thousands of times.


trees.png

With this demo you can draw numerous colorful and beautiful trees. When you click on the window, you generate a new tree in a different shape and color. You can generate as many trees as you want, however when you generate a new tree, one of the older ones fades away.


star-wars.png

This code pen demo shows different Star Wars character on each window width resize. It shows an SVG image and every time you change the window’s width, it swaps it with another one, using media queries.


winter-tidings.png

Winter Tidings takes you in the enchanted forest, where you summon the woodland spirits and form a one-of-a-kind snowflake to carry your festive message anywhere in the world. It has nice colors, beautiful images, smooth animations and calming background music.


orbital-trails.png

This is a fantastic and fun demo that shows some really cool trail movements. The trails have some really amazing colors, smooth movement and you can add even more trails by clicking and dragging.


car.png

Showcase Car is an interesting 3D demo of a car made only with CSS. The car has some really nice details and shadow effects. You can roll down the windows, open the doors, customize it, turn the headlights on and off and make it move in a circle.


rainbow-star.png

Rainbow Star Wave shows interesting and colorful waves moving and jumping around. It is made only with HTML and Sass-powered CSS keyframe animations. You can mess around with the code directly in the CodePen editor to get different shapes and animations.


color-averager.png

The color averager is an useful demo which allows you to see the result of combining two colors. You need to choose two colors from the color picker and it will show you the result as background color of the window.


lion.png

Chill the lion is a beautiful WebGL experiment made with ThreeJS. It consists of a pixel-style graphics Lion and a fan, which can be controlled with the mouse to make wind for the line, which he greatly enjoys.

The same artist has other awesome pens like Sneeze The Dragon and Cat vs Ball of Wool


squarebreath.png

This is a demo showing a grid of colorful squares performing some interesting animations and transitions, aligned in a way that creates a pretty wave-like effect. All the animations are made with CSS keyframes, transforms, and delay.


tiny-poly-world.png

This is a 3D demo of a plane flying made with Three.js. You can move the plane with your mouse while flying in a nicely detailed 3D environment. It includes some really smooth movements, dynamic shadows and nice and calming colors.


snow-mountain.png

This is a fun little game where you slide down a mountain trying to avoid getting hit by a tree and survive as long as possible. It has smooth movement and good quality. It is really catching and makes you play it more and more trying to improve your high score.


4d-perspective.png

This is a really interesting demo showing 4D perspective. It has some really high-quality movements and lightning effects, beautiful colors and amazing animations and transitions.


snake.png

This is the popular snake game, recreated with a tiny bit of CSS and JavaScript. You need to move around and eat the grey square. As you eat more and more grey squares, the snake gets bigger and bigger, and need to avoid getting hit into the wall or the snake’s body.


Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more

Related Posts

Leave a comment