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.

There are a couple of new very cool web apps that use the ability to pre-fill a new Pen with provided code:

Type Scale


Type Scale gives you a visual model of what type sized in different proportions looks like. For instance, the Golden Ratio is 1.618. So if the base is 1em, a size up is 1.618, then 2.618, then 4.236 etc. I’m partial to the Major Third myself.

Get some text looking good then “Edit on CodePen” to continue playing.


Polynode is a web app that takes 3D model files (.STL) and converts them into fully interactable SVG right in the browser. Get it looking just right then export it to CodePen to save it or continue playing.


Made from the folks at Xpressive Team who do some amazing work with 3D in the browser. They said they took some inspiration from TriDiv which perhaps you’ve seen before.