Patrones SVG - algunos ejemplos

facebook-svg gplus-svg twitter-svg

Tramas

Probablemente uno de los más sencillos y más útiles patrones que podemos crear en SVG son las tramas. Para crear una trama de líneas oblicuas. Para crear una trama de líneas oblicuas creamos un patrón cuyas dimensiones son width="5" height="5".

<pattern id="trama" patternUnits="userSpaceOnUse" width="5" height="5">
  . . . .
</pattern>

El elemento que se repite en este caso es una línea vertical.

<line id=linea x1="0" y1="0" x2="0" y2="5" stroke ="#fff"/>

De hecho el valor por defecto de x1, y1, x2, y2 es 0, así que podemos utilizar solo y2="5"

<pattern id="trama" patternUnits="userSpaceOnUse" width="5" height="5" >
      <line id="linea" y2="5" stroke ="#fff" /> 
</pattern>

Esto crea una trama de líneas verticales. Si queremos transformarlo en una trama de líneas oblicuas solo necesitamos utilizar el atributo patternTransform para girar ( rotate ) la trama unos 25 grados en este caso.

<pattern id="trama" patternTransform="rotate(25)" patternUnits="userSpaceOnUse" width="5" height="5" >

<svg viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="trama" patternUnits="userSpaceOnUse" width="5" height="5" patternTransform="rotate(25)">
       <line id="linea" y2="5" stroke="#fff" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#trama)" />
</svg>

Vea el código para este ejemplo en codepen

See the Pen SVG patterns - trama oblicua* by Gabi (@enxaneta) on CodePen.

Cuadricula

Para crear una cuadricula utilizamos este otro patrón. La parte que se repite en este caso son dos líneas: una línea vertical

<line x1="0" y1="0" x2="0" y2="10" stroke ="#fff" />

y una línea horizontal

<line x1="0" y1="10" x2="10" y2="10" stroke ="#fff" />

en este caso he optado por desplazar el código hacia la derecha y abajo:

<pattern id="cuadricula" patternUnits="userSpaceOnUse" x="5" y="5" width="10" height="10">
             <g id="grupoDeLineas" stroke ="#fff">
                <line x1="0" y1="0" x2="0" y2="10" />
                <line x1="0" y1="10" x2="10" y2="10" />
             </g>  
  </pattern>

<svg viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs> 
        <pattern id="cuadricula" patternUnits="userSpaceOnUse" x="5" y="5" width="10" height="10">
           <g id="grupoDeLineas" stroke ="#fff">
              <line x1="0" y1="0" x2="0" y2="10" />
              <line x1="0" y1="10" x2="10" y2="10" />
           </g>  
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#cuadricula)" />
</svg>

Vea el código para este ejemplo en codepen

See the Pen SVG patterns - cuadricula* by Gabi (@enxaneta) on CodePen.

De cuadros

Para crear un patrón de cuadros utilizamos un grupo de dos cuadrados cuyo tamaño es en este caso es width='20' height='20' mientras que el patrón tiene width='40' height='40'. El fondo del lienzo SVG es blanco.

<pattern id='deCuadros' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'>
        <g id='grupoDeCuadros'  fill='black'>
          <rect x='0' y='0' width='20' height='20'/>
          <rect x='20' y='20' width='20' height='20'/>
        </g>
</pattern>

<svg viewBox='0 0 300 300' width='300' height='300' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
  <defs>
    <pattern id='deCuadros' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'>
      <g id='grupoDeCuadros'  fill='black'>
        <rect x='0' y='0' width='20' height='20'/>
        <rect x='20' y='20' width='20' height='20'/>
      </g>
    </pattern>
  </defs> 
    <rect width='100%' height='100%' fill='url(#deCuadros)'/>
</svg>

Vea el código para este ejemplo en codepen

See the Pen SVG patterns - de cuadros* by Gabi (@enxaneta) on CodePen.

