ids-enterprise/dist/svg/svg-patterns.html

Infor Design System (IDS) Enterprise Components for the web

<div class="svg-patterns">
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1500" height="1500">
    <defs>

      <!-- Hatch -->
      <pattern id="pt-hatch" width="7" height="7" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
        <rect width="1" height="7" transform="translate(0,0)" fill="white"></rect>
      </pattern>
      <mask id="hatch">
        <rect x="0" y="0" width="1500" height="1500" fill="url(#pt-hatch)"></rect>
      </mask>

      <!-- Double Hatch -->
      <pattern id="pt-doublehatch" width="9" height="9" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
        <rect width="1" height="9" transform="translate(0,0)" fill="white"></rect>
        <rect width="1" height="9" transform="translate(3,0)" fill="white"></rect>
      </pattern>
      <mask id="doublehatch">
        <rect x="0" y="0" width="1500" height="1500" fill="url(#pt-doublehatch)"></rect>
      </mask>

      <!-- Cross Hatch -->
      <pattern id="pt-crosshatch" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
        <path d="M0 0L10 10ZM10 0L0 10Z" stroke-width="1" stroke="white"></path>
      </pattern>
      <mask id="crosshatch">
        <rect x="0" y="0" width="1500" height="1500" fill="url(#pt-crosshatch)"></rect>
      </mask>

      <!-- Stitch -->
      <pattern id="pt-stitch" patternUnits="userSpaceOnUse" x="0" y="0" width="6" height="6">
        <rect width="1" height="6" transform="translate(4,0)" fill="white"></rect>
        <rect width="6" height="1" transform="translate(0,2)" fill="white"></rect>
      </pattern>
      <mask id="stitch">
        <rect x="0" y="0" width="1500" height="1500" fill="url(#pt-stitch)"></rect>
      </mask>

      <!-- Dots -->
      <pattern id="pt-dots" patternUnits="userSpaceOnUse" x="0" y="0" width="6" height="6">
        <rect width="6" height="6" fill="black"></rect>
        <rect x="2" y="2" width="2" height="2" fill="white"></rect>
      </pattern>
      <mask id="dots">
        <rect x="0" y="0" width="1500" height="1500" fill="url(#pt-dots)"></rect>
      </mask>

      <!-- Squares -->
      <pattern id="pt-squares" patternUnits="userSpaceOnUse" x="0" y="0" width="8" height="8">
        <rect width="8" height="8" fill="black"></rect>
        <rect x="1" y="1" width="3" height="3" fill="white"></rect>
      </pattern>
      <mask id="squares">
        <rect x="0" y="0" width="1500" height="1500" fill="url(#pt-squares)"></rect>
      </mask>

      <!-- Xs -->
      <pattern id="pt-xs" patternUnits="userSpaceOnUse" x="0" y="0" width="18" height="18">
        <line x1="0" y1="0" x2="7" y2="7" stroke-width="1" stroke="white"></line>
        <line x1="7" y1="0" x2="0" y2="7" stroke-width="1" stroke="white"></line>
        <line x1="9" y1="9" x2="16" y2="16" stroke-width="1" stroke="white"></line>
        <line x1="16" y1="9" x2="9" y2="16" stroke-width="1" stroke="white"></line>
      </pattern>
      <mask id="xs">
        <rect x="0" y="0" width="1500" height="1500" fill="url(#pt-xs)"></rect>
      </mask>

      <!-- Triangles -->
      <pattern id="pt-triangles" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
        <polygon points="4,0 4,4 0,4" fill="white"></polygon>
        <polygon points="6,6 10,6 6,10" fill="white"></polygon>
      </pattern>
      <mask id="triangles">
        <rect x="0" y="0" width="1500" height="1500" fill="url(#pt-triangles)"></rect>
      </mask>

    </defs>
  </svg>
</div>