Svg patterns

2015-08-16

HTML

<svg id="patternONE" width="500" height="500">
   <defs>
     <pattern id="pattern" x="0" y="0" width="50px" height="50px" patternUnits="userSpaceOnUse">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 2000 2000">
        <g id="gr3">
	          <rect x="0" y="0" style="fill:red;" width="200px" height="200px"/>
           	<polyline style="fill:none;stroke:#FFFFFF;stroke-width:30;stroke-miterlimit:10;" points="0,100 100,100 100,200 	"/>
          	<polyline style="fill:none;stroke:#FFFFFF;stroke-width:30;stroke-miterlimit:10;" points="200,100 100,100 100,0 	"/>
          </g>
         </svg>
     </pattern>
   </defs>
   <rect x="0" y="0" width="500" height="500" fill="url(#pattern)"/>  
</svg>