Yatrik Patel
Yatrik's Blog

Yatrik's Blog

Having fun creating Ugly Christmas Sweaters with SVGs this Winter

Having fun creating Ugly Christmas Sweaters with SVGs this Winter

Yatrik Patel's photo
Yatrik Patel
ยทDec 28, 2020ยท

3 min read

Play this article

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:

Ugly Christmas Sweater made with polygons

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:

Sweater 1 with curves

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:

Sweater 2 with curves and SVG patterns

Conclusion

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 ๐ŸŽ‰!

Credits

  1. Patterns on MDN

  2. Geoff Graham's article on CSS Tricks

ย 
Share this