CodePen Editor's Picks http://codepen.io/ en nospam@codepen.io Copyright 2016 2016-11-13T09:27:14-07:00 Radial Whip: SVG & GSAP http://codepen.io/petebarr/pen/qqdajE http://codepen.io/petebarr/pen/qqdajE Peter Barr

See the Code - See it Full Page - See Details

A very simple SVG animation with just one line of GSAP to create the effect. Try changing the easing to create some abstract results with odd wave patterns, e.g. Bounce.easeOut. Starting to wonder if I have a thing for circles ;-) Using opacity: -0.5, ease: Bounce.easeIn goes a bit mad!

This Pen uses: HTML, SCSS, JavaScript, and

]]> Radial Whip: SVG & GSAP 2016-11-12T13:43:38-07:00 Pure CSS interactive photo cube 😎 (hover/tap to start!) http://codepen.io/jh3y/pen/bBEYdZ http://codepen.io/jh3y/pen/bBEYdZ jh3y

See the Code - See it Full Page - See Details

Been a while since I've posted a new pen and been sitting on this concept for ages. It was originally using JavaScript and was going to be a keyboard navigatable cube for my personal portfolio inspired by the video game Fez. Then I thought why not just do it all in CSS? 😎 Enjoy!

This Pen uses: Jade, Stylus, Babel, and Babel

]]> Pure CSS interactive photo cube 😎 (hover/tap to start!) 2016-11-12T00:43:30-07:00 #codevember - day 12 - Mountains http://codepen.io/robin-dela/pen/YpqWPr http://codepen.io/robin-dela/pen/YpqWPr Robin Delaporte

See the Code - See it Full Page - See Details

This Pen uses: Haml, SCSS, JavaScript, and

]]> #codevember - day 12 - Mountains 2016-11-12T13:55:22-07:00 Loading animation with % value http://codepen.io/moritzjacobs/pen/mOVOyR http://codepen.io/moritzjacobs/pen/mOVOyR moritz jacobs

See the Code - See it Full Page - See Details

This Pen uses: HTML, SCSS, JavaScript, and

]]> Loading animation with % value 2016-11-10T23:25:41-07:00 CSSEmoji - Smiling Face with Heart Eyes http://codepen.io/nitishkmrk/pen/woGoeP http://codepen.io/nitishkmrk/pen/woGoeP Nitish Kumar

See the Code - See it Full Page - See Details

A Smiling Face with Heart Eyes CSS Emoji built with pure LESS/CSS. GitHub - https://github.com/webkul/cssemoji

This Pen uses: HTML, LESS, JavaScript, and

]]> CSSEmoji - Smiling Face with Heart Eyes 2016-11-13T09:27:14-07:00 Sleepy panda... http://codepen.io/judag/pen/ZBWBKV http://codepen.io/judag/pen/ZBWBKV Judith Neumann

See the Code - See it Full Page - See Details

Only CSS inspired on Stanislav dribbble shot https://dribbble.com/shots/3084995-Fluent-Panda

This Pen uses: HTML, CSS, JavaScript, and

]]> Sleepy panda... 2016-11-12T16:12:21-07:00 #Codevember 12 - Canvas waves http://codepen.io/SoufianeLasri/pen/qqZmOe http://codepen.io/SoufianeLasri/pen/qqZmOe Soufiane Lasri

See the Code - See it Full Page - See Details

Codevember - November, 12th 2016

This Pen uses: Jade, Stylus, Babel, and Babel

]]> #Codevember 12 - Canvas waves 2016-11-12T21:36:37-07:00 #Codevember 11 - Canvas Lightning http://codepen.io/seanfree/pen/gLrWwg http://codepen.io/seanfree/pen/gLrWwg Sean Free

See the Code - See it Full Page - See Details

With help from: http://drilian.com/2009/02/25/lightning-bolts/

This Pen uses: Jade, Sass, JavaScript, and

]]> #Codevember 11 - Canvas Lightning 2016-11-13T01:39:42-07:00 Fancy Button Menu #Codevember http://codepen.io/nodws/pen/KgObjM http://codepen.io/nodws/pen/KgObjM Nodws

See the Code - See it Full Page - See Details

Simple animated button with double border in pseudo element

This Pen uses: HTML, CSS, JavaScript, and

]]> Fancy Button Menu #Codevember 2016-11-12T23:04:22-07:00 #codevember 11 - circular noise http://codepen.io/maxkolyanov/pen/MbyooY http://codepen.io/maxkolyanov/pen/MbyooY Max Kolyanov

See the Code - See it Full Page - See Details

<b>Codevember day 11. Sticking to circles topic for no particular reason</b>

This Pen uses: HTML, CSS, JavaScript, and

]]> #codevember 11 - circular noise 2016-11-12T23:24:51-07:00 Email Carrier #codevember_12 http://codepen.io/johnbgarcia/pen/VmaWpr http://codepen.io/johnbgarcia/pen/VmaWpr John Garcia

See the Code - See it Full Page - See Details

Ever wonder how your emails actually get to your inbox?

This Pen uses: Jade, Sass, JavaScript, and

]]> Email Carrier #codevember_12 2016-11-13T01:10:02-07:00 #Codevember Day 12 – Floating Circles http://codepen.io/UnforbiddenYet/pen/GNZELz http://codepen.io/UnforbiddenYet/pen/GNZELz Dmytro Lvivsky

See the Code - See it Full Page - See Details

This Pen uses: HTML, CSS, Babel, and Babel

]]> #Codevember Day 12 – Floating Circles 2016-11-13T01:04:52-07:00 Toggle Fix - Spotify Desktop App http://codepen.io/andreasstorm/pen/JbXKob http://codepen.io/andreasstorm/pen/JbXKob Andreas Storm

See the Code - See it Full Page - See Details

This Pen uses: HTML, Stylus, JavaScript, and

]]> Toggle Fix - Spotify Desktop App 2016-11-12T22:15:30-07:00 Gleaming the Cubes http://codepen.io/cobra_winfrey/pen/yVePqa http://codepen.io/cobra_winfrey/pen/yVePqa Adam Kuhn

See the Code - See it Full Page - See Details

This Pen uses: Haml, SCSS, JavaScript, and

]]> Gleaming the Cubes 2016-11-11T16:42:43-07:00 Dark Matter http://codepen.io/KedeXx/pen/LbGXWz http://codepen.io/KedeXx/pen/LbGXWz Dejan Kerneza

See the Code - See it Full Page - See Details

pen made for #codevember. TIP: Click on canvas!

This Pen uses: HTML, Sass, JavaScript, and

]]> Dark Matter 2016-11-11T23:27:15-07:00