The

All the can't-miss links.

February 13th: Valentine Loves, Luna Missions, and a Long Cat

Atom Button

Paraskevas Ntinakis created a clever and cool button hover effect.

Lovely Luna Diagram

We would fly to the moon and back for Varun Vachhar's animated luna 9 flight diagram, complete with a spacey backing track.

Can You Paint Digital Music?

Yes, you can, thanks to Lutz Rosema's Music Paint pen.

One Element Wonder

Ana Tudor refurbished one of her old pens to create a rainbow spinner with 1 element and SCSS.

Magical Line Navigation

Michał Niewitała created this smooth magical line navigation effect with CoffeeScript and Sass.

Sponsored:

Go Pro on CodePen

Unlock the full power of CodePen with features like Asset Uploading, Live View, Presentation View, and many more.

Star Drift

Cory Hughart created this calming animated star scene with delaunay triangulation.

Scroll Header

Blake Bowen created a header that collapses and changes color when you scroll down the page.

Long Cat is Long

The CodePen team got a real kick outta Jon Kantner's long cat that just gets longer as you scroll.

Perfectly Toasted CSS

The CodePen community continues to impress with their CSS illustrations. This week we loved Tina Anastopoulos' animated toaster.

CSS Transitions and Animations Tutorial

Jorge C. S. Cardoso wrote a tutorial on how to create an animated burger menu and sidebar with CSS transitions and animations.

Happy Valentines

CodePen hearts are in the air and in Chris Coyier's Valentine's collection.

We're all for progressive enhancement, but CodePen is a bit unique in that it's all about writing and showing front end code, including JavaScript. It's required to use most of the features of CodePen.

Need to know how to enable it? Go here.

Close this, use anyway.

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"spark"}},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjc0NzkwMjk3LCJpYXQiOjE2NzQ3ODY2OTcsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.X6ncrGicddJ5sSRV7dh8h5Yq7kpQfNWmOLpuyOw5lkCJW7WM51QcGJU5OX7Zf8N_o84qoXYmJ1sDc5fOcCRKWzsHVTiD4LuYGiKL14u7d0QpWjlcVYVnLYpioZ3tct6ddGQzIJwbQWMlpTJNug1IFxUrLw4Y75DSuJrnsxWjVQyA5LQDs4CCoDHnGGjMCvdgdE8poPq13cg2DRckD8jpWGLZIXbF11OgN7HAcn0gpcBPpeopmbjMozfdOiMazTW9wJ_HcB8yNXsh3fFku8PP6KA-b6-l04_RcyM4mx_567fB4IA7LV-GihufNyEX31I7NZB-Qys3jMtKE8vXU0-CRw"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production"}