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
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • By
    Adding Events to Adding Events in MooTools

    Note: This post has been updated. One of my huge web peeves is when an element has click events attached to it but the element doesn't sport the "pointer" cursor. I mean how the hell is the user supposed to know they can/should click on...

  • By
    Unicode CSS Classes

    CSS class name structure and consistency is really important; some developers camelcase classnames, others use dashes, and others use underscores.  One thing I've learned when toying around by HTML and CSS class names is that you can actually use unicode symbols and icons as classnames.

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!