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
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

  • By
    Introducing MooTools Dotter

    It's best practice to provide an indicator of some sort when performing an AJAX request or processing that takes place in the background. Since the dawn of AJAX, we've been using colorful spinners and imagery as indicators. While I enjoy those images, I am...

  • By
    jQuery Random Link Color Animations

    We all know that we can set a link's :hover color, but what if we want to add a bit more dynamism and flair? jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color. The...

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!