Patrones SVG | Programar Plus

0

El SVG <pattern> El elemento nos permite definir patrones dentro de nuestro marcado SVG y usar esos patrones como un fill. El proceso básico para los patrones es algo así como:

  • Definir un <pattern> dentro del SVG
  • Definir las formas dentro del patrón.
  • Usa las formas
  • Crea una nueva forma y rellénala con el patrón.

Esta es una colección de formas SVG simples que se utilizan como patrones. Esta lista puede crecer con el tiempo, pero la idea es menos tener una colección completa que tener la sintaxis a mano como punto de partida para crear patrones nuevos y emocionantes.

También mantenemos una colección de estos en CodePen.

Patrón de círculo

<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>

Patrón de tablero de ajedrez

<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>

Patrón hexagonal

<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>

Patrón de cubo

<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="https://css-tricks.com/snippets/svg/svg-patterns/#cube"></use>
     <use x="-5" y="8" xlink:href="https://css-tricks.com/snippets/svg/svg-patterns/#cube"></use>
   
   </pattern>
   
   <!-- The canvas for our pattern -->
   <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-cubes)"></rect>
  
</svg>

Patrón de Chevron

<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="https://css-tricks.com/snippets/svg/svg-patterns/#chevron"></use>
   
   </pattern>
   
   <!-- The canvas for our pattern -->
   <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-chevron)"></rect>
  
</svg>

Si desea jugar en tiempo real con los diferentes atributos de un patrón para tener una idea de cómo funciona el patrón, intente esto: