The

All the can't-miss links.

January 30th: Memes, Marshmallow, and Matter.js

Alpaca Peck

"These two young alpacas are in love. Can you help them make a connection?" Built with Matter.js physics & custom psuedo-rigging by Shaw.

Pizza Time!

#dailycssimages went foodie this week! Check out Adam Kuhn's delicious pizza loader.

CSS Memes Debunked

A new collection by Dudley Storey — "I got tired of web design memes that haven't been true for years. Decided to start a series at CodePen as a counter."

How to Create Direction-Aware CSS-Only Hover Effects

Gabrielle Wee shares the details on how she made her popular Pen "CSS-Only Direction-Aware Cube Links" with a "combination of tildes, transforms, and transitions".

CodePen Radio #114: GitLab

CodePen Radio is back for 2017! In this episode, we talk about the differences between GitHub and GitLab, why we decided to make the change, the features we like, and how the team managed the switch.

CSS Paper Text

by Mattia Astorino folds & flattens on hover in such a satisfying way.

Gravity

There's been some great 3D work lately, this experiment from Martin Schuhfuss exploring glsl and instanced geometry is a nice one!

Generative Plants

Minimal generative plants, yes please! "plants.exe" by Alex Baldwin.

Android Marshmallow Boot Animation

Quite a complex animation for just @keyframes, but Ariful Islam pulls it off!

Sponsored:

Go Pro on CodePen

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

Magazine Layouts

Anastasia Lanz collects (and creates) web layouts that were directly inspired by layouts from print magazines.

Year of the Rooster

Tina Anastopoulos' Pen celebrates the Year of the Rooster in colorful, geometric style.

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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjc1MDI4NTMwLCJpYXQiOjE2NzUwMjQ5MzAsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.8hXfGFKV6xTBAkCVxR6dyDb-pZ2awvZQkUm-QcjrMwvIw3mWwr6CzBIquIS9dETjxHwzzGJVaOL5Vfc5E9oj-ccwIOzdEkugUwh-34nonvB1oiRJG7PTKUwZ1Dc1hw65xPAnEu4y1NIlW8oAgj-Md-R9OoCErTyy9flngvPLDQQXholPAhaTyvXvmzgKw5z48JH7bI4dt1fgDQLavxX-OposK4jzWlP3eqEdjp1OZG3qCe3EBdZRtFGtJ3DNB9_NoCb3O3VWaqldXMxjONl3biRWXM691l0NAvDYWTxq3E94Q_85qdT0FSWP59RaPqTESGHH5joBqIygRPVPqLr-LA"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production"}