patterns-info.js

[{"filename":"starry_night","title":"Galaxy","related":"","shade":"dark","tags":["subtle","skeuomorphic","filter","star","galaxy","night"],"shortDescription":"If you look closely, you might see some constellations.","date":"May 12, 2013","filter":"true","instructions":"If you look closely, then you might see some constellations. Just kidding. Make sure you test this graphic on all browsers, because it is a tricky one to render. If the browser doesn't support SVG filters, then the background color will show up instead.","bgColor":"background","parameters":[{"name":"background","type":"color","default":"03031a"},{"name":"density","type":"int","min":0,"max":1,"default":0.6},{"name":"star-color","type":"color","default":"fff"}]},{"filename":"ribbed","title":"Ripple","related":"","shade":"light","tags":["pattern","ribbed","stripes","gradient","glow","smooth"],"shortDescription":"A subtle ripple for your background. If you set background-repeat:no-repeat; in your css, then you can use this as a divider.","date":"May 13, 2013","instructions":"A radial gradient that is stretched over the entire width of the screen. Take a look at the code&mdash;it is easy to understand.<br/><br/>If you put this in a div with the css height equal to the height parameter, then it can be a nice shadowed divider for your page.","bgColor":"outer","parameters":[{"name":"height","type":"int","min":1,"max":80,"default":16},{"name":"inner","type":"color","default":"aaa"},{"name":"middle","type":"color","default":"e4e4e4"},{"name":"outer","type":"color","default":"f3f3f3"},{"name":"size","type":"percent","min":0,"max":500,"default":50},{"name":"center-x","type":"percent","min":-50,"max":150,"default":50},{"name":"center-y","type":"percent","min":-50,"max":150,"default":0}]},{"filename":"bluetube","title":"Bluetube","related":"","shade":"dark","tags":["pattern","ribbed","stripes","gradient","glow","smooth","bluetube"],"shortDescription":"I've got a blue website with a blue window. Blue is the color of all that I wear.","date":"May 2, 2013","instructions":"A radial gradient that is stretched over the entire height of the screen.","bgColor":"background","parameters":[{"name":"width","type":"int","min":1,"max":500,"default":10},{"name":"background","type":"color","default":"000"},{"name":"foreground","type":"color","default":"115"},{"name":"size","type":"percent","min":0,"max":500,"default":60},{"name":"center-x","type":"percent","min":-25,"max":125,"default":15},{"name":"center-y","type":"percent","min":-25,"max":125,"default":50}]},{"filename":"spotlight","title":"Absolute Spotlight","related":"","shade":"dark","tags":["fullscreen","absolute","essentials","spotlight","skeuomorphic","gradient","glow","subtle","smooth"],"shortDescription":"Your content will be center stage with this beautiful radial gradient. Did you notice the tiny filesize? All of the integer parameters are in pixels.","date":"May 6, 2013","instructions":"Your content will be center stage with this beautiful radial gradient. Did you notice the tiny filesize? All of the integer parameters are in pixels, but try typing a percent into the parameter input box.","bgColor":"color-3","parameters":[{"name":"center-x","type":"int","min":0,"max":1000,"default":350},{"name":"center-y","type":"int","min":0,"max":1000,"default":300},{"name":"radius","type":"int","min":0,"max":1000,"default":500},{"name":"color-1","type":"color","default":"777"},{"name":"offset-1","type":"int","min":0,"max":100,"default":0},{"name":"color-2","type":"color","default":"444"},{"name":"offset-2","type":"int","min":0,"max":100,"default":60},{"name":"color-3","type":"color","default":"111"},{"name":"offset-3","type":"int","min":0,"max":100,"default":100}]},{"filename":"daenerys","title":"Daenerys","related":"","shade":"light","tags":["scales","skeuomorphic","dragon","daenerys","curved","pattern"],"shortDescription":"Unleash your inner nerd and make your website look like a dragon.  It's okay, trust me; nerd is the new cool.","date":"April 22, 2013","instructions":"Unleash your inner nerd and make your website look like a dragon.  It's okay, trust me; nerd is the new cool.<br/><br/>This graphic consists of a background, and two ellipses with borders along the bottom. The inner border can cover the outer border if you make it large enough. Also, the 'Scale' variable was not intended to be a pun.","bgColor":"fill","parameters":[{"name":"scale","type":"int","default":"30","min":"5","max":"100"},{"name":"fill","type":"color","default":"eee"},{"name":"inner-border","type":"color","default":"f5f5f5"},{"name":"inner-border-width","type":"int","default":"1","min":"0","max":"6"},{"name":"outer-border","type":"color","default":"d2d2d2"},{"name":"outer-border-width","type":"int","default":"2","min":"0","max":"7"}]},{"filename":"blurry_vision","title":"Zags","related":"","shade":"light","tags":["stripes","grid","zig-zag","zags","angular","pattern"],"shortDescription":"This pattern will mess with your mind, and you will love it.","date":"April 27, 2013","instructions":"This pattern uses a three stripe pattern that is flipped around the x and y axis using matrix transformations.","bgColor":"background","parameters":[{"name":"width","type":"int","min":10,"max":200,"default":100},{"name":"background","type":"color","default":"fff"},{"name":"color1","type":"color","default":"f5f5f5"},{"name":"color2","type":"color","default":"fbfbfb"},{"name":"color3","type":"color","default":"f5f5f5"}]},{"filename":"shadowbox","title":"Shadowbox","related":"","shade":"dark","tags":["filters","noise","shadowbox","pattern","complex","square"],"shortDescription":"A swarm of dark squares are invading your screen.","date":"April 30, 2013","filter":"true","instructions":"A swarm of dark squares are invading your screen.</br><br/>I had to crop this image to 400x400, because even at that size, it is hard for the browser to render. This graphic uses the SVG turbulence filter to generate noise, then the SVG dilate filter to make that noise into squares.","bgColor":"background","presets":[{"name":"marine","background":"c7c7c7","boxes":"8cd4c9","box-density":10,"box-size":1},{"name":"salt","background":"dbdbdb","boxes":"fff","box-density":8,"box-size":25}],"parameters":[{"name":"background","type":"color","default":"000"},{"name":"boxes","type":"color","default":"611748"},{"name":"box-density","type":"int","default":4,"min":0,"max":10},{"name":"box-size","type":"int","default":9,"min":1,"max":50,"step":1}]},{"filename":"diag_stripes","title":"Diagonal Stripes","related":"","shade":"light","tags":["subtle","simple","diagonal","stripes","angular","basic","essentials","pattern","angular"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"May 15, 2013","instructions":"You can't go wrong with these stripes.  I prefer to keep them subtle so that they don't detract from the content of your site.  These stripes will never pixelate regardless of screen resolution or zoom level.","bgColor":"background","presets":[{"name":"cream","scale":8,"stripe-width":0.6,"background":"f0edd8","stripe":"f2d2cb"},{"name":"yankee","scale":100,"stripe-width":0.3,"background":"fff","stripe":"021d40"},{"name":"suit-jacket","scale":10,"stripe-width":0.8,"background":"05090f","stripe":"191b29"}],"parameters":[{"name":"scale","type":"int","default":"10","min":1,"max":300},{"name":"stripe","type":"color","default":"ddd"},{"name":"stripe-width","type":"int","default":".5","min":0,"max":3},{"name":"background","type":"color","default":"fff"}]},{"filename":"ziggy","title":"Ziggy","related":"","shade":"dark","tags":["ziggy","pattern","smooth","subtle","curved","texture"],"shortDescription":"I prefer this one to be subtle, but click \"generate\" and you can make it as bold as you like.","date":"May 1, 2013","bgColor":"background","instructions":"If you can't tell whats going on, increase the 'foreground-opacity' value.  This pattern consists of transparent circles drawn around the edges of the viewbox.  This pattern is great for making a solid color pop off the screen.","parameters":[{"name":"height","type":"int","default":7,"min":5,"max":500},{"name":"width","type":"int","default":7,"min":5,"max":500},{"name":"background","type":"color","default":"e65f5f"},{"name":"foreground","type":"color","default":"000"},{"name":"foreground-opacity","type":"int","default":0.04,"min":0,"max":1}]},{"filename":"oriental_roof","title":"Oriental Roof","related":"","shade":"light","tags":["oriental","curved","simple","roof","smooth","subtle"],"shortDescription":"You could make each of the stripes a color of the rainbow. It would be blindingly wonderful.","date":"May 10, 2013","bgColor":"color-5","instructions":"This pattern consists of layered curves with a stroke along the edges. The beauty of SVG is that these curved lines will never pixelate even on high resolution screens.","presets":[{"name":"big","scale":50,"color-1":"fff","fill-1":"e0d6c5","color-2":"fff","fill-2":"fff","color-3":"fff","fill-3":"ff9494","color-4":"fff","fill-4":"fff","color-5":"fff","fill-5":"192a61"},{"name":"storm","scale":20,"color-1":"111","fill-1":"000","color-2":"151515","fill-2":"111","color-3":"222","fill-3":"181818","color-4":"282828","fill-4":"222","color-5":"33","fill-5":"282828"}],"parameters":[{"name":"scale","type":"int","min":"1","max":"100","default":"5"},{"name":"color-1","type":"color","default":"eee"},{"name":"fill-1","type":"color","default":"fff"},{"name":"color-2","type":"color","default":"eee"},{"name":"fill-2","type":"color","default":"fff"},{"name":"color-3","type":"color","default":"eee"},{"name":"fill-3","type":"color","default":"fff"},{"name":"color-4","type":"color","default":"eee"},{"name":"fill-4","type":"color","default":"fff"},{"name":"color-5","type":"color","default":"eee"},{"name":"fill-5","type":"color","default":"fff"}]},{"filename":"its_a_square_world","title":"Square World","related":"","shade":"light","tags":["essentials","simple","pattern","square","diamonds","world","subtle"],"shortDescription":"Diagonal lines look so much better in vector graphics than in bitmapped graphics.","date":"May 2, 2013","bgColor":"background","instructions":"Squares rotated by 45 degrees.  Simple and classy.  It's a square world after all.","presets":[{"name":"royalty","size":20,"background":"160838","diamond":"1b0a45"}],"parameters":[{"name":"size","type":"int","min":1,"max":100,"default":10},{"name":"background","type":"color","default":"ddd"},{"name":"diamond","type":"color","default":"e2e2e2"}]},{"filename":"scoreboard","title":"Scoreboard","related":"","shade":"dark","tags":["gradient","scoreboard","pattern","smooth","subtle","glow"],"shortDescription":"This one tastes like nachos, hot dogs, and a cold one.","date":"April 25, 2013","bgColor":"background","instructions":"This one tastes like nachos, hot dogs, and a cold one.  For more control, click the manual editing button above. It isn't difficult!","presets":[{"name":"octopus","diameter":100,"background":"000","lightbulb":"000","lightbulb-edge":"001f33"}],"parameters":[{"name":"diameter","type":"int","min":1,"max":200,"default":6},{"name":"background","type":"color","default":"111"},{"name":"lightbulb","type":"color","default":"333"},{"name":"lightbulb-edge","type":"color","default":"222"}]},{"filename":"diag_checkers","title":"Soft Tiles","related":"","shade":"light","tags":["diagonal","simple","stripes","tile","checkers","angular","pattern","subtle","skeuomorphic","texture"],"bgColor":"fill","shortDescription":"Does this remind you more of a tiled floor? Or maybe a fancy upholstery sofa?","date":"May 3, 2013","instructions":"Does this remind you more of a tiled floor? Or maybe a fancy upholstery sofa?  The tiles are actually transparent and the background is just a css background-color. ","presets":[{"size":20,"fill":"edfaf9","edge-size":18,"edge":"fff","shadow":"c5e0e0"}],"parameters":[{"name":"size","type":"int","default":"50"},{"name":"fill","type":"color","default":"e6e6e6"},{"name":"edge-size","type":"int","default":"2","min":0,"max":25},{"name":"edge","type":"color","default":"ededed"},{"name":"shadow","type":"color","default":"dbdbdb"}]},{"filename":"eave-light-tiles","title":"Eave Light Tiles","related":"","shade":"light","tags":["diagonal","gradient","glow","eave","tiles","simple","stripes","tile","checkers","angular","pattern","subtle","skeuomorphic","texture"],"bgColor":"fill","shortDescription":"Does this remind you more of a tiled floor? Or maybe a fancy upholstery sofa?","date":"August 7, 2013","instructions":"Make your background a beautiful eave light tiled wall. As usual, this pattern has a tiny filesize and still expands to fit the viewport of the browser. ","presets":[{"size":20,"fill":"edfaf9","edge-size":18,"edge":"fff","shadow":"c5e0e0"}],"parameters":[{"name":"size","type":"int","default":"75"},{"name":"fill","type":"color","default":"39466b"},{"name":"edge-size","type":"int","default":"2","min":0,"max":25},{"name":"edge","type":"color","default":"313763"},{"name":"shadow","type":"color","default":"19203d"}]},{"filename":"granite","title":"Granite","related":"","shade":"light","tags":["granite","wall","skeuomorphic","pattern","smooth","subtle","filter","noise","texture"],"shortDescription":"This pattern can be a lot of different textures depending on how you generate it. If you like this pattern, then be sure to check out the similar \"Stucco\" pattern.","date":"April 28, 2013","filter":"true","instructions":"This a rich textured background with a tiny file size.  If the browser doesn't support SVG Filters, then this graphic will default to the base color.","bgColor":"base","parameters":[{"name":"base","type":"color","default":"f2f2f2"},{"name":"granularity","type":"int","default":0.3,"min":0.1,"max":2},{"name":"strength","type":"int","default":0.4,"min":0,"max":1}]},{"filename":"blue_jean","title":"Blue Jean","related":"","shade":"dark","tags":["blue","jean","stripes","pants","skeuomorphic","pattern","smooth","subtle","filter","noise","texture"],"shortDescription":"Amazing how a high-quality jean pattern can be less than 1kb, eh?  This one is impressively realistic.","date":"May 8, 2013","filter":"true","instructions":"Amazing how a high-quality jean pattern can be less than 1kb, eh?  This one is impressively realistic.<br/><br/>If the browser doesn't support SVG Filters, then this graphic will draw the stripe pattern without the texture.  If the browser doesn't support SVG, then it will default to the base color. Stripe Size should be a factor of 200, otherwise the stripes won't line up at the edge of the pattern.","bgColor":"color","parameters":[{"name":"color","type":"color","default":"051044"},{"name":"stripe-size","type":"int","default":4,"min":2,"max":10},{"name":"stripe-color","type":"color","default":"334"},{"name":"roughness","type":"int","default":0.5,"min":0,"max":1}]},{"filename":"dark_disco","title":"Dark Disco","related":"","shade":"dark","tags":["circles","dark","disco","curved","smooth"],"shortDescription":"Whip out the bell-bottoms and put your funky on. This pattern is going to Get Down Tonight.","date":"April 28, 2013","bgColor":"background","instructions":"Whip out the bell-bottoms and put your funky on. This pattern is going to Get Down Tonight. This pattern is simply six circles and a background.<br/><br/>The background is just a css color. If you really want to make this pattern disco, then animate the background-color with CSS3 animations.  However, that might be distracting to your users.","presets":[{"name":"retro","radius":1.5,"background":"79adba","color1":"e0c39c","color2":"dbaa7f","color3":"ed5c5c","color4":"b85160","color5":"ed5c5c","color6":"dbaa7f"}],"parameters":[{"name":"radius","type":"int","default":8,"min":1,"max":100},{"name":"background","type":"color","default":"000"},{"name":"color1","type":"color","default":"111"},{"name":"color2","type":"color","default":"151515"},{"name":"color3","type":"color","default":"191919"},{"name":"color4","type":"color","default":"1b1b1b"},{"name":"color5","type":"color","default":"191919"},{"name":"color6","type":"color","default":"151515"}]},{"filename":"diag_squares","title":"Patchwork","related":"","shade":"light","tags":["bold","essentials","diagonal","patchwork","colorful","square","angular"],"shortDescription":"I usually try to keep the patterns subtle, but this one was way too nice as it is.","date":"July 12, 2013","instructions":"Very simple, but effective.  Quilters of the world, rejoice!","bgColor":"color1","presets":[{"name":"pixelate","size":20,"color1":"f0f0f0","color2":"e4e4e4","color3":"e8e8e8","color4":"f4f4f4","color5":"fff"},{"name":"ridges","size":10,"color1":"111","color2":"1b1b1b","color3":"222","color4":"2a2a2a","color5":"2f2f2f"},{"name":"aqua","size":100,"color1":"0798f2","color2":"07b0f2","color3":"07c7f2","color4":"0cdbf2","color5":"5ef2e3"},{"name":"wood","size":12,"color1":"947e62","color2":"a68f7b","color3":"8c7a6a","color4":"8c694a","color5":"785e4e"},{"name":"old-red","size":20,"color1":"9c515d","color2":"b06a6a","color3":"a1455f","color4":"964155","color5":"6e394e"}],"parameters":[{"name":"size","type":"int","default":100,"step":1,"min":1,"max":200},{"name":"color1","type":"color","default":"fff"},{"name":"color2","type":"color","default":"e6e6e6"},{"name":"color3","type":"color","default":"f2f2f2"},{"name":"color4","type":"color","default":"fff"},{"name":"color5","type":"color","default":"f6f6f6"}]},{"filename":"tinyx","title":"Tiny X","related":"","shade":"light","tags":["tiny","X","subtle","pattern","angular"],"shortDescription":"These x's are so tiny that you might not notice they are there.  But they add a light glisten to the page.","date":"April 26, 2013","instructions":"X's so tiny that you might not notice they are there.  They add a light glisten to the page.  This pattern is simply two lines that make an x.","bgColor":"background","parameters":[{"name":"size","type":"int","default":2,"min":1,"max":5,"step":1},{"name":"scale","type":"int","default":6,"min":1,"max":20,"step":1},{"name":"background","type":"color","default":"eee"},{"name":"under","type":"color","default":"ddd"},{"name":"over","type":"color","default":"fff"}]},{"filename":"dual_triangles","title":"Dual Triangles","related":"","shade":"dark","tags":["subtle","pattern","angular","subtle","dual","triangles","simple"],"shortDescription":"Two triangles that are triangular and there are two of them.  That is all.","date":"April 24, 2013","instructions":"Who says backgrounds need to be complicated.","bgColor":"color1","parameters":[{"name":"width","type":"int","default":10,"min":2,"max":200},{"name":"color1","type":"color","default":"222"},{"name":"color2","type":"color","default":"262626"}]},{"filename":"3d_cubes","title":"3D Cubes","related":"","shade":"light","tags":["3D","pattern","subtle","cubes","angular","simple"],"shortDescription":"Obligatory 3D cube graphic. Its an interesting effect to scale these to 100x their original size.","date":"April 21, 2013","bgColor":"top","instructions":"Obligatory 3D cube graphic. Its an interesting effect to scale these to 100x their original size.","parameters":[{"name":"top","type":"color","default":"fff"},{"name":"left","type":"color","default":"eaeaea"},{"name":"right","type":"color","default":"f3f3f3"},{"name":"height","type":"int","min":"6","max":"600","default":10}]},{"filename":"glowing_tinted","title":"Tinted Sunglasses","related":"","shade":"dark","tags":["subtle","transparent","skeuomorphic","glow","subtle","gradient","tinted","essentials","sunglasses","simple"],"shortDescription":"This is a wonderful transparent pattern.  Click on another pattern and you will see it underneath.  This transparent radial gradient is tremendous for layering.","date":"May 6, 2013","instructions":"Just a transparent radial gradient. With CSS3 you can layer multiple background images.  This pattern looks great layered. Just seperate them with commas like so: background-image:url(data:image..) , url(data:image...);","parameters":[{"name":"center-x","type":"int","min":0,"max":1000,"default":250},{"name":"center-y","type":"int","min":0,"max":1000,"default":200},{"name":"opacity","type":"int","min":0,"max":1,"default":0.75},{"name":"radius","type":"int","min":0,"max":1000,"default":350},{"name":"color-1","type":"color","default":"777"},{"name":"offset-1","type":"int","min":0,"max":100,"default":0},{"name":"color-2","type":"color","default":"444"},{"name":"offset-2","type":"int","min":0,"max":100,"default":60},{"name":"color-3","type":"color","default":"222"},{"name":"offset-3","type":"int","min":0,"max":100,"default":100}]},{"filename":"tiles","title":"Squared","related":"","shade":"dark","tags":["tiles","angular","subtle","simple","squared","essentials","squares","simple"],"shortDescription":"I love this pattern. The filesize is somewhat larger than the other graphics, but I doubt anybody will complain about 3kb.","date":"May 18, 2013","instructions":"A 16x10 square pattern. The filesize is somewhat larger than the other graphics, but I doubt anybody will complain about 3kb.","bgColor":"background","presets":[{"name":"night-grid","size":30,"padding":0.94,"background":"000","overlay":"ddf","overlay-weight":10}],"parameters":[{"name":"size","type":"int","default":5,"step":1,"min":1,"max":100},{"name":"padding","type":"int","default":0,"min":0,"max":1},{"name":"background","type":"color","default":"47a"},{"name":"overlay","type":"color","default":"000"},{"name":"overlay-weight","type":"int","default":"1","min":0,"max":30}]},{"filename":"stucco","title":"Stucco","related":"","shade":"dark","tags":["filters","noisy","noise","stucco","wall","essentials","texture","subtle","skeuomorphic","simple"],"shortDescription":"This pattern is just the tip of the SVG texture iceberg.  There are some crazy customizations that it can do as well. (What the heck is a SVG texture iceberg, anyway?)","date":"July 5, 2013","bgColor":"background","filter":"true","instructions":"This pattern is basically a noise pattern.  It is very flexible, but it does rely on SVG filter effects.  If the browser doesn't support filter effects, then it will default to the background color.","parameters":[{"name":"background","type":"color","default":"942"},{"name":"background-intensity","type":"int","min":0,"max":5,"default":1},{"name":"burn-color","type":"color","default":"000"},{"name":"burn-intensity","type":"int","min":0.01,"max":5,"default":0.15}]},{"filename":"aztech","title":"Aztech","related":"","shade":"dark","tags":["filters","noisy","stucco","Aztech","pattern","texture"],"shortDescription":"Yes, I meant to misspell Aztec.  This pattern reminds me of a wool blanket.","date":"April 28, 2013","bgColor":"background1","filter":"true","instructions":"Yes, I meant to misspell Aztec.  This pattern reminds me of a wool blanket.<br/><br/>If you look at the code for this, then you'll see that the pattern code is inside of the g tag with id=pattern. You should try editing that pattern to make your own unique version of this graphic. The pattern you put in the g tag will have the same nice speckled effect.","parameters":[{"name":"size","type":"int","default":300,"min":10,"max":500},{"name":"background1","type":"color","default":"321"},{"name":"background2","type":"color","default":"432"},{"name":"pattern","type":"color","default":"111"}]},{"filename":"overlapping_thread","title":"Overlapping Thread","related":"","shade":"dark","tags":["overlapping","thread","pattern","texture","subtle","skeuomorphic"],"shortDescription":"This one looks so realistic that you could almost reach out and touch it. They haven't yet developed that kind of touchscreen.","date":"May 5, 2013","instructions":"This one should be straighforward.  Make sure you check out the related <a href='/generate/Overlapping-Thread-with-Glow'>Overlapping Thread With Glow</a> pattern too.","bgColor":"background","parameters":[{"name":"size","type":"int","default":20,"min":5,"max":50},{"name":"background","type":"color","default":"111"},{"name":"left","type":"color","default":"181818"},{"name":"right","type":"color","default":"222"}]},{"filename":"overlapping_thread_glow","title":"Overlapping Thread with Glow","related":"","shade":"dark","tags":["overlapping","thread","fullscreen","gradient","glow","pattern","texture","skeuomorphic"],"shortDescription":"This one looks so realistic that you could almost reach out and touch it. They haven't yet developed that kind of touchscreen.","date":"May 24, 2013","bgColor":"under-thread","instructions":"There are three layers here. The under-thread, the left and right threads, and a radial gradient on top consisting of an inner and outer color.<br/><br/>Some browsers are less efficient at rendering this fullscreen graphic.","parameters":[{"name":"size","type":"int","default":20,"min":5,"max":50},{"name":"under-thread","type":"color","default":"002"},{"name":"left","type":"color","default":"2b3a75"},{"name":"right","type":"color","default":"31417d"},{"name":"inner-glow","type":"color","default":"aaa"},{"name":"outer-glow","type":"color","default":"000"}]},{"filename":"gridiron","title":"Gridiron","related":"","shade":"dark","tags":["grid","fullscreen","gridiron","glow","gradient","pattern","texture","futuristic","skeuomorphic"],"shortDescription":".","date":"May 23, 2013","bgColor":"gradient-inner","instructions":"This graphic is a grid pattern with a radial gradient overlay. The focal point of the gradient is slightly off-center to add more depth. Some browsers don't render the fullscreen graphic very efficiently.","presets":[{"name":"spiderman","grid-color":"000","grid-size":15,"grid-width":1,"gradient-x":30,"gradient-y":30,"gradient-radius":60,"gradient-inner":"b80000","gradient-outer":"210000"}],"parameters":[{"name":"grid-color","type":"color","default":"001"},{"name":"grid-size","type":"int","default":"20","min":1,"max":100},{"name":"grid-width","type":"int","default":".5","min":0,"max":5},{"name":"gradient-x","type":"percent","default":"50","min":0,"max":100},{"name":"gradient-y","type":"percent","default":"50","min":0,"max":100},{"name":"gradient-radius","type":"percent","default":"60","min":0,"max":120},{"name":"gradient-inner","type":"color","default":"888"},{"name":"gradient-outer","type":"color","default":"222"}]},{"filename":"construction_paper","title":"Construction Paper","related":"","shade":"light","tags":["construction","paper","wall","texture","filter","noisy","subtle","essentials","simple","texture","skeuomorphic"],"shortDescription":"This one can be a bit tricky to render, so if you edit it, then make sure you test it on all browsers.","date":"May 26, 2013","bgColor":"background","filter":"true","instructions":"This pattern consists of a grayish texture color with a transparent color overlayed on top of it.  If the browser doesn't support SVG filters, then the graphic will not have any texture.","parameters":[{"name":"background","type":"color","default":"fff"},{"name":"overlay","type":"color","default":"fff"},{"name":"overlay-transparency","type":"int","min":0,"max":1,"default":0.75}]},{"filename":"beam","title":"Beam","related":"","shade":"dark","tags":["fullscreen","beam","ray","angular","vector","pattern","essentials"],"shortDescription":"Bold and beautiful. This is a perfect example of the scalability of svg.","date":"May 30, 2013","instructions":"The great thing about SVG is that this graphic will scale to the size of your website.  This graphic would be huge if it were a bitmap.","presets":[{"name":"Pride","beam1":"ff0000","beam2":"ff5500","beam3":"eaff00","beam4":"3cff00","beam5":"00f2ff","beam6":"0077ff","beam7":"ae00ff","beam8":"ff00a2","beam9":"ff0000"},{"name":"Patriot","beam1":"262626","beam2":"fff","beam3":"235","beam4":"833","beam5":"fff","beam6":"ddd","beam7":"fff","beam8":"262626","beam9":"235"}],"parameters":[{"name":"beam1","type":"color","default":"08446b"},{"name":"beam2","type":"color","default":"fefefe"},{"name":"beam3","type":"color","default":"afcce0"},{"name":"beam4","type":"color","default":"fff"},{"name":"beam5","type":"color","default":"e4eef5"},{"name":"beam6","type":"color","default":"fff"},{"name":"beam7","type":"color","default":"afcce0"},{"name":"beam8","type":"color","default":"fefefe"},{"name":"beam9","type":"color","default":"08446b"}]},{"filename":"beam_shade","title":"Beam Shade","related":"","shade":"dark","tags":["fullscreen","beam","shade","ray","pattern","texture","subtle","3D","futuristic"],"shortDescription":"Bold and beautiful. This is a perfect example of the scalability of svg.","date":"May 30, 2013","bgColor":"shade","instructions":"The great thing about SVG is that this graphic will scale infinitely.  This graphic would be huge if it were a bitmap.<br/><br/>However. As the 'count' variable grows larger, so does the filesize.  However, using the code editor you may be able remove some of the invisible beams.  Also, this graphic sometimes causes \"ghosting\" in the chrome browser.","presets":[{"name":"cloud","beam":"fff","shade":"000","weight":".1","count":9}],"parameters":[{"name":"beam","type":"color","default":"fff"},{"name":"shade","type":"color","default":"000"},{"name":"weight","type":"int","default":0.15,"min":0,"max":0.5},{"name":"count","type":"int","default":20,"step":1,"min":0,"max":50}]},{"filename":"beam_center","title":"Beam Center","related":"","shade":"dark","tags":["fullscreen","beam","center","ray","pattern","texture","futuristic"],"shortDescription":"Bold and beautiful. This is a perfect example of the scalability of svg.","date":"June 3, 2013","instructions":"The great thing about SVG is that this graphic will scale infinitely.  This graphic would be huge if it were a bitmap.<br/><br/>Maybe eventually I will make a version with full control over both colors, but the filesize would have to be much larger.<br/><br/>Aug. 1: Added parameters for x and y axis, so it doesn't have to only be \"Beam Center\" anymore.","bgColor":"beam","presets":[{"name":"cloud","beam":"fff","shade":"000"}],"parameters":[{"name":"beam","type":"color","default":"0084ff"},{"name":"shade","type":"color","default":"000"},{"name":"x","type":"percent","default":50,"min":0,"max":100},{"name":"y","type":"percent","default":50,"min":0,"max":100}]},{"filename":"pyramids","title":"Pyramids","related":"","shade":"light","tags":["3D","subtle","pattern","texture","pyramids","simple"],"shortDescription":"A nice 3D texture. ","date":"May 31, 2013","instructions":"This pattern consists of a background-color, and two rectangles rotated to create the shading.","bgColor":"base","presets":[{"name":"cloud","base":"fff","shadow":"000","weight":".1","count":9}],"parameters":[{"name":"size","type":"int","default":"12","min":"3","max":"100"},{"name":"base","type":"color","default":"fff"},{"name":"shadow","type":"color","default":"ddd"},{"name":"weight","type":"int","default":0.1,"min":0,"max":0.4}]},{"filename":"wood_grain","title":"Wood Grain","related":"","shade":"dark","tags":["fullscreen","beam","ray","glow","gradient","pattern","texture","futuristic"],"shortDescription":"No trees were harmed in the design of this graphic.  This one is for all of you skeuomorph fanatics out there.","date":"June 4, 2013","instructions":"No trees were harmed in the design of this graphic.  This one is for all of you skeuomorph fanatics out there.<br/><br/>This graphic isn't a perfect wood pattern, since wood generally has knots in it. It still looks great, especially when used in smaller windows or as a trim. <br/><br/>If the browser doesn't support SVG filters, then it won't have the grainy turbulence.","bgColor":"base-color","filter":"true","presets":[{"name":"light","base-color":"f2d7bd","grain-color":"4d0000","grain-weight":0.5,"turbulence-weight":0.25},{"name":"whitewash","base-color":"fff","grain-color":"6b0000","grain-weight":1,"turbulence-weight":0.2},{"name":"dark-mahogany","base-color":"210700","grain-color":"6b3000","grain-weight":3,"turbulence-weight":0.25}],"parameters":[{"name":"base-color","type":"color","default":"fcf1ed"},{"name":"grain-color","type":"color","default":"edccb9"},{"name":"grain-weight","type":"int","default":1.5,"min":0,"max":5},{"name":"turbulence-weight","type":"int","default":0.15,"min":0,"max":1}]},{"filename":"zags_glow","title":"Zags Glow","related":"","shade":"dark","tags":["subtle","simple","diagonal","glow","gradient","stripes","angular","basic","essentials","pattern","angular"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"June 5, 2013","instructions":"Diagonal stripes with a mostly transparent radial gradient over the top. Some browsers break a sweat rendering the full screen background.","bgColor":"inner","parameters":[{"name":"scale","type":"int","default":"10","min":1,"max":300},{"name":"stripe","type":"color","default":"f0f0f0"},{"name":"stripe-width","type":"int","default":".5","min":0,"max":3},{"name":"inner","type":"color","default":"fff"},{"name":"outer","type":"color","default":"9bbddb"}]},{"filename":"cross_stripes","title":"Cross Stripes","related":"","shade":"light","tags":["subtle","pattern","diagonal","angular","cross","stripes","cloth","angular"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"June 7, 2013","instructions":"Diagonal stripes going in opposite directions.  It almost seems like a fabric texture.","bgColor":"background","presets":[{"name":"cream","size":200,"background":"f0edd8","stripe-width":0.03,"stripe1":"614242","stripe2":"4d3b3b"}],"parameters":[{"name":"size","type":"int","default":"8","min":1,"max":100,"step":1},{"name":"background","type":"color","default":"fff"},{"name":"stripe-width","type":"int","default":2,"min":0,"max":3},{"name":"stripe1","type":"color","default":"eee"},{"name":"stripe2","type":"color","default":"f5f5f5"}]},{"filename":"cross_stripes_grunge","title":"Cross Stripes Grunge","related":"","shade":"light","tags":["subtle","pattern","diagonal","filter","rough","grunge","angular","cross","stripes","paper","cloth","angular"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"June 13, 2013","instructions":"Diagonal stripes going in opposite directions.  There is a layer of semi-transparent noise over the top. The size should be a factor of 400.","bgColor":"background","filter":"true","presets":[{"name":"stiches","size":16,"background":"fff","stripe-width":3.2,"stripe1":"aaa","stripe2":"eee","grunge":0.1},{"name":"oranges","size":80,"background":"fff","stripe-width":2,"stripe1":"ffb452","stripe2":"fff","grunge":0.1}],"parameters":[{"name":"size","type":"int","default":"10","min":1,"max":100},{"name":"background","type":"color","default":"fff"},{"name":"stripe-width","type":"int","default":2,"min":0,"max":3.3},{"name":"stripe1","type":"color","default":"fafafa"},{"name":"stripe2","type":"color","default":"f5f5f5"},{"name":"grunge","type":"int","default":0.1,"min":0,"max":0.6}]},{"filename":"college_ruled","title":"College Ruled","related":"","shade":"light","tags":["subtle","simple","diagonal","glow","gradient","stripes","angular","basic","essentials","pattern","angular"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"June 7, 2013","instructions":"If you want to add text over the top of this graphic, then set the padding equal to the padding parameters and the line-height equal to the line height parameter.<br/><br/>If the browser doesn't support SVG filters, then the paper won't have as nice of a texture.","filter":"true","bgColor":"paper-color","presets":[{"name":"cream","scale":8,"stripe-width":0.6,"background":"f0edd8","stripe":"f2d2cb"}],"parameters":[{"name":"padding-top","type":"int","default":80,"min":0,"max":200},{"name":"padding-left","type":"int","default":120,"min":0,"max":200},{"name":"paper-color","type":"color","default":"fff"},{"name":"line-color","type":"color","default":"568"},{"name":"line-height","type":"int","default":25,"min":5,"max":50}]},{"filename":"circle_jerk","title":"Circular Overlap","related":"","shade":"light","tags":["fullscreen","circular","circular","overlap"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"June 13, 2013","instructions":"The beauty of scalable vectors.  The file size grows proportional to the height and count parameters. This graphic suffers from \"ghosting\" in the Chrome browser.","bgColor":"foreground","presets":[{"name":"greentree","background":"104724","foreground":"fff","count":2,"height":200,"opacity":0.45}],"parameters":[{"name":"background","type":"color","default":"2e2e2e"},{"name":"foreground","type":"color","default":"fff"},{"name":"count","type":"int","default":4,"min":0,"max":30,"step":1},{"name":"height","type":"int","default":200,"min":5,"max":500},{"name":"opacity","type":"int","default":0.2,"min":0,"max":1}]},{"filename":"circle_offset","title":"Circular Overlap 2","related":"","shade":"dark","tags":["fullscreen","circular","circular","overlap"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"June 13, 2013","instructions":"The beauty of scalable vectors.  The file size grows proportional to the height and count parameters. This graphic suffers from \"ghosting\" in the Chrome browser.","bgColor":"foreground","presets":[{"name":"cream","scale":8,"stripe-width":0.6,"background":"f0edd8","stripe":"f2d2cb"}],"parameters":[{"name":"background","type":"color","default":"b6dbc3"},{"name":"foreground","type":"color","default":"0e1c47"},{"name":"count","type":"int","default":4,"min":0,"max":30,"step":1},{"name":"height","type":"int","default":300,"min":5,"max":400},{"name":"opacity","type":"int","default":0.1,"min":0,"max":1}]},{"filename":"circle_vertical","title":"Circular Overlap Vertical","related":"","shade":"light","tags":["fullscreen","circular","circular","overlap"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"June 14, 2013","instructions":"The beauty of scalable vectors.  The file size grows proportional to the height and count parameters. This graphic might have some minor \"ghosting\" in the Chrome browser.","bgColor":"foreground","cssRules":"background-repeat: repeat-x;","css":[{"name":"background-repeat","value":"repeat-x"}],"presets":[{"name":"cream","scale":8,"stripe-width":0.6,"background":"f0edd8","stripe":"f2d2cb"}],"parameters":[{"name":"background","type":"color","default":"00a7d1"},{"name":"foreground","type":"color","default":"fff"},{"name":"count","type":"int","default":2,"min":0,"max":20,"step":1},{"name":"height","type":"int","default":350,"min":5,"max":500},{"name":"opacity","type":"int","default":0.11,"min":0,"max":0.5}]},{"filename":"coils","title":"Coils","related":"","shade":"light","tags":["fullscreen","circular","circular","overlap"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"June 14, 2013","instructions":"Simple, but rich in character.  If the parameters aren't broad enough, then you can type in whatever you want.","bgColor":"background","presets":[{"name":"cream","scale":8,"stripe-width":0.6,"background":"f0edd8","stripe":"f2d2cb"}],"parameters":[{"name":"size","type":"int","default":18,"min":6,"max":50,"step":1},{"name":"background","type":"color","default":"fff"},{"name":"foreground","type":"color","default":"eee"},{"name":"weight","type":"int","default":3,"min":0,"max":4}]},{"filename":"simple_sun","title":"Simple Sun","related":"","shade":"dark","bgColor":"background","tags":["fullscreen","circular","circular","overlap"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"June 15, 2013","instructions":"This one is a bit hipster, but we all have a little hipster in us.","presets":[{"name":"cream","scale":8,"stripe-width":0.6,"background":"f0edd8","stripe":"f2d2cb"}],"parameters":[{"name":"background","type":"color","default":"253f66"},{"name":"beam-color","type":"color","default":"c26d6d"},{"name":"beam-width","type":"int","default":2,"min":1,"max":15},{"name":"beam-count","type":"int","default":25,"step":1,"min":1,"max":30},{"name":"sun-color","type":"color","default":"fcf7e8"},{"name":"sun-radius","type":"int","default":70,"min":1,"max":200},{"name":"sun-x","type":"percent","default":12,"min":0,"max":100},{"name":"sun-y","type":"int","default":100,"min":0,"max":300}]},{"filename":"sun_blast","title":"Sun Blast","related":"","shade":"dark","bgColor":"sun-color","tags":["fullscreen","circular","circular","overlap"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"June 20, 2013","instructions":"This is what summertime on Venus looks like.  This graphic would have never been possible with bitmapped graphics.  Some browsers are a bit slower to render this fullscreen graphic.","presets":[{"name":"cream","scale":8,"stripe-width":0.6,"background":"f0edd8","stripe":"f2d2cb"}],"parameters":[{"name":"sun-color","type":"color","default":"fff"},{"name":"sky","type":"color","default":"361a40"},{"name":"radius","type":"percent","default":40,"min":10,"max":200},{"name":"beam-color","type":"color","default":"fff"},{"name":"beam-width","type":"int","default":0.8,"min":0,"max":20},{"name":"beam-count","type":"int","default":35,"step":1,"min":1,"max":50}]},{"filename":"border_triangles","title":"Border Triangles","related":"","shade":"light","tags":["fullscreen","circular","circular","overlap"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"June 2, 2013","instructions":"A nice border along the top of the screen. The bottom background is just a css background-color.","bgColor":"base","cssRules":"background-repeat: repeat-x;","css":[{"name":"background-repeat","value":"repeat-x"}],"parameters":[{"name":"triangle","type":"color","default":"#fff"},{"name":"base","type":"color","default":"c1e6c8"},{"name":"size","type":"int","default":30,"min":5,"max":100},{"name":"shadow-size","type":"int","default":10,"min":0,"max":50},{"name":"inner-shadow","type":"color","default":"aeccae"}]},{"filename":"border_triangle","title":"Border Triangle","related":"","shade":"dark","tags":["fullscreen","circular","circular","overlap"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"June 3, 2013","instructions":"The same effect could be accomplished using CSS psuedo-elements, but either one works just fine. The bottom background is just a css background-color.","bgColor":"base","cssRules":"background-size: 100% auto; background-repeat: no-repeat;","css":[{"name":"background-size","value":"100% auto"},{"name":"background-repeat","value":"no-repeat"}],"presets":[{"name":"cream","scale":8,"stripe-width":0.6,"background":"f0edd8","stripe":"f2d2cb"}],"parameters":[{"name":"triangle","type":"color","default":"#fff"},{"name":"base","type":"color","default":"133f6b"},{"name":"shadow-size","type":"int","default":5,"min":0,"max":50},{"name":"inner-shadow","type":"color","default":"000e33"}]},{"filename":"dotty","title":"Bubble Wrap","related":"","shade":"light","tags":["fullscreen","circular","circular","overlap"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"July 7, 2013","instructions":"This pattern is so ridiculously simple, but its also very nice.","bgColor":"background","presets":[{"name":"cream","scale":8,"stripe-width":0.6,"background":"f0edd8","stripe":"f2d2cb"}],"parameters":[{"name":"height","type":"int","default":10,"min":0,"max":100,"step":1},{"name":"width","type":"int","default":10,"min":0,"max":100,"step":1},{"name":"background","type":"color","default":"fff"},{"name":"ring","type":"color","default":"ccc"},{"name":"ring-transparency","type":"int","default":0.5,"min":0,"max":1},{"name":"ring-width","type":"int","default":0.7,"min":0,"max":10}]},{"filename":"grate","title":"Grate","related":"","shade":"dark","tags":["fullscreen","circular","circular","overlap"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"July 9, 2013","instructions":"This pattern is just two circles, one drawn slightly below the other one to give it a glare.","bgColor":"background","presets":[{"name":"cream","scale":8,"stripe-width":0.6,"background":"f0edd8","stripe":"f2d2cb"}],"parameters":[{"name":"height","type":"int","default":10,"min":0,"max":100,"step":1},{"name":"width","type":"int","default":10,"min":0,"max":100,"step":1},{"name":"background","type":"color","default":"111"},{"name":"grate","type":"color","default":"303438"},{"name":"glare","type":"color","default":"666"},{"name":"glare-width","type":"int","default":5,"min":0,"max":9}]},{"filename":"funnel-stripes","title":"Arrow stripes","related":"","shade":"light","tags":["fullscreen","subtle","diagonal","basic","essentials","pattern","angular","arrow","stripes","fullscreen","mirror","focus"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"July 24, 2013","instructions":"I prefer to keep these stripes subtle so that they don't detract from the content of your site.  This graphic seems to funnel your attention towards the center of the page.","bgColor":"background","presets":[{"name":"cream","scale":8,"stripe-width":0.6,"background":"f0edd8","stripe":"f2d2cb"},{"name":"yankee","scale":100,"stripe-width":0.3,"background":"fff","stripe":"021d40"},{"name":"suit-jacket","scale":10,"stripe-width":0.8,"background":"05090f","stripe":"191b29"}],"parameters":[{"name":"scale","type":"int","default":"60","min":1,"max":300},{"name":"background","type":"color","default":"292827"},{"name":"stripe","type":"color","default":"ad754f"},{"name":"stripe-width","type":"int","default":".07","min":0,"max":3}]},{"filename":"circle-mess","title":"Circles Everywhere","related":"","shade":"light","tags":["fullscreen","circle","curved","everywhere","colorful"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"July 25, 2013","instructions":"A series of semi-transparent circles make a gorgeous fullscreen background.  This graphic isn't pixel-perfect so it will change slightly based on the size of its container.  The good thing is that it will expand to cover any screen.","bgColor":"background","parameters":[{"name":"background","type":"color","default":"fff"},{"name":"top-left","type":"color","default":"904bdb"},{"name":"top-right","type":"color","default":"33f04c"},{"name":"bottom-right","type":"color","default":"e3e352"},{"name":"bottom-left","type":"color","default":"eb9c34"},{"name":"center","type":"color","default":"d94747"},{"name":"top-center","type":"color","default":"3751b8"}]},{"filename":"little-zags","title":"Zig Zag","related":"","shade":"light","tags":["fullscreen","subtle","diagonal","basic","essentials","pattern","angular","arrow","stripes","fullscreen","mirror","focus"],"shortDescription":"Very simple. I expect this one to be used many times over.","date":"July 21, 2013","instructions":"It zigs, then it zags. Thats all.","bgColor":"background","parameters":[{"name":"scale","type":"int","default":"50","min":1,"max":300},{"name":"background","type":"color","default":"696969"},{"name":"stripe","type":"color","default":"6e6e6e"},{"name":"stripe-width","type":"int","default":"2","min":0,"max":3}]},{"filename":"launch-day-boom","title":"Happy Launch Day","related":"","shade":"light","tags":["fullscreen","subtle","glow","gradient","essentials","pattern","angular","beam","stripes"],"shortDescription":".","date":"July 29, 2013","instructions":"This graphic is a thank you to everybody who has tweeted, bookmarked, and visited SVGeneration. This site went live the night of July 28th and has had thousands of visitors and hundreds of tweets in the first 24 hours.  Thank you!<br/><br/>The great thing about SVG is that this graphic will scale infinitely.  This graphic would be huge if it were a bitmap.<br/><br/>Aug. 1: Added parameters for x, y, and radius.","bgColor":"beam1","parameters":[{"name":"x","type":"percent","default":50,"min":0,"max":100},{"name":"y","type":"percent","default":50,"min":0,"max":100},{"name":"radius","type":"percent","default":50,"min":0,"max":100},{"name":"beam1","type":"color","default":"fff"},{"name":"beam2","type":"color","default":"52c5ff"},{"name":"beam3","type":"color","default":"0791b3"},{"name":"shade","type":"color","default":"fff"}]},{"filename":"gplay","title":"GPlay","related":"","shade":"light","tags":["fullscreen","subtle","glow","gradient","essentials","pattern","angular","beam","stripes"],"shortDescription":".","date":"July 31, 2013","author":{"name":"Dimitrie Hoekstra","url":"http://dhesign.com/"},"instructions":"This one was requested by one of my visitors. It is based on the <a href='http://subtlepatterns.com/gplay/'>GPlay graphic</a> by Dimitrie over at subtlepatterns.com.</br><br/> The background color is just a css background-color, so it could be a nice effect to animate that on mouse hover.","bgColor":"background","parameters":[{"name":"height","type":"int","default":8,"min":1,"max":100},{"name":"width","type":"int","default":8,"min":1,"max":100},{"name":"background","type":"color","default":"f0f0f0"},{"name":"overlay","type":"color","default":"fff"},{"name":"weight","type":"int","default":15,"min":0,"max":40},{"name":"padding","type":"int","default":0.2,"min":0,"max":20}]},{"filename":"aura","title":"Aura","related":"","shade":"light","tags":["fullscreen","subtle","glow","gradient","colorful"],"shortDescription":".","date":"July 31, 2013","author":{"name":"SVGen","url":"http://www.svgeneration.com/"},"filter":"true","instructions":"This one takes advantage of a fringe case of the SVG turbulence filter. It doesn't work on Android, but its nice and compact. Surprisingly it looks about the same in all browsers. As always, be sure to test it.","bgColor":"background","parameters":[{"name":"background","type":"color","default":"fff"},{"name":"seed","type":"int","default":46,"min":1,"max":50,"step":1},{"name":"octaves","type":"int","default":1,"min":1,"max":20,"step":1},{"name":"size","type":"int","default":50,"min":1,"max":1000}]},{"filename":"vestal","title":"Bubble Fade","related":"","shade":"light","tags":["bubble","fade","geometric","gradient"],"shortDescription":".","date":"August 6, 2013","author":{"name":"SVGen","url":"http://www.svgeneration.com/"},"filter":"false","instructions":"Circles fading off into the distance. The filesize is directly proportional to the step parameter. The background color is once again just a css background-color.","bgColor":"background","parameters":[{"name":"background","type":"color","default":"94cce8"},{"name":"color","type":"color","default":"fff"},{"name":"step","type":"int","default":0.5,"min":0.2,"max":3,"step":0.1},{"name":"padding","type":"int","default":10,"min":0,"max":20,"step":1}]},{"filename":"hearts","title":"Hearts","related":"","shade":"light","tags":["hearts","shape","geometric","pattern"],"shortDescription":".","date":"July 6, 2013","author":{"name":"SVGen","url":"http://www.svgeneration.com/"},"filter":"false","instructions":"One of my visitors requested a heart pattern. Classic and simple, but effective.","bgColor":"background","parameters":[{"name":"background","type":"color","default":"fff"},{"name":"heart","type":"color","default":"a00"},{"name":"size","type":"int","default":200,"min":1,"max":300},{"name":"padding","type":"int","default":50,"min":0,"max":200,"step":1}]},{"filename":"graph-paper","title":"Graph Paper","related":"","shade":"light","tags":["graph","paper","shape","geometric","pattern","filters","turbulence","noise","grunge","square"],"shortDescription":".","date":"August 7, 2013","author":{"name":"SVGen","url":"http://www.svgeneration.com/"},"filter":"true","instructions":"Here's another tiny filesize pattern. Math Rules!<br/><br/>If the browser doesn't support SVG Filters, then the grungy turbulence will not show up.","bgColor":"background","parameters":[{"name":"size","type":"int","default":20,"min":1,"max":100},{"name":"background","type":"color","default":"fff"},{"name":"lines","type":"color","default":"ccc"},{"name":"line-width","type":"int","default":1,"min":0,"max":10},{"name":"turbulence","type":"int","default":0.1,"min":0,"max":1}]},{"filename":"gradient-tile","title":"Steel","related":"","shade":"dark","tags":["texture","gradient","tile","shape","geometric","pattern","filters","turbulence","noise","grunge","square"],"shortDescription":".","date":"August 21, 2013","author":{"name":"SVGen","url":"http://www.svgeneration.com/"},"filter":"true","instructions":"I've been under the hood making some big changes to SVGeneration.  While I prepare some big updates, here is another tiny filesize pattern to satisfy your appetites.<br/><br/>If the browser doesn't support SVG Filters, then the grungy turbulence will not show up.","bgColor":"background","parameters":[{"name":"size","type":"int","default":20,"min":1,"max":100},{"name":"top","type":"color","default":"2e2e2e"},{"name":"bottom","type":"color","default":"222"},{"name":"turbulence","type":"int","default":0.1,"min":0,"max":1}]},{"filename":"underglow","title":"Underglow","related":"","shade":"dark","tags":["texture","gradient","tile","shape","geometric","pattern","filters","turbulence","noise","grunge","square"],"shortDescription":".","date":"November 4, 2013","author":{"name":"SVGen","url":"http://www.svgeneration.com/"},"filter":"true","instructions":"Here is a nice background image, but the blur operation can be slow.  Be careful with the css background-size property on websites.","bgColor":"background","css":[{"name":"background-size","value":"100% 800px"},{"name":"background-repeat","value":"no-repeat"}],"parameters":[{"name":"background","type":"color","default":"fff"},{"name":"color1","type":"color","default":"f04848"},{"name":"color2","type":"color","default":"467aeb"},{"name":"color3","type":"color","default":"85e66c"},{"name":"color4","type":"color","default":"f26f2e"},{"name":"blur","type":"int","default":20,"min":0,"max":100}]}]