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.

2015 Update: We now have CodePen TV, so you can make screensavers out of your favorite collections!

One thing I didn’t expect to happen on CodePen are all the amazing canvas animations people post. Like this:

Would it be cool to turn those into screensavers?

I mused on Twitter:

Enter WebViewScreenSaver for Mac (Thank you Willson Smith). It works great. You can download the Binary from there and one-click install it (OS X only here). Then under the Desktop and Screen Save r System Preference pane, you can select it.

Under Options you can list URL’s you want to show up. Use the full page versions you can find under the Share dropdown from the editor.

Now you can use fancy animations like this:

or this:

See the Pen Lines Aurora by Tenderfeel (@Tenderfeel) on CodePen.

Some of these aren’t exactly battery-friendly, but you can get around that. Under the Energy Saver setting, change your display to go to sleep in less time than you have your screen saver set to turn on. That way when you’re plugged in you’ll get the cool screen saver, but when on battery your display will just sleep.

Then you can be awesome like this: