Round-cap lines used in a SVG pattern - HTML CSS SVG

HTML CSS examples for SVG:Line

  1. HOME
  2. HTML CSS
  3. SVG
  4. Line

Description

Round-cap lines used in a SVG pattern

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!-- w ww. j av a  2 s  .  com-->
 <body> 
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="500" width="500"> 
   <defs> 
    <pattern id="stripe1" class="stripe" patternunits="userSpaceOnUse" width="20" height="20"> 
     <line x1="0" y1="0" x2="20" y2="20" /> 
    </pattern> 
    <pattern id="stripe2" class="stripe" patternunits="userSpaceOnUse" x="6" y="6" width="20" height="20"> 
     <line x1="0" y1="0" x2="20" y2="20" /> 
    </pattern> 
    <mask id="mask"> 
     <rect height="500" width="500" style="fill: url(#stripe1)" /> 
     <rect height="500" width="500" style="fill: url(#stripe2)" /> 
    </mask> 
    <style>

.stripe line {
   fill: white;
   stroke: white;
   stroke-width: 4px;
}
g {
   mask: url(#mask);
}
circle {
   fill: rgba(0, 255, 0, 0.25);
}


            </style> 
   </defs> 
   <g> 
    <circle cx="250" cy="250" r="200" /> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials