SVG-Muster

Das SVG-Element <pattern> ermöglicht es uns, Muster innerhalb unseres SVG-Codes zu definieren und diese Muster als fill zu verwenden. Der grundlegende Prozess für Muster sieht ungefähr so ​​aus:

• Definieren Sie ein <pattern> innerhalb des SVG
• Definieren Sie die Formen innerhalb des Musters
• Verwenden Sie die Formen
• Erstellen Sie eine neue Form und füllen Sie sie mit dem Muster

Dies ist eine Sammlung einfacher SVG-Formen, die als Muster verwendet werden. Diese Liste kann im Laufe der Zeit wachsen, aber die Idee ist weniger, eine umfassende Sammlung zu haben, als vielmehr die Syntax als Ausgangspunkt für die Erstellung neuer und aufregender Muster griffbereit zu haben.

Wir pflegen auch eine Sammlung davon auf CodePen.

Kreismuster

<svg width="100%" height="100%">
  
  <!-- Create mask that we'll use to define a slight gradient -->
  <mask maskUnits="userSpaceOnUse" id="fade">
    <!-- Here's that slight gradient -->
     	<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0" style="stop-color: #FFFFFF"></stop>
      <stop offset="1" style="stop-color: #000000"></stop>
    </linearGradient>
    <!-- The canvas for our mask -->
    <rect fill="url(#gradient)" width="100%" height="100%"></rect>
  </mask>
    
  <!-- Let's define the pattern -->
  <!-- The width and height should be double the circle radius we plan to use -->
  <pattern id="pattern-circles" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
    <!-- Now let's draw the circle -->
    <!-- We're going to define the `fill` in the CSS for flexible use -->
    <circle mask="url(#fade)" cx="20" cy="20" r="20"></circle>
  </pattern>
  <!-- The canvas with our applied pattern -->
  <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)"></rect>
  
</svg>

Schachbrettmuster

<svg width="100%" height="100%">
    
  <!-- Let's define the pattern -->
  <!-- The width and height should be double the size of a single checker -->
  <pattern id="pattern-checkers" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
    <!-- Two instances of the same checker, only positioned apart on the `x` and `y` axis -->
    <!-- We will define the `fill` in the CSS for flexible use -->
    <rect class="checker" x="0" width="100" height="100" y="0"></rect>
    <rect class="checker" x="100" width="100" height="100" y="100"></rect>
  </pattern>
  
  <!-- Define the shape that will contain our pattern as the fill -->
  <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-checkers)"></rect>
  
</svg>

Sechseckmuster

<svg width="100%" height="100%">
   
    <!-- Define the pattern -->
    <pattern id="pattern-hex" x="0" y="0" width="112" height="190" patternUnits="userSpaceOnUse" viewBox="56 -254 112 190">
	    
      <!-- Group the hexagon shapes -->
      <!-- Each path could have a class for more styling/animating options -->
      <!-- We're going to control the fill and stroke in the CSS for flexibility -->
      <g id="hexagon">
        <path d="M168-127.1c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-0.3 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5C167-127,167.5-127.1,168-127.1 L168-127.1z"></path>
        <path d="M112-222.5c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2l-53.4,30.5 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5 C111-222.4,111.5-222.5,112-222.5L112-222.5z"></path>
        <path d="M168-317.8c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-191 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5 C167-317.7,167.5-317.8,168-317.8L168-317.8z"></path>
      </g>
  
  </pattern>
   
  <!-- The canvas for our pattern -->
  <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-hex)"></rect>
  
</svg>

Würfelmuster

<svg width="100%" height="100%">
   
   <!-- Define the pattern -->
   <pattern id="pattern-cubes" x="0" y="126" patternUnits="userSpaceOnUse" width="126" height="200" viewBox="0 0 10 16"> 
     
     <g id="cube">
       <!-- We'll apply the `fill` in the CSS for flexibility -->
       <path class="left-shade" d="M0 0l5 3v5l-5 -3z"></path>
       <path class="right-shade" d="M10 0l-5 3v5l5 -3"></path>
     </g>
  	
     <!-- Apply the cube shapes -->
     <use x="5" y="8" xlink:href="#cube"></use>
     <use x="-5" y="8" xlink:href="#cube"></use>
   
   </pattern>
   
   <!-- The canvas for our pattern -->
   <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-cubes)"></rect>
  
</svg>

Winkelmuster

<svg width="100%" height="100%"><svg width="100%" height="100%">
   
   <!-- Define the pattern -->
   <pattern id="pattern-chevron" x="0" y="0" patternUnits="userSpaceOnUse" width="100" height="180" viewBox="0 0 10 18"> 
     
     <!-- Group the chevron shapes -->
     <g id="chevron">
       <!-- Chevron consists of two shapes, a left and a right to form a `v` -->
       <!-- We'll apply the `fill` in the CSS for flexibility -->
       <path class="left" d="M0 0l5 3v5l-5 -3z"></path>
       <path class="right" d="M10 0l-5 3v5l5 -3"></path>
     </g>
  	
     <!-- Apply the shapes -->
     <!-- `y="9"` narrows the space between rows  -->
     <use x="0" y="9" xlink:href="#chevron"></use>
   
   </pattern>
   
   <!-- The canvas for our pattern -->
   <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-chevron)"></rect>
  
</svg>

---

Wenn Sie in Echtzeit mit den verschiedenen Attributen eines Musters experimentieren möchten, um ein Gefühl dafür zu bekommen, wie die Mustererstellung funktioniert, probieren Sie dieses aus