DEV Community

Cover image for Rainbow 🌈 animation page background
Matt Ellen-Tsivintzeli
Matt Ellen-Tsivintzeli

Posted on β€’ Edited on

1

Rainbow 🌈 animation page background

I was inspired by

to show off an old animation of mine. It's probably possible to do this with just CSS, so if you know how post it in the comments!

I had an idea to make balls zoom across the screen, in the colours of the rainbow. Here's the result (it can take a second to load, so be patient):

I wrote this before I knew about let and const, so please forgive that! In fact there are a few things I would change now, like using template strings. But, I suppose, if it isn't broken I shouldn't try to fix it :D

The frames are generated upfront, so the animation is just changing pictures, not calculating each frame. You can see the data-url updating in the page's background for each frame.

The speed of each ball is random.

If you save the background image, it will tile perfectly.

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post β†’

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay