{"id":262731,"date":"2017-11-18T14:55:49","date_gmt":"2017-11-18T21:55:49","guid":{"rendered":"http:\/\/css-tricks.com\/?p=262731"},"modified":"2017-11-18T14:55:49","modified_gmt":"2017-11-18T21:55:49","slug":"simple-patterns-for-separation","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/simple-patterns-for-separation\/","title":{"rendered":"Simple Patterns for Separation (Better Than Color Alone)"},"content":{"rendered":"<p>Color is pretty good for separating things. That&#8217;s what your basic pie chart is, isn&#8217;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.<\/p>\n<p><!--more--><\/p>\n<h3>Patrick Dillon tackled the Pie Chart thing<\/h3>\n<p><a href=\"http:\/\/blog.bronto.com\/engineering\/enhancing-charts-with-svg-patterns\/\" rel=\"noopener\">Enhancing Charts With SVG Patterns<\/a>:<\/p>\n<blockquote><p>When one of the slices is filled with something more than color, it&#8217;s easier to figure out [who the Independents are]:<\/p><\/blockquote>\n<p data-height=\"438\" style=\"height: 438px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"EVrgZv\" data-default-tab=\"result\" data-user=\"pdillon\" data-embed-version=\"2\" data-pen-title=\"Political Party Affiliation - #2\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/pdillon\/pen\/EVrgZv\/\" rel=\"noopener\">Political Party Affiliation &#8211; #2<\/a> by Patrick Dillon (<a href=\"https:\/\/codepen.io\/pdillon\" rel=\"noopener\">@pdillon<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<blockquote><p>Filling a pie slice with a pattern is not a common charting library feature (yet), but if your library of choice is SVG-based, you are free to implement SVG patterns.<\/p><\/blockquote>\n<p>As in, literally a <code>&lt;pattern \/&gt;<\/code> in SVG!<\/p>\n<p>Here&#8217;s a simple one for horizontal lines:<\/p>\n<pre rel=\"SVG\"><code class=\"language-markup\">&lt;pattern \r\n    id=\"horzLines\" \r\n    width=\"8\" \r\n    height=\"4\" \r\n    patternUnits=\"userSpaceOnUse\"&gt;\r\n       &lt;line \r\n          x1=\"0\" \r\n          y1=\"0\" \r\n          x2=\"8\" \r\n          y2=\"0\" \r\n         style=\"stroke:#999;stroke-width:1.5\" \r\n       \/&gt;\r\n&lt;\/pattern&gt;<\/code><\/pre>\n<p>Now any SVG element can use that pattern as a fill. Even strokes. Here&#8217;s an example of mixed usage of two simple patterns:<\/p>\n<p data-height=\"330\" style=\"height: 330px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"qVpXmd\" data-default-tab=\"result,html\" data-user=\"chriscoyier\" data-embed-version=\"2\" data-pen-title=\"Simple Line Patterns\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/qVpXmd\/\" rel=\"noopener\">Simple Line Patterns<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>That&#8217;s nice for filling SVG elements, but what about HTML elements?<\/p>\n<h3>Irene Ros created Pattern Fills that are SVG based, but usable in CSS also.<\/h3>\n<p><a href=\"https:\/\/bocoup.com\/blog\/using-svg-patterns-as-fills\" rel=\"noopener\">Using SVG Patterns as Fills:<\/a><\/p>\n<blockquote>\n<p>There are several ways to use <a href=\"http:\/\/iros.github.io\/patternfills\/\" rel=\"noopener\">Pattern Fills<\/a>:<\/p>\n<ul>\n<li>\n<p>You can use the <a href=\"https:\/\/github.com\/iros\/patternfills\/blob\/master\/public\/patterns.css\" rel=\"noopener\"><code>patterns.css<\/code><\/a> file that contains all the current patterns. That will only work for non-SVG elements.<\/p>\n<\/li>\n<li>\n<p>You can use individual patterns, but copying them from the sample pages. CSS class definitions can be found <a href=\"http:\/\/iros.github.io\/patternfills\/sample_css.html\" rel=\"noopener\">here<\/a> and SVG pattern defs can be found <a href=\"http:\/\/iros.github.io\/patternfills\/sample_svg.html\" rel=\"noopener\">here<\/a><\/p>\n<\/li>\n<li>\n<p>You can add your own patterns or modify mine! The conversion process from SVG document to pattern is very tedious. The purpose of the pattern fills toolchain is to simplify this process. You can clone the repo, run <code>npm install<\/code> and <code>grunt dev<\/code> to get a local server going. After that, any changes or additions to the <code>src\/patterns\/**\/*<\/code> files will be automatically picked up and will re-render the CSS file and the sample pages. If you make new patterns, send them over in a pull request!<\/p>\n<\/li>\n<\/ul>\n<\/blockquote>\n<figure id=\"post-262735\" class=\"align-none media-262735\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/11\/patternfills.gif?w=500&#038;ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>Here&#8217;s me applying them to SVG elements (but could just as easily be applied to HTML elements):<\/p>\n<p data-height=\"432\" style=\"height: 432px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"XzMBjX\" data-default-tab=\"result,html\" data-user=\"chriscoyier\" data-embed-version=\"2\" data-pen-title=\"Practical Patterns\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/XzMBjX\/\" rel=\"noopener\">Practical Patterns<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>The CSS usage is as base64 data URLs though, so once they are there they aren&#8217;t super duper manageable\/changeable.<\/p>\n<p>Here&#8217;s Irene with <a href=\"http:\/\/iros.github.io\/patternfills\/examples\/d3.html\" rel=\"noopener\">an old timey chart<\/a>, using d3:<\/p>\n<figure id=\"post-262736\" class=\"align-none media-262736\"><a href=\"http:\/\/iros.github.io\/patternfills\/examples\/d3.html\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/11\/old-timey-chart.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/a><\/figure>\n<h3>Managing an SVG pattern in CSS<\/h3>\n<p>If your URL <a href=\"https:\/\/codepen.io\/tigt\/post\/optimizing-svgs-in-data-uris\" rel=\"noopener\">encode the SVG just right<\/a>, you and plop it right into CSS and have it remain fairly managable.<\/p>\n<p data-height=\"355\" style=\"height: 355px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"POEKxQ\" data-default-tab=\"css,result\" data-user=\"chriscoyier\" data-embed-version=\"2\" data-pen-title=\"Simple Line Patterns\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/POEKxQ\/\" rel=\"noopener\">Simple Line Patterns<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Other Examples Combining Color<\/h3>\n<p>Here&#8217;s <a href=\"https:\/\/bl.ocks.org\/jfsiii\/7772281\" rel=\"noopener\">one by John Schulz<\/a>: <\/p>\n<p data-height=\"448\" style=\"height: 448px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"BmJdrY\" data-default-tab=\"html,result\" data-user=\"chriscoyier\" data-embed-version=\"2\" data-pen-title=\"SVG Colored Patterns\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/BmJdrY\/\" rel=\"noopener\">SVG Colored Patterns<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Ricardo Marim\u00f3n <a href=\"http:\/\/bl.ocks.org\/rmarimon\/1178682\" rel=\"noopener\">has an example creating the pattern<\/a> in d3. The pattern looks largely the same on the slices, but perhaps it&#8217;s a start to modify. <\/p>\n<h3>Other Pattern Sources<\/h3>\n<p><a href=\"https:\/\/css-tricks.com\/websites-generate-svg-patterns\/\">We rounded a bunch of them up<\/a> recently!<\/p>\n<figure id=\"post-262738\" class=\"align-none media-262738\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/11\/hero-patterns.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Color is pretty good for separating things. That&#8217;s what your basic pie chart is, isn&#8217;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.<\/p>\n","protected":false},"author":3,"featured_media":0,"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":[466,1082,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":208855,"url":"https:\/\/css-tricks.com\/how-to-make-charts-with-svg\/","url_meta":{"origin":262731,"position":0},"title":"How to Make Charts with SVG","date":"October 5, 2015","format":false,"excerpt":"In my first post about making charts, I looked at methods that solely relied on CSS. I argued that this wasn\u2019t the best option in most cases; there are just too many tricky design and development hurdles to overcome. Generally speaking, it\u2019s best to make charts with a combination of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/css-audit-specificity-graph.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":312443,"url":"https:\/\/css-tricks.com\/creative-background-patterns-using-gradients-css-shapes-and-even-emojis\/","url_meta":{"origin":262731,"position":1},"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 &quot;Article&quot;","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":281258,"url":"https:\/\/css-tricks.com\/making-movies-with-amcharts\/","url_meta":{"origin":262731,"position":2},"title":"Making Movies With amCharts","date":"January 16, 2019","format":false,"excerpt":"In this article, I want to show off the flexibility and real power of amCharts 4. We\u2019re going to learn how to combine multiple charts that run together with animations that form a movie experience. Even if you\u2019re only interested in creating a different kind of animation that has nothing\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/bar-to-pie.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":198588,"url":"https:\/\/css-tricks.com\/textures-js\/","url_meta":{"origin":262731,"position":3},"title":"Textures.js","date":"March 20, 2015","format":false,"excerpt":"SVG patterns for Data Visualization by Riccardo Scalco. This is like all my favorite web things smashed together. Beautiful design, SVG, accessibility, programmatic control with JavaScript, and open source. #swoon","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":175074,"url":"https:\/\/css-tricks.com\/mega-list-svg-information\/","url_meta":{"origin":262731,"position":4},"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 &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":279882,"url":"https:\/\/css-tricks.com\/accessible-svg-icons-with-inline-sprites\/","url_meta":{"origin":262731,"position":5},"title":"Accessible SVG Icons With Inline Sprites","date":"December 7, 2018","format":false,"excerpt":"This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here's the ideal example: Menu Notes: It's not the itself that is interactive \u2014 it's wrapped in a for that. The .svg-icon class has some nice trickery, like em-based sizing to match the size of the text\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/menu-button.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/262731"}],"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=262731"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/262731\/revisions"}],"predecessor-version":[{"id":262751,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/262731\/revisions\/262751"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=262731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=262731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=262731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}