DEV Community

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

Posted on

1 1

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...


Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

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

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay