10 Cool CodePen Demos (Divtober Edition)
Tags: css, webdev, showdev, html
Published: 2023-11-13 17:17:47

---
title: 10 Cool CodePen Demos (Divtober Edition)
published: true
description: A collection of 10 cool CSS Art shared on CodePen during Divtober 2023
tags: CSS,webdev,showdev,html
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfw3mg1mfnyng0ca29pp.png
canonical_url: https://levelup.gitconnected.com/10-cool-codepen-demos-divtober-edition-32172893143d
---

[Divtober](https://a.singlediv.com/divtober2023/) 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!

{% codepen https://codepen.io/robleto/pen/XWoPqoN %}

---

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

{% codepen https://codepen.io/lynnandtonic/pen/bGOjOOb %}

---

## Carter Lovelace: Bones (Divtober #11)

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

{% codepen https://codepen.io/carterfromsl/pen/KKbJLar %}

---

## 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!

{% codepen https://codepen.io/t_afif/pen/VwqgXYX %}

---

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

{% codepen https://codepen.io/Olajide-Seun/pen/JjwxbRX %}

---

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

{% codepen https://codepen.io/robleto/pen/jOdbvoY %}

---

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

{% codepen https://codepen.io/danwilson/pen/QWBaRvp %}

---

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

{% codepen https://codepen.io/lynnandtonic/pen/dywEYQZ %}

---

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

{% codepen https://codepen.io/cobra_winfrey/pen/eYxpRrg %}

---

## 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!

{% codepen https://codepen.io/propjockey/pen/qBLMXwp %}