"I love Patternify | CSS Pattern Generator"
www.patternify.com VS www.gqak.com
2022-05-05 08:42:15
PatternifyCSS Pattern Generator ? What is Patternify?Patternify is a simple pattern generator. I built it to save myself the pain of launching Photoshop just to export a 2px by 2px stripe pattern. Not only can you build your pattern online, but with the base64 code, you don't even need an image file anymore: just include the code in your CSS and you're ready to go!InstructionsDraw your pattern on the grid. You can use the cursors to limit the drawing surface and control the tiling. Once you're done, just download the PNG (make sure to rename it and add the ".png" extension at the end) or copy the code to your CSS. And you can also get a unique URL to share with other pattern aficionados.Help!If you can't figure this out, you have some cool new ideas to make it ten times better, or it's just plain broken for you, check out the Support page.ThanksThanks to Tim for helping me out with a couple javascript questions, and many thanks to Scott Hill for letting me steal pay homage to his style. 12345678910 12345678910Color#OpacityUndoPencilEraserEyedropperMoveClearFillDraw a pattern on the grid, and use the Old SchoolColorMisc{"matrix":[[0,0,0,[0,0,0,1],0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0],[0,[0,0,0,1],0,0,0,0,0,0,0,0],[[0,0,0,1],0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":4,"ycursor":4}{"matrix":[[0,0,0,0,[0,0,0,1],0,0,0,0,0],[0,0,0,[0,0,0,1],0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0],[0,[0,0,0,1],0,[0,0,0,1],0,0,0,0,0,0],[[0,0,0,1],0,0,0,[0,0,0,1],0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":5,"ycursor":5}{"matrix":[[[0,0,0,0.2],0,0,[0,0,0,0.5],[0,0,0,0.1],0,0,[0,0,0,1],0,0],[0,[0,0,0,0.2],[0,0,0,0.5],0,0,[0,0,0,0.1],[0,0,0,1],0,0,0],[0,[0,0,0,0.5],[0,0,0,0.2],0,0,[0,0,0,1],[0,0,0,0.1],0,0,0],[[0,0,0,0.5],0,0,[0,0,0,0.2],[0,0,0,1],0,0,[0,0,0,0.1],0,0],[[0,0,0,0.1],0,0,[0,0,0,1],[0,0,0,0.2],0,0,[0,0,0,0.5],0,0],[0,[0,0,0,0.1],[0,0,0,1],0,0,[0,0,0,0.2],[0,0,0,0.5],0,0,0],[0,[0,0,0,1],[0,0,0,0.1],0,0,[0,0,0,0.5],[0,0,0,0.2],0,0,0],[[0,0,0,1],0,0,[0,0,0,0.1],[0,0,0,0.5],0,0,[0,0,0,0.2],0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":8,"ycursor":8}{"matrix":[[0,0,0,0,[0,0,0,1],0,0,0,0,0],[0,0,0,[0,0,0,1],0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0],[0,[0,0,0,1],0,0,0,0,0,0,0,0],[[0,0,0,1],0,0,0,0,0,0,0,0,0],[0,[0,0,0,1],0,0,0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0],[0,0,0,[0,0,0,1],0,0,0,0,0,0],[0,0,0,0,[0,0,0,1],0,0,0,0,0],[0,0,0,0,0,[0,0,0,1],0,0,0,0]],"xcursor":10,"ycursor":8}{"matrix":[[[0,0,0,1],0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":4,"ycursor":4}{"matrix":[[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,[0,0,0,1],0],[0,0,0,0,0,0,0,[0,0,0,1],0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,[0,0,0,1],0,0,0,0],[0,0,0,0,[0,0,0,1],0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0],[0,[0,0,0,1],0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":9,"ycursor":9} {"matrix":[[[0,0,0,0.2],0,0,0,[0,0,0,0.2],[0,0,0,0.2],0,0,0,[0,0,0,0.2]],[0,0,0,[0,0,0,0.2],0,0,[0,0,0,0.2],0,0,0],[0,0,[0,0,0,0.2],0,0,0,0,[0,0,0,0.2],0,0],[0,[0,0,0,0.2],0,0,[0,0,0,0.2],[0,0,0,0.2],0,0,[0,0,0,0.2],0],[[0,0,0,0.2],0,0,[0,0,0,0.2],[0,0,0,0.2],[0,0,0,0.2],[0,0,0,0.2],0,0,[0,0,0,0.2]],[[0,0,0,0.2],0,0,[0,0,0,0.2],[0,0,0,0.2],[0,0,0,0.2],[0,0,0,0.2],0,0,[0,0,0,0.2]],[0,[0,0,0,0.2],0,0,[0,0,0,0.2],[0,0,0,0.2],0,0,[0,0,0,0.2],0],[0,0,[0,0,0,0.2],0,0,0,0,[0,0,0,0.2],0,0],[0,0,0,[0,0,0,0.2],0,0,[0,0,0,0.2],0,0,0],[[0,0,0,0.2],0,0,0,[0,0,0,0.2],[0,0,0,0.2],0,0,0,[0,0,0,0.2]]],"xcursor":10,"ycursor":10}{"matrix":[[[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":7,"ycursor":7}{"matrix":[[[62,202,207,1],[62,202,207,1],0,0,0,[120,207,62,1],[120,207,62,1],0,0,0],[[62,202,207,1],[62,202,207,1],0,0,0,[120,207,62,1],[120,207,62,1],0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,[224,216,62,1],[224,216,62,1],0,0,0,[242,153,94,1],[242,153,94,1],0],[0,0,[224,216,62,1],[224,216,62,1],0,0,0,[242,153,94,1],[242,153,94,1],0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10}{"matrix":[[0,0,[130,194,78,1],0,0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1]],[0,[130,194,78,1],0,0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0],[[130,194,78,1],0,0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0],[0,0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0,[130,194,78,1]],[0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0,[130,194,78,1],0],[[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0,[130,194,78,1],0,0],[[247,237,46,1],0,0,[51,105,214,1],0,0,[130,194,78,1],0,0,[51,105,214,1]],[0,0,[51,105,214,1],0,0,[130,194,78,1],0,0,[51,105,214,1],[237,230,90,1]],[0,[51,105,214,1],0,0,[130,194,78,1],0,0,[51,105,214,1],[237,230,90,1],0],[[51,105,214,1],0,0,[130,194,78,1],0,0,[51,105,214,1],[237,230,90,1],0,0]],"xcursor":10,"ycursor":10}{"matrix":[[0,0,0,0,0,0,0,0,0,0],[0,0,[217,52,181,1],[255,61,216,1],[255,5,201,1],0,0,0,0,0],[0,[217,52,181,1],[247,161,228,1],[255,61,216,1],[255,5,201,1],[240,34,195,1],0,0,0,0],[0,[217,52,181,1],[247,161,228,1],[255,61,216,1],[255,5,201,1],[240,34,195,1],[219,44,181,1],0,0,0],[0,0,[217,52,181,1],[247,161,228,1],[255,5,201,1],[240,34,195,1],[219,44,181,1],[189,51,159,1],0,0],[0,0,0,[255,61,216,1],[245,147,225,1],[240,34,195,1],[219,44,181,1],[189,51,159,1],[189,51,159,1],0],[0,0,[217,52,181,1],[247,161,228,1],[255,5,201,1],[240,34,195,1],[219,44,181,1],[189,51,159,1],0,0],[0,[217,52,181,1],[247,161,228,1],[255,61,216,1],[255,5,201,1],[240,34,195,1],[219,44,181,1],0,0,0],[0,[217,52,181,1],[247,161,228,1],[255,61,216,1],[255,5,201,1],[240,34,195,1],0,0,0,0],[0,0,[217,52,181,1],[255,61,216,1],[255,5,201,1],0,0,0,0,0]],"xcursor":10,"ycursor":10}{"matrix":[[[36,64,179,1],[36,64,179,1],[8,37,153,1],[75,197,219,1],0,0,0,0,0,0],[[36,64,179,1],[8,37,153,1],[127,223,240,1],[48,175,184,1],0,0,0,0,0,0],[[8,37,153,1],[127,223,240,1],[48,175,184,1],[8,37,153,1],0,0,0,0,0,0],[[36,64,179,1],[8,37,153,1],[127,223,240,1],[48,175,184,1],0,0,0,0,0,0],[[36,64,179,1],[36,64,179,1],[8,37,153,1],[75,197,219,1],0,0,0,0,0,0],[[36,64,179,1],[36,64,179,1],[36,64,179,1],[127,223,240,1],0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":6,"ycursor":4} {"matrix":[[0,0,0,0,0,0,0,0,0,0],[0,0,0,[0,0,0,0.3],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,0.3],0,0],[0,0,[0,0,0,0.3],[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[0,0,0,0.3],0],[0,[0,0,0,0.3],[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1],[0,0,0,0.3]],[0,[0,0,0,1],[255,247,163,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[255,255,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1]],[0,[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1]],[0,[0,0,0,1],[255,247,163,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[255,255,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1]],[0,[0,0,0,0.3],[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1],[0,0,0,0.3]],[0,0,[0,0,0,0.3],[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[0,0,0,0.3],0],[0,0,0,[0,0,0,0.3],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,0.3],0,0]],"xcursor":10,"ycursor":10}{"matrix":[[0,0,0,0,0,[76,15,209,1],[76,15,209,1],0,0,0],[0,0,0,[76,15,209,1],[76,15,209,1],0,0,0,0,0],[[76,15,209,1],0,[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],0,0,0],[0,[76,15,209,1],[76,15,209,1],0,[76,15,209,1],0,0,[76,15,209,1],0,0],[0,[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],0,0,0,0,0],[0,[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],0,0,0,0,0],[0,[76,15,209,1],[76,15,209,1],0,[76,15,209,1],0,0,[76,15,209,1],0,0],[[76,15,209,1],0,[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],0,0,0],[0,0,0,[76,15,209,1],[76,15,209,1],0,0,0,0,0],[0,0,0,0,0,[76,15,209,1],[76,15,209,1],0,0,0]],"xcursor":10,"ycursor":10}{"matrix":[[0,0,["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],[0,0,0,1],[0,0,0,1]],[0,["0","0","0",1],[235,136,61,1],0,0,[41,179,46,1],["0","0","0",1],0,0,0],[0,["0","0","0",1],[235,136,61,1],0,0,[41,179,46,1],["0","0","0",1],0,0,0],[0,["0","0","0",1],[235,136,61,1],[235,136,61,1],0,[41,179,46,1],["0","0","0",1],0,0,0],[0,0,["0","0","0",1],[235,136,61,1],[235,136,61,1],[41,179,46,1],[41,179,46,1],["0","0","0",1],0,0],[0,0,0,["0","0","0",1],[235,136,61,1],0,[41,179,46,1],[41,179,46,1],["0","0","0",1],0],[0,0,0,["0","0","0",1],[235,136,61,1],0,0,[41,179,46,1],["0","0","0",1],0],[0,0,0,["0","0","0",1],[235,136,61,1],0,0,[41,179,46,1],["0","0","0",1],0],[0,0,0,["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],0,0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10}{"matrix":[[0,0,0,0,0,0,0,[55,122,199,1],[55,122,199,1],0],[0,0,0,0,0,0,[55,122,199,1],[55,122,199,1],[38,115,209,1],[38,115,209,1]],[0,0,0,0,0,0,[55,122,199,1],[38,115,209,1],[38,115,209,1],[38,115,209,1]],[0,[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],0],[0,[38,115,209,1],[38,115,209,1],0,0,0,0,0,0,0],[0,[38,115,209,1],[38,115,209,1],0,0,0,0,[55,122,199,1],[55,122,199,1],0],[0,[38,115,209,1],[38,115,209,1],0,0,0,[55,122,199,1],[55,122,199,1],[38,115,209,1],[38,115,209,1]],[0,[38,115,209,1],[38,115,209,1],0,0,0,[55,122,199,1],[38,115,209,1],[38,115,209,1],[38,115,209,1]],[0,[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],0],[0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10}{"matrix":[[[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1]],[[138,81,32,1],[74,46,21,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1]],[[74,46,21,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1]],[[138,81,32,1],[230,230,7,1],[230,230,7,1],[71,41,15,1],[230,230,7,1],[230,230,7,1],[44,145,23,1],[44,145,23,1],[44,145,23,1],[44,145,23,1]],[[74,46,21,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[74,46,21,1],[138,81,32,1],[44,145,23,1],[44,145,23,1]],[[138,81,32,1],[74,46,21,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[74,46,21,1],[138,81,32,1],[44,145,23,1],[44,145,23,1],[44,145,23,1]],[[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[44,145,23,1],[44,145,23,1],[138,81,32,1]],[[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1]],[[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1]],[[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1]]],"xcursor":10,"ycursor":10}{"matrix":[[[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]],[[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]],[[0,0,0,1],[0,0,0,1],0,[0,0,0,1],[0,0,0,1],0,0,0,0,0],[[0,0,0,1],0,0,0,[0,0,0,1],0,0,0,[0,0,0,1],[0,0,0,1]],[[0,0,0,1],0,0,0,0,0,[0,0,0,1],0,0,0],[[0,0,0,1],0,0,0,[0,0,0,1],0,0,0,[0,0,0,1],[0,0,0,1]],[[0,0,0,1],[0,0,0,1],0,[0,0,0,1],[0,0,0,1],0,0,0,0,0],[[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]],[[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]],[[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]]],"xcursor":10,"ycursor":10}{"matrix":[[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[133,89,13,1],[133,89,13,1],[133,89,13,1],[19,110,37,1]],[[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1]],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1]]],"xcursor":10,"ycursor":10}PreviewDownload PNGBase64 Code .myDiv{ background:url( ) repeat;}Copy CSS CodeGet Pattern URL Coded and designed by @SachaGreifTweet Wanna chat? Come share your patterns on Convore!get matrix
