<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Patterns SVG</title>
        <meta name="keywords" content="diseño gráfico, diseño web, responsive web design, ebooks, svg" >
        <meta name="description" content="Diseñador gráfico y web en Zaragoza. Maquetación y diseño web con HTML5, CSS3, SVG Responsive Web Design y Mobile-First.">
        <meta name="author" content="jorgeATGU" >
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="author" href="humans.txt" />
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="animate-custom.css">

    </head>
<body>

 <header>

    <label class="btn" for="toggle">Menu</label>
    <input id="toggle" type="checkbox"/>

    <nav>
      <ul id="nav">
        <li class="current"><a href="http://jorgeatgu.com/blog/patterns-en-svg/">VOLVER AL BLOG</a></li>
        <li id="close"><label for="toggle">Close</label></li>
      </ul>
    </nav>
    <ul class="menu">
          <li class="facebook"><a target="_blank" href="https://twitter.com/jorgeATGU" title="Twitter">Twitter</a></li>
          <li class="correo"><a target="_blank" href="https://www.facebook.com/jorgeATGU" title="Facebook">Facebook</a></li>
          <li class="dribbble"><a target="_blank" href="http://codepen.io/jorgeatgu" title="codepen">Codepen</a></li>
          <li class="twitter"><a target="_blank" href="http://be.net/jorgeatgu" title="behance">Behance</a></li>
    </ul>
  </header>

  <p>INLINE</p>

  <article>


  <svg xmlns='http://www.w3.org/2000/svg' x="0px" y="0px"
   width="100%" height="100%" viewBox="0 0 100% 100%"
   enable-background="new 0 0 100% 100%" xml:space="preserve">

      <defs>
        <pattern id="textura" width="300" height="300"
        patternUnits="userSpaceOnUse">
        <filter id='n' x='0' y='0'>
        <feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='10' stitchTiles='stitch'/>
        </filter>
        <rect width='300' height='300' fill='#000'/>
        <rect width='300' height='300' filter="url(#n)" opacity='0.4'/>
        </pattern>
      </defs>


      <rect x="0" y="0" width="100%" height="100%" fill="url(#textura)"/>

  </svg>

  </article>

<p>OBJECT</p>

<article>

  <object type="image/svg+xml" data="svg/speckled-noise.svg"></object>

</article>

<p>IMG</p>

<article>

<img src="svg/speckled-noise.svg" />

</article>

<p>BACKGROUND CSS</p>

<article class="specklednoise"></article>

<nav>
      <ul>
        <li class="botonblog"> <a href="http://jorgeatgu.com/blog/patterns-en-svg/">VOLVER AL BLOG</a></li>
      </ul>
</nav>






  </div>
        <script type="text/javascript" src="//use.typekit.net/dco8xwz.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

    </body>
</html>


