Animating an SVG

Curious about the simple animation above?,

Well, let me share an intriguing tale, especially for those who revel in pushing boundaries...

"In 2021, before diving into a coding bootcamp, I noticed a shift in the coding landscape... Flash animations were no longer the sole option."

As I revisited the fundamentals of HTML and CSS, a YouTube video caught my attention—people animating SVGs with CSS. My reaction? "That's incredibly cool!" I delved into a series of quick tutorials, finding them simple yet captivating.

Enter Developed by Ed

He presented the process with such ease, humor, and intrigue, making me think, "I can do that!" I replicated his example precisely. Yet, unsatisfied, I delved deeper, aiming for complexity.

Aware of Le Wagon bootcamp, I decided to replicate their logo, infusing CSS and SVG animation. It took a few minutes to grasp, but I succeeded. My joy and pride knew no bounds. Yet, just bouncing it up and down wasn't enough; I envisioned a wagon on a road. The journey was exhilarating, and I shared my achievements enthusiastically, even sending it to the bootcamp Director, eager to embark on this creative journey with them.

From this:

=====>

To this:

In my quest for more, I discovered Cassie—her website, a treasure trove of SVGs and animations. Impressed, I set out to reproduce one of her SVGs, creating my own animated text logo.

The end result wasn't as spectacular as expected after numerous struggles.

However, every challenge brought a 1% improvement. Trust me; it was more than satisfying. Armed with newfound knowledge, I crafted my animated logo, background, and designs—ultimately deploying new proprietary contents on our new homepage at work just two days ago. (Now, eagerly awaiting the review and deployment to production. 😆)

I will post sample shots of the latest design in my projects section once our Team got our latest homepage features live! 🥳