Mantel

Esta es una variación del patrón anterior, solo que en este caso el fondo del lienzo SVG es background:#e28082;. El primer patrón utilizado es el entramado que ya hemos visto antes:

<pattern id="trama" patternUnits="userSpaceOnUse" width="5" height="5" patternTransform="rotate(25)">
   <line id="linea" y2="5" stroke="#fff" />
</pattern>

Por encima de este va un segundo patrón muy parecido al patrón "deCuadros" con la única diferencia que el primer cuadrado es blanco (fill='white') mientras que el segundo es rojo (fill='#d44244')

<pattern id='mantel' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'>
   <g>
      <rect x='0' y='0' width='20' height='20' fill='white'/>
      <rect x='20' y='20' width='20' height='20' fill='#d44244'/>
   </g>
</pattern>

<svg viewBox='0 0 300 300' width='300' height='300' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
  <defs>
    <pattern id="trama" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45)">
        <line id="linea" y2="5" stroke ="#fff" /> 
    </pattern>
    <pattern id='mantel' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'>
        <g>
           <rect x='0' y='0' width='20' height='20' fill='white'/>
           <rect x='20' y='20' width='20' height='20' fill='#d44244'/>
        </g>
    </pattern>
  </defs>
    <rect width='100%' height='100%' fill='url(#trama)'/>
    <rect width='100%' height='100%' fill='url(#mantel)'/>
</svg>

Vea el código para este ejemplo en codepen

See the Pen SVG pattern - mantel* by Gabi (@enxaneta) on CodePen.

Patrón japones

A continuación un patrón japonés muy conocido: "La ola japonesa". Para realizarlo primero creamos un grupo de 4 círculos concéntricos:

<g id='circulos' stroke ='white' stroke-width ='6' fill ='silver'>
        <circle cx='0' cy='0' r='50' />
        <circle cx='0' cy='0' r='35' />
        <circle cx='0' cy='0' r='20' />  
        <circle cx='0' cy='0' r='5' fill='white' />
</g>

El circulo más grande tiene un radio r='50', mientras que el tamaño del elemento <pattern> es width='100' height='50'.

<pattern id='jp' x='0' y='0' width='100' height='50'patternUnits='userSpaceOnUse'>
  . . . .

Para crear el patrón utilizamos el grupo de círculos 5 veces: dos veces en el fondo:

<use xlink:href ='#circulos' x='0' y='25' /> 
<use xlink:href ='#circulos' x='100' y='25' />

una vez en el centro:

<use xlink:href ='#circulos' x='50' y='50' />

y dos veces delante:

<use xlink:href ='#circulos' x='0' y='75' /> 
<use xlink:href ='#circulos' x='100' y='75' />

<svg viewBox='0 0 300 300' width='300' height='300' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
  <defs>
    <g id='circulos' stroke ='white' stroke-width ='6' fill ='silver'>
      <circle cx='0' cy='0' r='50' />
      <circle cx='0' cy='0' r='35' />
      <circle cx='0' cy='0' r='20' />  
      <circle cx='0' cy='0' r='5' fill='white' />
    </g>
    <pattern id='jp' x='0' y='0' width='100' height='50' patternUnits='userSpaceOnUse'>
      <g id='japones'> 
        <use xlink:href='#circulos' x='0' y='25' /> 
        <use xlink:href='#circulos' x='100' y='25' /> 
        <use xlink:href='#circulos' x='50' y='50' /> 
        <use xlink:href='#circulos' x='0' y='75' /> 
        <use xlink:href='#circulos' x='100' y='75' />
      </g>
    </pattern>
  </defs> 
    <rect width='100%' height='100%' fill='#e28082'/>
    <rect width='100%' height='100%' fill='url(#jp)'/>
</svg>

Vea el código para este ejemplo en codepen

See the Pen SVG patterns - japonés* by Gabi (@enxaneta) on CodePen.