{"id":254220,"date":"2017-05-03T13:30:11","date_gmt":"2017-05-03T20:30:11","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=254220"},"modified":"2020-12-15T07:45:07","modified_gmt":"2020-12-15T15:45:07","slug":"svg-patterns","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/svg\/svg-patterns\/","title":{"rendered":"SVG Patterns"},"content":{"rendered":"\n<p>The SVG <code>&lt;pattern&gt;<\/code> element allows us to define patterns inside of our SVG markup and use those patterns as a <code>fill<\/code>. The basic process for patterns goes something like:<\/p>\n\n\n\n<ul><li>Define a <code>&lt;pattern&gt;<\/code> inside of the SVG<\/li><li>Define the shapes inside of the pattern<\/li><li>Use the shapes<\/li><li>Create a new shape and fill it with the pattern<\/li><\/ul>\n\n\n\n<!--more-->\n\n\n\n<p>This is a collection of simple SVG shapes used as patterns. This list may grow over time but the idea is less to have a comprehensive collection than it is to have the syntax handy as a starting point for creating new and exciting patterns.<\/p>\n\n\n\n<p>We&#8217;re also keeping a <a href=\"http:\/\/codepen.io\/collection\/nJbGEB\/\" rel=\"noopener\">collection of these<\/a> over on CodePen.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-circle-pattern\">Circle Pattern<\/h3>\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg width=\"100%\" height=\"100%\">\n  \n  &lt;!-- Create mask that we'll use to define a slight gradient -->\n  &lt;mask maskUnits=\"userSpaceOnUse\" id=\"fade\">\n    &lt;!-- Here's that slight gradient -->\n     \t&lt;linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"100%\">\n      &lt;stop offset=\"0\" style=\"stop-color: #FFFFFF\">&lt;\/stop>\n      &lt;stop offset=\"1\" style=\"stop-color: #000000\">&lt;\/stop>\n    &lt;\/linearGradient>\n    &lt;!-- The canvas for our mask -->\n    &lt;rect fill=\"url(#gradient)\" width=\"100%\" height=\"100%\">&lt;\/rect>\n  &lt;\/mask>\n    \n  &lt;!-- Let's define the pattern -->\n  &lt;!-- The width and height should be double the circle radius we plan to use -->\n  &lt;pattern id=\"pattern-circles\" x=\"0\" y=\"0\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n    &lt;!-- Now let's draw the circle -->\n    &lt;!-- We're going to define the `fill` in the CSS for flexible use -->\n    &lt;circle mask=\"url(#fade)\" cx=\"20\" cy=\"20\" r=\"20\">&lt;\/circle>\n  &lt;\/pattern>\n  &lt;!-- The canvas with our applied pattern -->\n  &lt;rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"url(#pattern-circles)\">&lt;\/rect>\n  \n&lt;\/svg><\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_aWZdXP\" src=\"\/\/codepen.io\/anon\/embed\/aWZdXP?height=350&amp;theme-id=1&amp;slug-hash=aWZdXP&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed aWZdXP\" title=\"CodePen Embed aWZdXP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-checkerboard-pattern\">Checkerboard Pattern<\/h3>\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg width=\"100%\" height=\"100%\">\n    \n  &lt;!-- Let's define the pattern -->\n  &lt;!-- The width and height should be double the size of a single checker -->\n  &lt;pattern id=\"pattern-checkers\" x=\"0\" y=\"0\" width=\"200\" height=\"200\" patternUnits=\"userSpaceOnUse\">\n    &lt;!-- Two instances of the same checker, only positioned apart on the `x` and `y` axis -->\n    &lt;!-- We will define the `fill` in the CSS for flexible use -->\n    &lt;rect class=\"checker\" x=\"0\" width=\"100\" height=\"100\" y=\"0\">&lt;\/rect>\n    &lt;rect class=\"checker\" x=\"100\" width=\"100\" height=\"100\" y=\"100\">&lt;\/rect>\n  &lt;\/pattern>\n  \n  &lt;!-- Define the shape that will contain our pattern as the fill -->\n  &lt;rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"url(#pattern-checkers)\">&lt;\/rect>\n  \n&lt;\/svg><\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KmgxxN\" src=\"\/\/codepen.io\/anon\/embed\/KmgxxN?height=350&amp;theme-id=1&amp;slug-hash=KmgxxN&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KmgxxN\" title=\"CodePen Embed KmgxxN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hexagon-pattern\">Hexagon Pattern<\/h3>\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg width=\"100%\" height=\"100%\">\n   \n    &lt;!-- Define the pattern -->\n    &lt;pattern id=\"pattern-hex\" x=\"0\" y=\"0\" width=\"112\" height=\"190\" patternUnits=\"userSpaceOnUse\" viewBox=\"56 -254 112 190\">\n\t    \n      &lt;!-- Group the hexagon shapes -->\n      &lt;!-- Each path could have a class for more styling\/animating options -->\n      &lt;!-- We're going to control the fill and stroke in the CSS for flexibility -->\n      &lt;g id=\"hexagon\">\n        &lt;path d=\"M168-127.1c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-0.3 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5C167-127,167.5-127.1,168-127.1 L168-127.1z\">&lt;\/path>\n        &lt;path d=\"M112-222.5c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2l-53.4,30.5 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5 C111-222.4,111.5-222.5,112-222.5L112-222.5z\">&lt;\/path>\n        &lt;path d=\"M168-317.8c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-191 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5 C167-317.7,167.5-317.8,168-317.8L168-317.8z\">&lt;\/path>\n      &lt;\/g>\n  \n  &lt;\/pattern>\n   \n  &lt;!-- The canvas for our pattern -->\n  &lt;rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"url(#pattern-hex)\">&lt;\/rect>\n  \n&lt;\/svg><\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oWLLvZ\" src=\"\/\/codepen.io\/anon\/embed\/oWLLvZ?height=350&amp;theme-id=1&amp;slug-hash=oWLLvZ&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oWLLvZ\" title=\"CodePen Embed oWLLvZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cube-pattern\">Cube Pattern<\/h3>\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg width=\"100%\" height=\"100%\">\n   \n   &lt;!-- Define the pattern -->\n   &lt;pattern id=\"pattern-cubes\" x=\"0\" y=\"126\" patternUnits=\"userSpaceOnUse\" width=\"126\" height=\"200\" viewBox=\"0 0 10 16\"> \n     \n     &lt;g id=\"cube\">\n       &lt;!-- We'll apply the `fill` in the CSS for flexibility -->\n       &lt;path class=\"left-shade\" d=\"M0 0l5 3v5l-5 -3z\">&lt;\/path>\n       &lt;path class=\"right-shade\" d=\"M10 0l-5 3v5l5 -3\">&lt;\/path>\n     &lt;\/g>\n  \t\n     &lt;!-- Apply the cube shapes -->\n     &lt;use x=\"5\" y=\"8\" xlink:href=\"#cube\">&lt;\/use>\n     &lt;use x=\"-5\" y=\"8\" xlink:href=\"#cube\">&lt;\/use>\n   \n   &lt;\/pattern>\n   \n   &lt;!-- The canvas for our pattern -->\n   &lt;rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"url(#pattern-cubes)\">&lt;\/rect>\n  \n&lt;\/svg><\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YVWqxG\" src=\"\/\/codepen.io\/anon\/embed\/YVWqxG?height=350&amp;theme-id=1&amp;slug-hash=YVWqxG&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YVWqxG\" title=\"CodePen Embed YVWqxG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-chevron-pattern\">Chevron Pattern<\/h3>\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg width=\"100%\" height=\"100%\">&lt;svg width=\"100%\" height=\"100%\">\n   \n   &lt;!-- Define the pattern -->\n   &lt;pattern id=\"pattern-chevron\" x=\"0\" y=\"0\" patternUnits=\"userSpaceOnUse\" width=\"100\" height=\"180\" viewBox=\"0 0 10 18\"> \n     \n     &lt;!-- Group the chevron shapes -->\n     &lt;g id=\"chevron\">\n       &lt;!-- Chevron consists of two shapes, a left and a right to form a `v` -->\n       &lt;!-- We'll apply the `fill` in the CSS for flexibility -->\n       &lt;path class=\"left\" d=\"M0 0l5 3v5l-5 -3z\">&lt;\/path>\n       &lt;path class=\"right\" d=\"M10 0l-5 3v5l5 -3\">&lt;\/path>\n     &lt;\/g>\n  \t\n     &lt;!-- Apply the shapes -->\n     &lt;!-- `y=\"9\"` narrows the space between rows  -->\n     &lt;use x=\"0\" y=\"9\" xlink:href=\"#chevron\">&lt;\/use>\n   \n   &lt;\/pattern>\n   \n   &lt;!-- The canvas for our pattern -->\n   &lt;rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"url(#pattern-chevron)\">&lt;\/rect>\n  \n&lt;\/svg><\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xdOVjG\" src=\"\/\/codepen.io\/anon\/embed\/xdOVjG?height=350&amp;theme-id=1&amp;slug-hash=xdOVjG&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xdOVjG\" title=\"CodePen Embed xdOVjG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>If you&#8217;d like to play around in real time with the different attributes of a pattern to get a feel for how the patterning works, try this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MYmbwv\" src=\"\/\/codepen.io\/anon\/embed\/MYmbwv?height=550&amp;theme-id=1&amp;slug-hash=MYmbwv&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MYmbwv\" title=\"CodePen Embed MYmbwv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The SVG &lt;pattern&gt; element allows us to define patterns inside of our SVG markup and use those patterns as a fill. The basic process for patterns goes something like: Define a &lt;pattern&gt; inside of the SVG Define the shapes inside of the pattern Use the shapes Create a new shape and fill it with the [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":254217,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-snippet.php","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":""},"tags":[1082,469,1265],"acf":[],"jetpack-related-posts":[{"id":236513,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/fill\/","url_meta":{"origin":254220,"position":0},"title":"fill","date":"January 7, 2016","format":false,"excerpt":"The fill property in CSS is for filling in the color of a SVG shape. .eyeball { fill: red; } Remember: This will override a presentation attribute This will not override an inline style e.g. Values The fill property can accept any CSS color value. Named colors \u2014 orange Hex\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236635,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke\/","url_meta":{"origin":254220,"position":1},"title":"stroke","date":"January 12, 2016","format":false,"excerpt":"The stroke property in CSS is for adding a border to SVG shapes. .module { stroke: black; } Remember: This will override a presentation attribute This will not override an inline style e.g. Values The stroke property can accept any CSS color value. Named colors \u2014 orange Hex colors \u2014\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":254303,"url":"https:\/\/css-tricks.com\/snippets\/svg\/shape-morphing-icons-button-click\/","url_meta":{"origin":254220,"position":2},"title":"Shape Morphing Icons in Button on Click","date":"May 4, 2017","format":false,"excerpt":"The idea here is use an SVG icon in a button and swap that icon out for another when the button is clicked. A button click often suggests an action has been taken, so switching icons can be a nice UI touch to show the change in context and confirm\u2026","rel":"","context":"In \"shape morphing\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236645,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/stroke-dasharray\/","url_meta":{"origin":254220,"position":3},"title":"stroke-dasharray","date":"January 18, 2016","format":false,"excerpt":"The stroke-dasharray property in CSS sets the length of dashes in the stroke of SVG shapes. More specifically, it sets the length of a pattern of alternating dashes and the gaps between them. path { stroke-dasharray: 5; \/* dashes and gaps are both 5 units long *\/ } It's a\u2026","rel":"","context":"In \"stroke\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":187513,"url":"https:\/\/css-tricks.com\/lodge\/svg\/28-svg-line-drawing-works\/","url_meta":{"origin":254220,"position":4},"title":"28: How SVG Line Drawing Works","date":"November 3, 2014","format":false,"excerpt":"A popular little SVG animation technique is path drawing. If you can't picture it, here's a collection of a zillion examples I've created. Essentially the stroke around SVG shapes draws itself over time. I first heard of it from Jake Archibald's article Animated line drawing in SVG, which is about\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":187516,"url":"https:\/\/css-tricks.com\/lodge\/svg\/29-svg-text\/","url_meta":{"origin":254220,"position":5},"title":"29: SVG Text","date":"November 4, 2014","format":false,"excerpt":"There is a element in SVG. No big surprise here: it's for putting text into the SVG. Not outlines of shapes of letters (although you can do that too) but actual normal web text. Selectable, SEO-friendly, accessible, normal ol' web text. The fonts you have access to are the same\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/254220"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=254220"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/254220\/revisions"}],"predecessor-version":[{"id":331026,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/254220\/revisions\/331026"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/254217"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=254220"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=254220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}