SVG Patterns encours

by toubia95

HTML

<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">

  <!-- Pattern 1 : Lignes verticales -->
  <pattern id="vertical" width="10" height="10" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="2" height="10" fill="black" />
  </pattern>

  <!-- Pattern 2 : Lignes horizontales -->
  <pattern id="horizontal" width="10" height="10" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="10" height="2" fill="black" />
  </pattern>

  <!-- Pattern 3 : Lignes diagonales -->
  <pattern id="diagonal1" width="14" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
    <rect x="2" y="0" width="2" height="10" fill="black" />
  </pattern>
  
  <pattern id="diagonal2" width="14" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(135)">
    <rect x="0" y="0" width="2" height="10" fill="black" />
  </pattern>

  <!-- Rectangle 1 : pattern vertical -->
  <rect x="50" y="50" width="200" height="200" fill="url(#vertical)" />

  <!-- Rectangle 2 : pattern horizontal -->
  <rect x="50" y="50" width="200" height="200" fill="url(#horizontal)" />

  <!-- Rectangle 3 : pattern diagonal 1 -->
  <rect x="50" y="50" width="200" height="200" fill="url(#diagonal1)" />
  
  <!-- Rectangle 4 : pattern diagonal 2 -->
  <rect x="10" y="50" width="200" height="200" fill="url(#diagonal2)" />
</svg>