SVG Pattern Example

by Kearnan Kelly

HTML

<div class="svg_container">

  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">

    <defs>
      <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
        <path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5" />
      </pattern>
      <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
        <rect width="80" height="80" fill="url(#smallGrid)" />
        <path d="M 80 0 L 0 0 0 80 80 80" fill="none" stroke="gray" stroke-width="1" />
      </pattern>
    </defs>

    <rect width="100%" height="100%" fill="url(#grid)" />

  </svg>
</div>

CSS

body {
  height: 100%;
  margin: 0px;
  background-color: #000000;
  box-sizing: border-box;

}

.svg_container {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  color: white;
  box-sizing: border-box;
}