Skip to main

SVG Patterns

Here a 49 you can use however you want. Watch out many more to follow.

Scales
<svg id="dbc-svg-93b61f87-8fa5-448c-bf96-91e672247426" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-93b61f87-8fa5-448c-bf96-91e672247426" patternUnits="userSpaceOnUse" width="50" height="50" y="-42" x="-2" patternTransform="rotate(0) skewX(0) scale(1)">
      <rect transform="skewX(28)" x="-22" y="-1" rx="10" width="50" height="50" stroke-width="1.5" stroke="currentColor" fill="none"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-93b61f87-8fa5-448c-bf96-91e672247426)"/>
</svg> 
Scales alt
<svg id="dbc-svg-28c05f7f-ce8b-4ab7-a7ad-dbc54cc86cfe" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-28c05f7f-ce8b-4ab7-a7ad-dbc54cc86cfe" patternUnits="userSpaceOnUse" width="50" height="50" y="-42" x="-2" patternTransform="rotate(55) skewX(0) scale(1)">
      <rect transform="skewX(28)" x="-22" y="-1" rx="10" width="50" height="50" stroke-width="1.5" stroke="currentColor" fill="none"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-28c05f7f-ce8b-4ab7-a7ad-dbc54cc86cfe)"/>
</svg> 
Horizontal Lines
<svg id="dbc-svg-eee57248-a6e2-4f8b-b2dd-7837898aae35" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-eee57248-a6e2-4f8b-b2dd-7837898aae35" width="4" height="18" patternTransform="rotate(0) skewX(0) scale(1)" patternUnits="userSpaceOnUse">
      <path stroke="currentColor" fill="none" stroke-width="1.5" d="M-1 2h6"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" x="1" y="1" fill="url(#dbc-pattern-eee57248-a6e2-4f8b-b2dd-7837898aae35)"/>
</svg> 
Vertical Lines
<svg id="dbc-svg-0d6b5d99-a758-483b-b3c2-737191d69de3" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-0d6b5d99-a758-483b-b3c2-737191d69de3" width="4" height="18" patternTransform="rotate(90) skewX(0) scale(1)" patternUnits="userSpaceOnUse">
      <path stroke="currentColor" fill="none" stroke-width="1.5" d="M-1 2h6"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" x="1" y="1" fill="url(#dbc-pattern-0d6b5d99-a758-483b-b3c2-737191d69de3)"/>
</svg> 
Diagonal Lines
<svg id="dbc-svg-d3ee9e1a-c4a1-4956-bebf-b9818d68b49d" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-d3ee9e1a-c4a1-4956-bebf-b9818d68b49d" width="4" height="18" patternTransform="rotate(45) skewX(0) scale(1)" patternUnits="userSpaceOnUse">
      <path stroke="currentColor" fill="none" stroke-width="1.5" d="M-1 2h6"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" x="1" y="1" fill="url(#dbc-pattern-d3ee9e1a-c4a1-4956-bebf-b9818d68b49d)"/>
</svg> 
Square grid
<svg id="dbc-svg-2934e48c-f3ef-4298-a9e8-f38cfc446dba" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-2934e48c-f3ef-4298-a9e8-f38cfc446dba" width="50" height="50" x="0" y="0" patternTransform="rotate(0) skewX(0) scale(1)" patternUnits="userSpaceOnUse">
      <rect width="50" height="50" fill="none" stroke="currentColor" stroke-width="1.5" rx="0"/>
      <rect width="30" height="30" x="10" y="10" fill="none" stroke="currentColor" stroke-width="1.5" rx="0"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-2934e48c-f3ef-4298-a9e8-f38cfc446dba)"/>
</svg> 
Build your dream business for $1/month.
TRY NOW
Skewed Square grid
<svg id="dbc-svg-9929e349-b5dd-407c-b40e-4240acdf466d" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-9929e349-b5dd-407c-b40e-4240acdf466d" width="50" height="50" x="0" y="0" patternTransform="rotate(0) skewX(45) scale(1)" patternUnits="userSpaceOnUse">
      <rect width="50" height="50" fill="none" stroke="currentColor" stroke-width="1.5" rx="0"/>
      <rect width="30" height="30" x="10" y="10" fill="none" stroke="currentColor" stroke-width="1.5" rx="0"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-9929e349-b5dd-407c-b40e-4240acdf466d)"/>
</svg> 
Diamond grid
<svg id="dbc-svg-dc01f89a-d8ac-46e9-ab74-ac4f819ccb3c" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-dc01f89a-d8ac-46e9-ab74-ac4f819ccb3c" width="50" height="50" x="0" y="0" patternTransform="rotate(45) skewX(0) scale(1)" patternUnits="userSpaceOnUse">
      <rect width="50" height="50" fill="none" stroke="currentColor" stroke-width="1.5" rx="0"/>
      <rect width="30" height="30" x="10" y="10" fill="none" stroke="currentColor" stroke-width="1.5" rx="0"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-dc01f89a-d8ac-46e9-ab74-ac4f819ccb3c)"/>
</svg> 
Pixel grid
<svg id="dbc-svg-82c16383-3476-4f19-88be-f5a5f7736fee" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-82c16383-3476-4f19-88be-f5a5f7736fee" patternUnits="userSpaceOnUse" width="100" height="100" y="0" x="0" patternTransform="rotate(0) skewX(0) scale(1)">
      <path fill="currentColor" d="M-20-20h40v40h-40zm0 100h40v40h-40zM80-20h40v40H80zm0 100h40v40H80zM25 25h10v10H25zm20 20h10v10H45zm20 20h10v10H65zm0-40h10v10H65zM25 65h10v10H25z"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-82c16383-3476-4f19-88be-f5a5f7736fee)"/>
</svg> 
Pixel diamond grid
<svg id="dbc-svg-f6dbf0a5-0315-4339-a992-35bb9db00d49" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-f6dbf0a5-0315-4339-a992-35bb9db00d49" patternUnits="userSpaceOnUse" width="100" height="100" y="0" x="0" patternTransform="rotate(45) skewX(0) scale(1)">
      <path fill="currentColor" d="M-20-20h40v40h-40zm0 100h40v40h-40zM80-20h40v40H80zm0 100h40v40H80zM25 25h10v10H25zm20 20h10v10H45zm20 20h10v10H65zm0-40h10v10H65zM25 65h10v10H25z"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-f6dbf0a5-0315-4339-a992-35bb9db00d49)"/>
</svg> 
Slanted grid
<svg id="dbc-svg-ff2d7e73-3b7a-4d91-9f54-0bb3b666f9ae" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-ff2d7e73-3b7a-4d91-9f54-0bb3b666f9ae" patternUnits="userSpaceOnUse" width="100" height="50" y="0" x="0" patternTransform="rotate(0) skewX(45) scale(1)">
      <path fill="none" stroke="currentColor" stroke-width="1.5" d="M0 0 L100 0 L100 50 L0 50 L0 0"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-ff2d7e73-3b7a-4d91-9f54-0bb3b666f9ae)"/>
</svg> 
Slanted grid reversed
<svg id="dbc-svg-9133caaa-08fe-457d-98d9-7b553ae3a1db" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-9133caaa-08fe-457d-98d9-7b553ae3a1db" patternUnits="userSpaceOnUse" width="100" height="50" y="0" x="0" patternTransform="rotate(0) skewX(-45) scale(1)">
      <path fill="none" stroke="currentColor" stroke-width="1.5" d="M0 0 L100 0 L100 50 L0 50 L0 0"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-9133caaa-08fe-457d-98d9-7b553ae3a1db)"/>
</svg> 
Double square grid
<svg id="dbc-svg-43dba407-2102-471d-8571-4910c8017495" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-43dba407-2102-471d-8571-4910c8017495" patternUnits="userSpaceOnUse" width="50" height="50" y="0" x="0" patternTransform="rotate(0) skewX(0) scale(1)">
      <rect x="0" y="0" rx="0" width="50" height="50" stroke-width="1.5" stroke="currentColor" fill="none"/>
      <rect x="10" y="10" rx="0" width="30" height="30" stroke-width="1.5" stroke="currentColor" fill="none"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-43dba407-2102-471d-8571-4910c8017495)"/>
</svg> 
Double diamond grid
<svg id="dbc-svg-21039aac-a568-4cbc-9c50-2c376b37908d" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-21039aac-a568-4cbc-9c50-2c376b37908d" patternUnits="userSpaceOnUse" width="50" height="50" y="0" x="0" patternTransform="rotate(45) skewX(0) scale(1)">
      <rect x="0" y="0" rx="0" width="50" height="50" stroke-width="1.5" stroke="currentColor" fill="none"/>
      <rect x="10" y="10" rx="0" width="30" height="30" stroke-width="1.5" stroke="currentColor" fill="none"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-21039aac-a568-4cbc-9c50-2c376b37908d)"/>
