DEV Community

Cover image for Mechanical & Psychedelic CSS-JavaScript Tinkering
Anna Villarreal
Anna Villarreal

Posted on

Mechanical & Psychedelic CSS-JavaScript Tinkering

I'm on one with this javascript/css animation stuff. I'm learning how to control things better, and it's exciting! I'm learning about planning the thing in my head before I try to lay it out (at least, to some extent). Today started with a rough idea, and I started as follows:

green circles

Using javascript, I got the images to repeat with (my new favorite) arrays and loops! When I was learning javascript at first, I thought "ok, arrays for data." A better thought is data for what?! How about fun repeating shapes! I am obsessed.

Here is a pic below for intrigue, but I'll let you know the animated version is so much cooler and you can see all the animations happening. Please look at the github below to see it!! (Yes, i'm excited about this. XD )

So, with plain Javascript and CSS:

Mechanical device

Who knows what this is. But it's definitely got a mechanical vibe with a slight hint of psychedelia. ef yes. Took me roughly 4 hours to finish. I am definitely on a path to make some cool stuff. What's in store for the future? An animated psychedelic robot? Say no more. Couldn't be more excited. Thanks for peeking!

Github: https://annavi11arrea1.github.io/circle/

This is why code is awesome...


Top comments (0)