Create Beautiful Generative SVG Grids | Frontend Horse

Let’s Make Generative Art!

There’s a brand new Frontend Horse article where I detail how to make some fun and beginner-friendly generative art.

Creating Generative SVG Grids - Frontend Horse — frontend.horse

We touch on a lot of useful concepts throughout the article.

We start by getting the colors right! We’ll learn how to get great color palettes and cleverly utilize them to make a cohesive piece.

Then we make functions that draw SVG in different patterns. We’ll start simple and add complexity piece by piece. We even learn how to make variations of each design for generative bonus points!

We finish by putting some animation polish on our piece with GSAP so that each new grid transitions in beautifully.

I think you’ll enjoy the workflow and if you create your own, please share the result! I’ve included some ways to take it further and I’m excited to see what you make from it.

Read Creating Generative SVG Grids

Solo Streams

I’ve been doing some solo streams over on the Twitch channel the past couple of weeks, and we’ve been having a blast! I’m working on a personal site redesign and it’s been fun to code and chat with our wonderful community. If that sounds like fun, follow on Twitch and I’ll see you at the next one!

So long, partner

That’s all for this week! When I write long articles like this it often takes most of my spare time, so I don’t have as much bandwidth to write a full newsletter on top of that.

If you enjoy the article, I’d love if you share it out or send it to a friend. Every bit helps! 💜

Thanks for reading, and I’ll see you next week!

Your neigh-bor,

Alex