{"id":251922,"date":"2017-02-28T05:57:38","date_gmt":"2017-02-28T12:57:38","guid":{"rendered":"http:\/\/css-tricks.com\/?p=251922"},"modified":"2019-08-31T06:33:36","modified_gmt":"2019-08-31T13:33:36","slug":"websites-generate-svg-patterns","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/websites-generate-svg-patterns\/","title":{"rendered":"Websites to Generate SVG Patterns"},"content":{"rendered":"

These aren’t particularly hard to web search for, but just in case you didn’t know they existed I figured I’d drop them here. I’ve used all three of these in the past and I think they do a good job of driving home how cool of patterns you can make in SVG with such little code.<\/p>\n

<\/p>\n

SVG Backgrounds<\/a><\/h3>\n

Customizable SVG patterns and background designs for websites and blogs<\/p><\/blockquote>\n

\"\"<\/a><\/figure>\n

Hero Patterns<\/a><\/h3>\n

A collection of repeatable SVG background patterns for you to use on your web projects.<\/p><\/blockquote>\n

\"\"<\/a><\/figure>\n
<\/figure>\n

SVG Patterns Gallery<\/a><\/h3>\n

SVG images are typically smaller than bitmap images and remain sharp on high-dpi screens. Unlike CSS3 gradients, SVG images are supported on IE9.<\/p><\/blockquote>\n

\"\"<\/a><\/figure>\n

SVGeneration<\/a><\/h3>\n

Original link<\/a> is dead (conversation<\/a>), and a temporary(?) version is up at this link<\/a>.<\/p>\n

Scalable Vector Graphics are crisp and clear and can be rendered in all modern browsers.<\/p><\/blockquote>\n

\"\"<\/a><\/figure>\n
\"\"<\/figure>\n

SVGeez!<\/a><\/h3>\n

Totally awesome, well-stretched svg backgrounds, free for download.<\/p><\/blockquote>\n

You can customize them with things like colors and scale, which is a great touch:<\/p>\n

\"\"<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"

These aren’t particularly hard to web search for, but just in case you didn’t know they existed I figured I’d drop them here. I’ve used all three of these in the past and I think they do a good job of driving home how cool of patterns you can make in SVG with such little […]<\/p>\n","protected":false},"author":3,"featured_media":251923,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[1157,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/02\/HeroPatterns.png?fit=983%2C536&ssl=1","jetpack-related-posts":[{"id":312443,"url":"https:\/\/css-tricks.com\/creative-background-patterns-using-gradients-css-shapes-and-even-emojis\/","url_meta":{"origin":251922,"position":0},"title":"Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis","date":"June 10, 2020","format":false,"excerpt":"You can create stripes in CSS. That\u2019s all I thought about in terms of CSS background patterns for a long time. There\u2019s nothing wrong with stripes; stripes are cool. They can be customized into wide and narrow bands, criss-crossed into a checked pattern, and played with in other ways using\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/surfer-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":20917,"url":"https:\/\/css-tricks.com\/svg-patterns-gallery\/","url_meta":{"origin":251922,"position":1},"title":"SVG Patterns Gallery","date":"April 1, 2013","format":false,"excerpt":"Using SVG for background patterns is great because they 1) are very small 2) are vector, thus crisp at any screen resolution and 3) work in IE 9 (unlike gradients). Gallery by Philip Rogers.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":250451,"url":"https:\/\/css-tricks.com\/hero-patterns\/","url_meta":{"origin":251922,"position":2},"title":"Hero Patterns","date":"January 25, 2017","format":false,"excerpt":"A project by Steve Schoger: A collection of repeatable SVG background patterns for you to use on your digital projects. Customizeable patterns. You can even snag the path data for your own deeds.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/01\/heropatterns.png?fit=646%2C354&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":262731,"url":"https:\/\/css-tricks.com\/simple-patterns-for-separation\/","url_meta":{"origin":251922,"position":3},"title":"Simple Patterns for Separation (Better Than Color Alone)","date":"November 18, 2017","format":false,"excerpt":"Color is pretty good for separating things. That's what your basic pie chart is, isn't it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where accessibility is concerned) using patterns, or a combination. Patrick Dillon\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":305081,"url":"https:\/\/css-tricks.com\/a-few-background-patterns-sites\/","url_meta":{"origin":251922,"position":4},"title":"A Few Background Patterns Sites","date":"March 18, 2020","format":false,"excerpt":"If I need a quick background pattern to spruce something up, I often think of the CSS3 Patterns Gallery. Some of those are pretty intense but remember they are easily editable because they are just CSS. That means you could take these bold zags and chill them out. CodePen Embed\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/chevron-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":175074,"url":"https:\/\/css-tricks.com\/mega-list-svg-information\/","url_meta":{"origin":251922,"position":5},"title":"A Compendium of SVG Information","date":"July 22, 2014","format":false,"excerpt":"A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: , background-image, , , and \/. Using SVG by me SVG on the Web \u2014\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/251922"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=251922"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/251922\/revisions"}],"predecessor-version":[{"id":295176,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/251922\/revisions\/295176"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/251923"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=251922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=251922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=251922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}