Ana Tudor’s Favorite CodePen Demos

By  on  

In 2013 I asked CodePen creator Chris Coyier about his favorite CodePen demos and people loved his picks and insight. I've even shared some of my favorite demos. This time around I wanted to know what Ana Tudor, one of my favorite CodePen artists, thought were her favorites. Enjoy!

Cocoon

I love canvas, I love interactive demos and I don't think I have ever been more impressed by somebody's work than when I discovered what Tiffany Rayside has created on CodePen. So I had to start off with one of her interactive canvas pens, even though it was painful to pick just one. Tap/ click to add nodes and watch them connecting and dancing around.

See the Pen Cocoon by Tiffany Rayside (@tmrDevelops) on CodePen.

Apparently transparent

3D is another love of mine and this next pen by Gerard Ferrandez is a beautiful example of what can be done with 3D transforms and JS interactivity.

See the Pen apparently transparent by Gerard Ferrandez (@ge1doot) on CodePen.

Shattering images

Image galleries are everywhere, so it was refreshing to see something more unusual done in this direction.

See the Pen Shattering Images by Szenia Zadvornykh (@zadvorsky) on CodePen.

Canvas snake bugs

Jack Rugile is one of my canvas heroes and this demo is just one the more recent examples of JS awesomeness his profile is so rich in. Just writing the previous sentence took me about ten minutes because I kept playing with it.

See the Pen Canvas Snake Bugs by Jack Rugile (@jackrugile) on CodePen.

Text background

Yoksel blew my mind with this pen. The technique she uses for achieving this cool effect is simple, yet really clever.

See the Pen embbax by yoksel (@yoksel) on CodePen.

3D sketcher

Another amazing canvas demo, this time by Jason Brown. This one makes a childhood dream come true - I remember wanting to be able to escape from the flat sheet of paper and be able to draw in 3D. Well, now it's possible...

See the Pen 3D Sketcher by Jason (@loktar00) on CodePen.

Geometry is beautiful

Kenji Saito has created many cool canvas pens. I've always loved geometry, so this is one I can never get tired of.

See the Pen Day56: WebGL Particle Animation#3. by Kenji Saito (@kenjiSpecial) on CodePen.

Particle exploder

Particle demos are always fun. Especially when they're also interactive. The first time I saw this mini-game by Matei Copot, I ended up spending a lot of time trying to "kill" as many particles as possible.

See the Pen Particle exploder (mini-game) by towc (@MateiGCopot) on CodePen.

SVG material resize animation

I don't normally find interface elements that exciting, but this demo by Nikolay Talanov is just too good to miss.

See the Pen SVG material resize animation by Nikolay Talanov (@suez) on CodePen.

X-ray me

I've started seeing more and more SVG demos lately and this pen by Noel Delgado is probably the cutest of them all.

See the Pen SVG Mask (Experiment) by Noel Delgado (@noeldelgado) on CodePen.

Ana Tudor

About Ana Tudor

Loves maths, especially geometry. Enjoys playing with code. Passionate about experimenting and learning new things. Fascinated by astrophysics and science in general. Huge fan of technological advance and its applications in all fields. Shows an interest in motor sports, drawing, classic cartoons, rock music, cuddling toys and animals with sharp claws and big teeth. Dreams about owning a real tiger.

Recent Features

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    TextboxList for MooTools and jQuery by Guillermo Rauch

    I'll be honest with you: I still haven't figured out if I like my MooTools teammate Guillermo Rauch. He's got a lot stacked up against him. He's from Argentina so I get IM'ed about 10 times a day about how great Lionel...

Discussion

  1. Cool list.
    I always enjoying with your entries, Keep it up.

  2. Shattering images demo <3
    And i have another one demo with SVG Material Resize Effect – http://codepen.io/suez/pen/bNKBmR (click on Read More and then close)

  3. wilfred

    Google has Aquire Codepen – https://ihatetomatoes.net/google-acquires-codepen/ is this true?

  4. Very cool demos, Specially I love the geometry patterns.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!