When it comes together like this, it’s Valentine’s Day post-worthy

This is the version I made for Cheryl Fudge who makes one of a kind art and clothing based in Nantucket, MA.

Much like the title, a lot of love went into making the components of this Valentine’s Day post for a client in Nantucket, MA. Some of these elements, in fact, had been archived months ago, as I waited for the right moment to string them all together

Inspiration

The inspiration for this project stemmed from the image below that I saw on Pinterest:

This piece was designed by Tiffany Lo and can be found here.

The free-flowing continuity of the thread and how it formed the text, coupled with the subtle shift in thick and thin organic lines, stood out to me. Additionally, I was drawn to the idea of “beginning anywhere”, so I pinned it to a client’s private board to let it marinate.

Cut to down the line, I somehow came across a generative art code featured on CodePen that mimicked the thread-like, random behavior. Since the “Begin Anywhere” piece had been on my radar, I quickly made the connection.

Digging into the Code

Knowing that this was the start of something good, I had to look under the hood to see how it was coded. I was impressed by the idea of creating thread-like strokes with randomized color values:

c.strokeStyle = "rgba(51," + Math.floor(Math.random() * 100 + 55) + ",51,1)"; and the fact that the code draws 200 tiny line segments per frame. With the animation running at 60 frames per second, that results in 12,000 lines drawn per second—far beyond the 12 FPS animation class I took in grad school.

I messed around with different values, thicknesses, and colors until I found something that felt smooth while still holding viewer’s attention. Moving on, I was also curious how the lines appeared to be bounded within the canvas, wondering if a similar logic could be use to guide points toward or away from specific areas, and form areas for text or even text itself. After taking a closer look, I noticed that the original code was still drawing transparent lines outside the canvas, making it less efficient. I fixed that and added boundaries in the center for the points to navigate around.

Stringing It All Together

While brainstorming for a Valentine’s Day post, I came across my archived work and decided to shape the boundaries in the center into a heart. To make it work within the canvas, I adjusted the coordinate system by flipping the heart’s y-values, negating py - heartY before applying the heart equation. This ensured the shape rendered correctly.

Next, I needed to find a font that would work in the center. I had saved a poster on Pinterest with lettering that caught my eye, and I also had Lino, a similar font that served as a great reference.

This is a screenshot of a concept for deepfried freinds I found on Pinterest that I believe was made from Anna Kulachek found here.

To refine the lettering, I worked with a designer I often collaborate with on small design projects. We went back and forth on the curls and swoop placement of each letter, debating whether it should say "XOXO," "LOVE," or "BE MINE." Considering the client’s clothes are all one-of-a-kind and handmade, "Made with Love" felt like the perfect fit. He handled the initial tracing, and I fine-tuned everything in Adobe Illustrator to get it just right. After multiple iterations, the final version came together.

The Final Touches

Overall, I’m thrilled with how this piece turned out and hope that it spread love on Valentine’s Day for my client’s followers.