Spooky Halloween!

This is a submission for Frontend Challenge - Halloween Edition, CSS Art.

Inspiration

Inspiration? The "inspiration" for this project came mostly from my girlfriend being like "CSS CHALLENGE! LET'S DO!". My thought process is sure, coding with the girlfriend, why not. But on a deeper note, in the back of my head I knew I hadn't really done any pure CSS drawings with animations and this challenge would be a perfect bridge to have some fun with css code and bring some artistic skills out. I already enjoy learning GLSL, so why not play with a language we already know!

Demo

Journey

As much as I would have loved to document every step with images for everyone to see, I'm just gonna summarize the entire experience. This will be a small first post from me!

First off, this is the first time I've ever used the -webkit-box-reflect and I found it surprisingly useful, especially for drawing. I found myself wishing at times i would use js for looping some stuff, but wanted to push myself to see what I could do in pure css. I found it pretty amazing what css has grown into and how much it has been updating.

This entire submission started honestly as a simple ghost that kept growing into this animated simplistic art piece. Here is how it started, without animation:

Projects like these are such a great tool for learning and diving deeper into what code like this can really make happen. So many great submissions already, here's just another one for the pool of great artists on here already!

This wasn't a team post but I wanna thank Anna Villarreal for giving me a nudge to make this. Btw, go check her css art submission out, it's really amazing!