DEV Community

Cover image for 10 Cool CodePen Demos (Divtober Edition)
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at levelup.gitconnected.com

7 1 1 1

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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay