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

Incredible Demos

  • By
    CSS Kwicks

    One of the effects that made me excited about client side and JavaScript was the Kwicks effect.  Take a list of items and react to them accordingly when hovered.  Simple, sweet.  The effect was originally created with JavaScript but come five years later, our...

  • By
    Use Custom Missing Image Graphics Using MooTools

    Missing images on your website can make you or your business look completely amateur. Unfortunately sometimes an image gets deleted or corrupted without your knowledge. You'd agree with me that IE's default "red x" icon looks awful, so why not use your own missing image graphic? The MooTools JavaScript Note that...

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!