Having fun creating Ugly Christmas Sweaters with SVGs this Winter

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:

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


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


  1. Patterns on MDN

  2. Geoff Graham's article on CSS Tricks