Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

If you’re looking for inspiration on a project, CodePen is a great place for that. Not only can you build things and test them and share them and all that, other people are doing that as well and it’s all findable and open source.

One great way to do that is search. Search results are ordered by a version of our popularity algorithm so they often turn up lots of fantastic stuff. Check out the search for “banner” to turn up lots of examples of text on a banner or ribbon.

Tags is another way. Tag pages unearth every Pen related to that tag, as marked by the community as a whole. This is particularly useful for very specific things (as opposed to big general things). Check out the tag “404” for people’s takes on the Page Not Found error.

Collections are another way. Collections are created by single users or Teams. So they are generally more carefully curated collections of Pens, chosen on any subject they want. Check out Tim Holman’s collection Particles for lots of examples of particle effects.

To showcase all these great ways to explore and find useful Pens on CodePen, we created a Design Patterns page. Here at launch, it has 12 different popular patterns on it. Things like Charts & Graphs, Loaders, Tables, and many more.

Clicking on any Pattern takes you to a curated collection of that pattern, as collected by me. We might find a better way to do that in the future, so feedback welcome. We also provide links to searches and the tag for that pattern.


Special thanks to Katie Kovalcin for help on this page. Katie and I kinda tag-teamed the idea and design. Inline SVG is so fun to work with.