March 18th: Refractions, Receipts, and Retro Computing

GLSL: Refracted Rays
A new absolute mind-bender from Liam Egan: "Raymarching with refraction through a sphere's surface. Mouse Y position modifies the refraction index of the surfaces."

Image Cloud for WordPress and the Web
SmartFrame is an image cloud that seamlessly integrates into your WordPress Media Library and can also be used standalone with any website.

Off-Canvas Navigation Variants (Sidebar)
Take five different off-canvas nav options for a spin in this UI-focused Pen from fox_hover.

#CodePenChallenge: Art Heroes
For week two of the March Tributes challenge we celebrated our favorite artists. Check out the Pens from the Art Heroes prompt, including Paulina Hetman's "For Vincent".

Create Your Website Today. Any Layout. Fast and Easy.
Visual Composer Website Builder: the new plugin that lets you build your full website — from header to footer. Its user-friendly and straight-forward drag & drop editor is built with React.JS for maximum performance. Coupled with premium templates, blocks, elements, and extensions = zero coding needed.

CVS Receipt
"CVS is notorious for their receipts, so I decided to share my experience with a simple CodePen. With some quick and dirty HTML, CSS, and JavaScript - I present you with the never-ending CVS receipt" from garrettbear.

CSS Grid: Floor Plan
Olivia Ng creates a home floor plan with "lots of empty space for the dogs and cats to walk around" and CSS Grid!

ZX Spectrum
Chris Smith creates a faithful reproduction of the classic Sinclair ZX Spectrum with HTML and CSS. Did you know these things ran software from cassette tapes?

Accessibility to a11y
Alvaro Montoro demonstrates how "accessibility" becomes "a11y" in this Pen that animates pseudo-elements.

CreateJS: Infinite Irish
CreateJS celebrated St. Paddy's Day with a flurry of four leaf clovers in this charming Pen.

CodePen Radio #214: Babel 7
CodePen recently upgraded to Babel 7 for both our development team and our members. Cassidy and Marie talk about what that means for you in your CodePen editor.

Animated Details Element
Mert Cukuren demonstrates how to animate the often-overlooked <details> element with CSS.

Heart Series - Bird :)
JustYourAverageOnion continues a series of CSS animal drawings created with heart shapes with this darling pink bird.

Page Reveal Effect
Kevin Levron shares an explosive page reveal effect, built with ThreeJS and TweenMax.