DEV Community

Cover image for 31 single DIV illustration — the DIVtober collection
Temani Afif
Temani Afif

Posted on

31 single DIV illustration — the DIVtober collection

After my first CSS drawing here I am with more CSS art. This time I spent 31 days with the CSS master Lynn Fisher in order to acquire some ancestral powers around the single DIV.

san goku

The challenge was to follow a prompt and create a CSS illustration each day during the whole month of October. Say hello to #divtober

PS: click on rerun at the bottom right to run the pen again. Not all of the demos have an infinite animation.

1. Fan

Let's start with a Japan style hand fan

2. Watch

You missed the last keynote of Apple? Don't worry, find below the full replay:

3. Quick

A quick sword slash! 👀👀
Roronoa is preparing for the next fight.

4. Loop

An infinite loop animation. Will they touch each other?

5. Tired

I am already tired after only 4 days...

6. Hungry

Hurry up and grab a slice!

7. Toxic


8. Growing

Let's take care of the nature

9. Homonym

I choose the word "bat" so here is a bat with a bat

10. Organized

We are already at day 10. Let's take a look at the calendar.

Still 21 to go 🥵🥵

11. Slice

You like cheese, don't you?

12. Squeak

I don't know the word "squeak" but it's seems to be the sound produced by a mouse.

It's not the case of mine 🤔 (🤭)

13. Camouflage

Someone is hidden here. Find him!

14. Fancy

15. Float

Oh! a letter from my parents. Yes, I am doing this challenge on a lost island.

16. Snow

An island where there is no snow...

17. Stack

When the stack overflow.

18. Shine

Say hello to my friend Sunny.

19. Nostalgia

Some nostalgia with Mario. Hover the box to earn coins! Sorry Firefox users, you cannot play the game.

20. Journey

The road to success is hard, long and — responsive 😛 (yes, yes! Adjust your screen size and see the result)

21. Magic

Hover the hat and TADA!!

Oops, where did the rabbit go again?! And what the hell is that animal 😩

22. Critter

Hey, Duo here! Let’s learn some Japanese?

Duolingo will not pay me for this ad

23. Loud

24. Smelly

A wild Koffing appeared!

25. Dip

A deep friendship. I meant, a "dip" friendship 😜

26. Spice

I don't think the below are friends...

27. Film

The Star Wars famous scene like you have never seen!

For this one I picked one of my old illustration from here:

28. Dots

Meet the Daldots! the new CSS villains

If you don't know the original cartoon, click here

29. Fruit

What smoothie are you? select your fruit!

30. Contrast

Tailwind developer VS CSS developer. Choose your road!
Both lead to the same destination but ...

I won't tell which one is which because I am pretty sure not everyone will see it the same way 😜

31. Spooky

It's finally over! it was fun but exhausting 😵

Don't forget to tell me your favorite one 👇. Follow this link if you want to see what the others have made:

Wait for more crazier and funny CSS art! I will get back with more superpowers!

Follow me on twitter if you don't want to miss some cool stuff I share there:

You want to support me?

buy me a coffee


Become a patron

Top comments (9)

monaalkhathlan profile image
Mona Alkhathlan

Number 25 The Dip, my favorite. An amazing work.

madza profile image

Always been impressed with your CSS skills 😉
Top notch stuff right here 💯

jerzakm profile image
Martin J

I'd like to be original, but this is indeed awesome. CSS is definitely my weakspot and checking out your work is always fun!

dailydevtips1 profile image
Chris Bongers

These are amazing!
Find it so impressive you can do all this with one div!

I even struggle to do it with multiple ones.

madsstoumann profile image
Mads Stoumann

Awesome work!

gomandev profile image

This awesome! 👍

grahamthedev profile image

Ending on a bang there, "the end" (spooky) is great!

Love all of them! ❤

calsch profile image

This is amazing 🤩. Also, can I use the fancy one in my own project? I think it looks really cool.

afif profile image
Temani Afif

yes you can ;)