CodePen Members Offer Seventh Yearly Top Picks List

by 10 Best Design

The holiday season always brings out those ubiquitous end-of-the-year lists, and the web coding platform known as CodePen is no exception to this rule. In 2019, CodePen celebrated its seventh anniversary, and it is safe to say that featured projects keep getting better and better. As the premier showcase platform for web designers, CodePen is home to some of the most masterful examples of what you can do with HTML, CSS, and JavaScript. As we wrap up another decades in the 21st century, here are some of the most impressive projects voted by CodePen members:

Matthew Pen's SVG Hamburger

Scalable vector graphics are making a strong comeback in 2019 because they are among the most ideal image formats for the mobile world. This particular project may not appear to be very impressive until you take a look under the hood and evaluate the code, which is not only elegant but very useful as it displays very sharp and animated hamburger menu icons.

Click the Button by Bard N. Hovde

With the right amount of CSS and JavaScript, you can now use this project to create a playful invitation for users to click a button that is stolen by an animated character. The button itself remains on the screen; the gotcha moment comes when the character stretches his arm and steals the cursor before your very eyes, thus preventing you from clicking the button.

WebGL Slider by Jesper Landberg

The problem with many web animations is that developers assume that visitors have powerful systems to handle heavy graphics. This is certainly not the case with this WebGL slider, which moves right or left infinitely without eating up too many resources.

Isla Portrait by Ben Evans

CSS portraits are getting more and more realistic every year. This one will probably not work very well on the Microsoft Edge browser if it is rendered with JavaScript, but it is buttery smooth in Chrome and Firefox. There are quite a few CSS-only masterpieces that made the CodePen Top 100 in 2019, but the photo realism of this portrait is something to behold. In the near future, CSS art galleries will likely leave the web realm and jump into the brick-and-mortar world. For more information click here https://codepen.io/2019/popular/pens.