Genuary Day 1 & 2

Here are my entries for GENUARY 2023 – days one and two.

Prompt for Day one is 'Perfect loop / Infinite loop / endless GIFs'. I took the assignment with the following:

  • Circles that expand from the center "simple fly through space effect"
  • Fly through the HSV colour space, every circle is 3.6 degrees clockwise in Hue from the previous one. In effect, fly through 100 circles to come back to where you started
  • Record a GIF (I did, it was way too big to be shared)
  • Technologies used: GSAP - GreenSock, SVG, simple and fast.

You can see the end result at:

See the Pen Genuary day 1 - perfect loop by Timo Koola (@tkoola) on CodePen.

Future ideas:

  • The loop is a bit off, but I ran out of my own timebox, might want to fix that
  • I'd like to redo this as a shader
  • I wanted to add a sparkle/marker at the point of the circle where the current circle colour is in at hue degrees. The sparkle would rotate slowly full 360 degrees, but also ran out of time with this one.

Day 2 – Made in 10 minutes

My setup:

  • Take off existing CSS-doodle Codepen I had laying around
  • Change the palette, and tune it for ten minutes, hands off the keyboard

Picked up a "desert" palette from Coolors - The super fast color palettes generator!:

,,,,Exported from Coolors.cohttps://coolors.co/ffa86b-ffba78-ffcc84-ffd991-ffe69e

Here is my original Codepen css doodle patterns, rotating with gsap:

See the Pen css doodle patterns, rotating with gsap by Timo Koola (@tkoola) on CodePen.

And now a cup of warm tea and start coding...

...and done. Took me 9 minutes, but like every ten minute project it came with a lot of preparation:

See the Pen css doodle patterns, rotating with gsap by Timo Koola (@tkoola) on CodePen.

With more time I would have added a stagger there for some more interesting motion

While doodling around these two items I also came up with solution for day 3 prompt glitch, but more about that tomorrow.