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
    How to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • 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...

Incredible Demos

  • By
    MooTools Zebra Tables Plugin

    Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors. The CSS The above CSS is extremely basic.

  • By
    iPad Detection Using JavaScript or PHP

    The hottest device out there right now seems to be the iPad. iPad this, iPad that, iPod your mom. I'm underwhelmed with the device but that doesn't mean I shouldn't try to account for such devices on the websites I create. In Apple's...

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!