Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG Patterns


SVG Patterns - <pattern>

The <pattern> element is used to create a graphic that is redrawn at repeated x and y coordinate intervals, to cover an area.

All SVG patterns are defined within a <defs> element. The <defs> element is short for "definitions", and contains definition of special elements (such as patterns).

The <pattern> element has a required id attribute which identifies the pattern. The graphic/image then points to the pattern to use.

Then, inside the <pattern> element, we put one or more elements that will be used as the fill pattern.


A Simple Pattern Example

The following example creates a rectangle filled with small circles:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="patt1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" fill="red" />
    </pattern>
  </defs>

  <rect width="200" height="100" x="0" y="0" stroke="black" fill="url(#patt1)" />
</svg>
Try it Yourself »

Code explanation:

  • The id attribute of the <pattern> element defines a unique name for the pattern
  • The x and y attributes of the <pattern> element defines how far into the shape the pattern starts
  • The width and height attributes of the <pattern> element defines the width and height of the pattern
  • The <circle> element inside the <pattern> element defines the shape of the fill pattern
  • The fill="url(#patt1)" attribute of the <rect> element points to the "patt1" pattern
  • The rectangle will be filled with the pattern


A Pattern with Gradient

The following example creates a rectangle filled with small light blue rectangles and gradient circles:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    <pattern id="patt2" x="0" y="0" width="0.25" height="0.25">
      <rect x="0" y="0" width="50" height="50" fill="lightblue" />
      <circle cx="25" cy="25" r="20" fill="url(#grad1)" fill-opacity="0.8" />
    </pattern>
  </defs>
 
  <rect width="200" height="200" x="0" y="0" stroke="black" fill="url(#patt2)" />
</svg>
Try it Yourself »

Code explanation:

  • The id attribute of the <pattern> element defines a unique name for the pattern
  • The x and y attributes of the <pattern> element defines how far into the shape the pattern starts
  • The width and height attributes of the <pattern> element defines the width and height of the pattern. We want the pattern to repeat 4 times horizontally and 4 times vertically, so we set the height and width to 0.25 (meaning that the pattern's width and height is 25% of the total box size)
  • The <rect> element inside the <pattern> element defines one shape of the fill pattern (a lightblue 50x50 rectangle)
  • The <circle> element inside the <pattern> element defines another shape of the fill pattern (a gradient circle that goes from white to red)
  • The fill="url(#grad1)" attribute of the <circle> element points to the "grad1"gradient
  • The fill="url(#patt2)" attribute of the <rect> element points to the "patt2" pattern
  • The rectangle will be filled with the pattern

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.