How to Use SVG Patterns

          <pattern id="basicPattern" x="10" y="10" width="40" height="40" patternUnits="userSpaceOnUse">
              <circle cx="20" cy="20" r="20” fill= "#64bee3" />
    <rect x="10" y="10" width="200" height="200"
    stroke= "#333333" stroke-width="2" fill="url(#basicPattern)" />

SVG patterns provide for very unique design opportunities. We are essentially defining a canvas within a target shape or text, which is then repeated (or tiled) throughout, enabling more detailed design outside of solid color fills and strokes.

The code above yields the following result:


How to Use SVG Patterns →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.