Design Patterns on CodePen

Revealing ‘back to top’ button

Such a clever minimalist use of CSS!

To-Do Terrarium

I love this little to-do app! Every time you tick something off your list, something grows in your virtual terrarium. Lovely!

Inline an SVG file in HTML, declaratively & asynchronously!

Woah! This is one smart hack!

Scott has figured out a way to get all the benefits of pointing to an external SVG file …that then gets embedded. This means you can get all the styling and scripting benefits that only apply to embedded SVGs (like using fill).

The fallback is very graceful indeed: you still get the SVG (just not embedded).

Now imagine using this technique for chunks of HTML too …transclusion, baby!

HTML periodical table (built with CSS grid)

This is a nifty visualisation by Hui Jing. It’s really handy to have elements categorised like this:

• Root elements
• Scripting
• Interactive elements
• Document metadata
• Edits
• Tabular data
• Grouping content
• Embedded content
• Forms
• Sections
• Text-level semantics

CodePen - Solar System 3D Animation (Pure CSS)

This orrery is really quite wonderful! Not only is it a great demonstration of what CSS can do, it’s a really accurate visualisation of the solar system.