</svg> 
Triple square grid
<svg id="dbc-svg-689881b5-9868-48dc-bffe-c1329f505ef1" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-689881b5-9868-48dc-bffe-c1329f505ef1" width="50" height="50" x="0" y="0" patternTransform="rotate(0) skewX(0) scale(1)" patternUnits="userSpaceOnUse">
      <rect width="50" height="50" fill="none" stroke="currentColor" stroke-width="1.5" rx="0"/>
      <rect width="30" height="30" x="10" y="10" fill="none" stroke="currentColor" stroke-width="1.5" rx="0"/>
      <rect width="15" height="15" x="17" y="17" fill="none" stroke="currentColor" stroke-width="1.5" rx="0"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-689881b5-9868-48dc-bffe-c1329f505ef1)"/>
</svg> 
Build your dream business for $1/month.
TRY NOW
Triple diamond grid
<svg id="dbc-svg-787bc947-ae49-4894-bd7d-9a184196e09c" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-787bc947-ae49-4894-bd7d-9a184196e09c" width="50" height="50" x="0" y="0" patternTransform="rotate(45) skewX(0) scale(1)" patternUnits="userSpaceOnUse">
      <rect width="50" height="50" fill="none" stroke="currentColor" stroke-width="1.5" rx="0"/>
      <rect width="30" height="30" x="10" y="10" fill="none" stroke="currentColor" stroke-width="1.5" rx="0"/>
      <rect width="15" height="15" x="17" y="17" fill="none" stroke="currentColor" stroke-width="1.5" rx="0"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-787bc947-ae49-4894-bd7d-9a184196e09c)"/>
</svg> 
Rounded squares grid
<svg id="dbc-svg-aed118f0-7d4c-4518-a929-0dc043f5e2bc" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-aed118f0-7d4c-4518-a929-0dc043f5e2bc" width="50" height="50" x="0" y="0" patternTransform="rotate(0) skewX(0) scale(1)" patternUnits="userSpaceOnUse">
      <rect width="50" height="50" fill="none" stroke="currentColor" stroke-width="1.5" rx="10"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-aed118f0-7d4c-4518-a929-0dc043f5e2bc)"/>
</svg> 
Rounded diamond grid
<svg id="dbc-svg-b0a4510b-5a65-4e7a-b019-eadab5a2f92a" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-b0a4510b-5a65-4e7a-b019-eadab5a2f92a" width="50" height="50" x="0" y="0" patternTransform="rotate(45) skewX(0) scale(1)" patternUnits="userSpaceOnUse">
      <rect width="50" height="50" fill="none" stroke="currentColor" stroke-width="1.5" rx="10"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-b0a4510b-5a65-4e7a-b019-eadab5a2f92a)"/>
</svg> 
Rounded squares with space
<svg id="dbc-svg-252ecec7-4666-46ab-9754-8671845a422d" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-252ecec7-4666-46ab-9754-8671845a422d" width="50" height="50" x="0" y="0" patternTransform="rotate(0) skewX(0) scale(1)" patternUnits="userSpaceOnUse">
      <rect width="40" height="40" x="5" y="5" fill="none" stroke="currentColor" stroke-width="1.5" rx="10"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-252ecec7-4666-46ab-9754-8671845a422d)"/>
</svg> 
Rounded diamond with space
<svg id="dbc-svg-cae92662-2c26-4802-881e-b20ce6b4ae5f" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-cae92662-2c26-4802-881e-b20ce6b4ae5f" width="50" height="50" x="0" y="0" patternTransform="rotate(45) skewX(0) scale(1)" patternUnits="userSpaceOnUse">
      <rect width="40" height="40" x="5" y="5" fill="none" stroke="currentColor" stroke-width="1.5" rx="10"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-cae92662-2c26-4802-881e-b20ce6b4ae5f)"/>
</svg> 
Rounded layered squares
<svg id="dbc-svg-2830cd4e-7d5c-493b-a6b3-53632ac20f38" class="dbc-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dbc-pattern-2830cd4e-7d5c-493b-a6b3-53632ac20f38" width="50" height="50" x="0" y="0" patternTransform="rotate(0) skewX(0) scale(1)" patternUnits="userSpaceOnUse">
      <rect width="40" height="40" x="5" y="5" fill="none" stroke="currentColor" stroke-width="1.5" rx="10"/>
      <rect width="30" height="30" x="5" y="5" fill="none" stroke="currentColor" stroke-width="1.5" rx="8"/>
      <rect width="20" height="20" x="6" y="6" fill="currentColor" stroke-width="1.5" rx="6"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dbc-pattern-2830cd4e-7d5c-493b-a6b3-53632ac20f38)"/>
</svg> 

©2024 DesignByCode, Inc. All rights reserved.

Design & Developed by DesignByCode