SVG Patterns

The SVG <pattern> attribute 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 <pattern> inside of the SVG
  • Define the shapes inside of the pattern
  • Use the shapes
  • Create a new shape and fill it with the pattern

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.

We're also keeping a collection of these over on CodePen.

Circle Pattern

<svg width="100%" height="100%">
  
  <!-- Create mask that we'll use to define a slight gradient -->
  <mask maskUnits="userSpaceOnUse" id="fade">
    <!-- Here's that slight gradient -->
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
      <stop offset ="0" style="stop-color: #FFFFFF" />
      <stop offset ="1" style="stop-color: #000000" />
    </linearGradient>
    <!-- The canvas for our mask -->
    <rect fill="url(#gradient)" width="100%" height="100%" />
  </mask>
    
  <!-- Let's define the pattern -->
  <!-- The width and height should be double the circle radius we plan to use -->
  <pattern id="pattern-circles" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
    <!-- Now let's draw the circle -->
    <!-- We're going to define the `fill` in the CSS for flexible use -->
    <circle mask="url(#fade)" cx="20" cy="20" r="20" />
  </pattern>
  <!-- The canvas with our applied pattern -->
  <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)" />
  
</svg>

See the Pen SVG Pattern: Circles by Geoff Graham (@geoffgraham) on CodePen.

Checkerboard Pattern

<svg width="100%" height="100%">
    
  <!-- Let's define the pattern -->
  <!-- The width and height should be double the size of a single checker -->
  <pattern id="pattern-checkers" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse" >
    <!-- Two instances of the same checker, only positioned apart on the `x` and `y` axis -->
    <!-- We will define the `fill` in the CSS for flexible use -->
    <rect class="checker" x="0" width="100" height="100" y="0"/>
    <rect class="checker" x="100" width="100" height="100" y="100"/>
  </pattern>
  
  <!-- Define the shape that will contain our pattern as the fill -->
  <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-checkers)" />
  
</svg>

See the Pen SVG Pattern: Checkboard by Geoff Graham (@geoffgraham) on CodePen.

Hexagon Pattern

<svg width="100%" height="100%" >
   
    <!-- Define the pattern -->
    <pattern id="pattern-hex" x="0" y="0" width="112" height="190" patternUnits="userSpaceOnUse" viewBox="56 -254 112 190">
	    
      <!-- Group the hexagon shapes -->
      <!-- Each path could have a class for more styling/animating options -->
      <!-- We're going to control the fill and stroke in the CSS for flexibility -->
      <g id="hexagon">
        <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"/>
        <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"/>
        <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"/>
      </g>
  
  </pattern>
   
  <!-- The canvas for our pattern -->
  <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-hex)" />
  
</svg>

See the Pen SVG Pattern: Hexagons by Geoff Graham (@geoffgraham) on CodePen.

Cube Pattern

<svg width="100%" height="100%">
   
   <!-- Define the pattern -->
   <pattern id="pattern-cubes" x="0" y="126" patternUnits="userSpaceOnUse" width="126" height="200" viewBox="0 0 10 16"> 
     
     <!-- Cube code courtest of SVGeneration: http://www.svgeneration.com/recipes/3D-Cubes/ -->
     <g id="cube">
       <!-- We'll apply the `fill` in the CSS for flexibility -->
       <path class="left-shade" d="M0 0l5 3v5l-5 -3z" />
       <path class="right-shade" d="M10 0l-5 3v5l5 -3" />
     </g>
  	
     <!-- Apply the cube shapes -->
     <use x="5" y="8" xlink:href="#cube" />
     <use x="-5" y="8" xlink:href="#cube" />
   
   </pattern>
   
   <!-- The canvas for our pattern -->
   <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-cubes)" />
  
</svg>

See the Pen SVG Pattern: Cubes by Geoff Graham (@geoffgraham) on CodePen.

Chevron Pattern

<svg width="100%" height="100%"><svg width="100%" height="100%">
   
   <!-- Define the pattern -->
   <pattern id="pattern-chevron" x="0" y="0" patternUnits="userSpaceOnUse" width="100" height="180" viewBox="0 0 10 18"> 
     
     <!-- Group the chevron shapes -->
     <g id="chevron">
       <!-- Chevron consists of two shapes, a left and a right to form a `v` -->
       <!-- We'll apply the `fill` in the CSS for flexibility -->
       <path class="left" d="M0 0l5 3v5l-5 -3z" />
       <path class="right" d="M10 0l-5 3v5l5 -3" />
     </g>
  	
     <!-- Apply the shapes -->
     <!-- `y="9"` narrows the space between rows  -->
     <use x="0" y="9" xlink:href="#chevron" />
   
   </pattern>
   
   <!-- The canvas for our pattern -->
   <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-chevron)" />
  
</svg>

See the Pen SVG Pattern: Chevron 2 by Geoff Graham (@geoffgraham) on CodePen.


If you'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:

See the Pen Messing with SVG Attributes by Chris Coyier (@chriscoyier) on CodePen.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag