Web Stuff You Should Try #1: Patternify

Apr 27, 2016

As a web developer and programming enthusiest, I love trying out new things produced by other coders. Whether it be a new framework that's changing the way web applications are built, a library that makes code easier read and write, or a new text editor that's changing the game of editing text, I enjoy trying them all out. That's what the Web Stuff You Should Try series of blog posts is about. These are going to be very short posts that each discuss a piece of software I have recently tried and think you should try. So let's get started! 


Patternify is a CSS pattern generator written by Sacha Greif (@SachaGreif). I was recently working on updating my website (the one you're on now) and I wanted to make the background of one of the home page sections stand out just a little. I didn't want to put a full blown photograph as the background, so I instead decided I wanted light gray, diagonal striped lines to go over the a lighter gray background. One extremely easy way to do this would be to open up my Photoshop and make a .png of diagonal lines with a transparent background. I decided against that, because I wanted to try a CSS solution.

Let me explain Patternify a little more. It is a way to generate patterns for use on websites and other mediums. There are a few prebuild patterns, but the power comes from the fact that the user can create a custom pattern. You're presented with a box that is 10x10 pixels. If you don't need that many pixels for your pattern or you don't want a perfect square, you can easily change to any combination within the 0-10x0-10 range (examples: 2x2, 4x10, and 5x1) if you want. Then you choose the color of the pattern and fill in the pixels that will make your pattern. As you change things, you get a live preview on the right that shows how your pattern will look on a larger scale.

Once you're done you have 3 options. The first option is to download a .png file. This will provide you with an image that only has your pattern and a transparent background. Like I said before, this wasn't the solution I was looking for so I took a look at the other options. The second option (the one I went with) is to use the background() property in your CSS and then provide base64 data as the URL. This was something I had never heard of before, so its the option I went with. The third option is for a URL to be generated for image and then you can just link to it from your project. Similar to the first option, except you don't have to locally host the asset.

Besides that, there really isn't much more to say. This is a project that does one thing and does it really well. I would suggest everyone toy around with it a little bit and see if you can create a pattern that will give your websites that little extra flare.

At the time this was published, the home page of this website was using the diagonal pattern I generated from Patternify. See it in action here.