Skip to content

Instantly share code, notes, and snippets.

@iros
Last active March 15, 2022 11:33
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save iros/d49c0fc8b870059a3c2b to your computer and use it in GitHub Desktop.
patternfill_gists
<div class="circles-1">
</div>
.circles-1 {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmJyAvPgogIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjMDAwIi8+Cjwvc3ZnPg==");
background-repeat: repeat;
}
Display the source blob
Display the rendered blob
Raw
<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
<rect width='10' height='10' fill='#fff' />
<circle cx="1" cy="1" r="1" fill="#000"/>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmJyAvPgogIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjMDAwIi8+Cjwvc3ZnPg=="
x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="100" width="100" style="float:left" class="pattern-swatch">
<rect style="fill: url(#circles-1) #fff;" x="0" y="0" height="100" width="100"></rect>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment