10 Cool CodePen Demos (Divtober Edition)

alvaromontoro

Alvaro Montoro

Posted on November 13, 2023

10 Cool CodePen Demos (Divtober Edition)

Divtober is a coding challenge that consists of creating daily CSS Art during the month of October. There is one catch: you can only use a single HTML element (preferably a <div>). The challenge is organized by Lynn Fisher, a pro at making this type of single-element drawing with CSS.

Dozens of developers have participated in this edition, and here I collected ten of my favorite Divtober demos (in no specific order):

Greg Robleto: Treat (Divtober #07)

A cute kawaii s’more. Complete with nice shadows, which tend to be one of the most difficult things to code in these drawings… at least for me!


Lynn Fisher: Fall (Divtober #01)

Every divtober drawing that Lynn does is amazing in its own way. These abstract leaves and colors represent the fall season perfectly.


Carter Lovelace: Bones (Divtober #11)

An animated spooky skull. Quite appropriate for the challenge and the month it is in.


Temani Afif: Sparkle (Divtober #10)

This demo has two great things in one: the star shape (and its border) and the sparkling effect of the star. And all with a single HTML element!


Olajide Sheun: Space (Divtober #09)

I liked the simple style of this drawing and how the satellite summarizes the topic with so many details at the same time.


Greg Robleto: Witchy (Divtober #31)

This was an amazing drawing by Greg Robleto to conclude Divtober. Animated, detailed, and neat. One of my favorites of this edition.


Dan Wilson: Fake (Divtober #23)

An adaptation from an (already) impressive demo. Type “SPOOKY” and see how the Speak and Spell machine changes. Yes, it has JavaScript, but it is a single-element drawing in CSS, and that is more than enough. The JavaScript animation and sounds are just the cherry on top.


Lynn Fisher: Small (Divtober #14)

Another demo from Lynn Fisher. I’ve done a castle in CSS, and it is a nightmare. The fact that she could code one –with so many details– in a single div is mind-blowing.


Adam Kuhn: Fall (Divtober #01)

This demo has 8 divs, each of them is a CSS drawing for a different day of divtober. The leaves falling is mesmerizing and beautiful.


Jane Ori: Sparkle (Divtober #10?)

Technically speaking, I don’t think Jane Ori was planning this demo for divtober 10, but she shared it during divtober and referenced it in the title… also, it is impressive and amazing that it is done with a single HTML element. Kudos!

💖 💪 🙅 🚩
alvaromontoro
Alvaro Montoro

Posted on November 13, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related