Having fun creating Ugly Christmas Sweaters with SVGs this Winter
3 min read
SVG Ugly Christmas Sweaters
I have been wanting to share this for a while now. I must do it now. Waiting longer or waiting till it is nearly perfect might be a mistake, especially in this tech industry anyways. So let me just go ahead and share what I currently have via this CodePen. There is probably a lot that can be improved but hey, I am just doing this for fun!
Below is a short summary of my journey with these sweaters so far.
How I started
I started creating these using polygons, and no curves at all. So I had something crappy at first, like the following:
What I had after fooling with Quadratic Curves
I needed some curved lines and came across Quadratic Curves and started to modify the code accordingly. Here is what I had then:
What I have after incorporating SVG patterns
Later, I realized that I could use SVG patterns to draw the zigzag lines as a background to fill the entire sweater instead. So here is what I have now:
Using Quadratic Curves improved the quality of my canvas drawing a ton. I also realized that it is possible to use SVG patterns to create the zigzag background I was hoping to create. It was much harder or maybe inefficient with the "for-loops" I was originally using. Either ways, I have left both of them in there to fool with later on.
I hope you enjoy recreating some sweaters and keep doing so until you find the one you like. Feel free to share a picture of the one it made for you if you'd like 😉. At last, Stay Warm, Happy Holidays, and Happy New Year 🎉!