June’s CodePen challenge? Shapes and lines. Oh, joy. These “minor assets” are notorious for being absolute design wreckers – seriously, one bad stroke or an ugly color, and boom, your whole creation is toast. It’s always that one “pesky line,” isn’t it?

So, naturally, I ditched my usual dark palette and went full candy-colored, soft pastel, pink explosion. (Adventure Time might have whispered sweet, colorful nothings in my ear.) The goal was to seriously shake things up and try something completely, jarringly new.

And yes, AI (aka ChatGPT), my trusty coding elf, definitely helped me churn out some delightfully random entries for this month’s madness.

---

Week 1: ◻️ Squircles

The very first challenge was squircles. And to be brutally honest, I had absolutely no clue what that was, or what it even looked like. This time, though, I decided to take it easy and aim for pure simplicity. So, not much going on – just a sassy, sunset-like gradient and a subtly pulsating shape right in the middle.

Ironically, CodePen ended up adding this piece to their monthly challenge collection. Funny how that works, isn’t it? Sometimes, doing less truly is more, especially when it comes to getting a little love from others.

---

---

Week 2: 〰️ Squiggles

Next on the agenda: squiggles. My mind immediately zapped back to what felt like 2010, the wild west of primitive smartphones and unpolished, yet incredibly characterful, toy-like designs. Remember Doodle Jump? Yeah, that vibe. So, doodle-like animations, but what else could I do with it?

Maybe my inner child completely took the wheel, or perhaps Adventure Time’s influence was just too strong, but I landed on a radio-like box that emits a cool, soundwave-esque movement. The best part? No JavaScript needed – just HTML and CSS! And, wouldn’t you know it, more CodePen recognition.

---

---

Week 3: 🔮 Spheres

For the spheres challenge, since the prompt was just a basic circle, I aimed for a more pearly, shimmery vibe. At the time, I was playing around with “glass look” styling, though honestly, I’m still not entirely sure where the “glass” part comes in. To me, it just looks like a cool design; I wouldn’t instantly associate it with glass unless someone told me!

So, I ended up with a squishy, pearly sphere that morphs into a blob-like shape when you press it. This one seemed to resonate with users, even if CodePen itself didn’t feature it.

---

---

Week 4: 🌀 Spirals

Finally, spirals. This one felt like hitting a brick wall. I tried to wrap my head around the logic and what it truly was, but I kept running into a personal dead end. Then, SpongeBob popped into my head, and I thought, “Why not keep it simple, but make it look like a spiral of dancing jellyfish?”

And, to my pleasant surprise, this one even earned some CodePen recognition.

---

---

To Summarize:

June’s CodePen challenges proved genuinely interesting, especially in how they encouraged open-ended thinking rather than dictating a precise, narrow direction. It was a fantastic opportunity to really stretch the creative muscles!

For my part, I made a conscious effort to be more independent in execution, aiming to rely less on AI – or at least, be “less lazy in a smart way.” This meant really trying to stick to just HTML and CSS, pushing myself to discover better and more efficient ways of doing things with tools I’m already pretty familiar with.

The cherry on top? A solid three out of four challenges I tackled were added to CodePen’s monthly challenge collection! That’s a pretty cool achievement, and a nice nod to the effort put in.