Ever since I started making Hero Patterns, the question I get asked to most is how to make a pattern appear seamless. Because its a visual tutorial, I decided to make a video explaining my process. Have a look:
Making your SVG pattern repeat with CSS
Once your pattern is properly exported, you’ll need to take a few additional steps to optimize it.
Open your SVG in your favourite code editor. The first thing you’ll want to do is encode all of the angle brackets (
< > ) and the number sign (
# ) used for the hex code. You’ll also want to replace all of the double quotes to single quotes. For efficiency, I usually do a good ol’ find and replace with my code editor. Simply replace the
Now you’ll need to encode the SVG in the data URI that looks like this:
Finally, wrap the URI in double quotes and use the url () value like you would for any repeatable background image. Have a look at the results:
background-color: #000000; background-image: url("data:image/svg+xml,%3Csvg width='44' height='12' viewBox='0 0 44 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12v-2L0 0v10l4 2h16zm18 0l4-2V0L22 10v2h16zM20 0v8L4 0h16zm18 0L22 8V0h16z' fill='%23FFFFFF' fill-rule='evenodd'/%3E%3C/svg%3E");
If you like the icons used in the video, you can get them, along with many others, here.
Check out Hero Patterns for loads of free patterns updated regularly.