title: SVG Stripe Pattern as Element Background-Image
body: <p>How is it possible to get the following shape as a svg graphic. I like to use it as a background-image with repeat. The problem are the box corners.</p>
  
  <p><img src="https://i.stack.imgur.com/ODg7y.png" alt="enter image description here"></p>
  
  <p>I don't know how to avoid the rectangular ends of each line.</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="8px" height="8px"&gt;
  &lt;style type="text/css"&gt;
      &lt;![CDATA[
          path {
              stroke-antialiasing:true
              fill: none;
              stroke: #000;
              stroke-width: 2px;
              opacity: 0.1;
          }
      ]]&gt;
  &lt;/style&gt;
  &lt;path d="M4 0 0 4"/&gt;
  &lt;path d="M8 4 4 8"/&gt;
  </code></pre>
  
  <p></p>
  
  <p><b>Preview</b></p>
  
  <p><img src="https://i.stack.imgur.com/eeL04.png" alt="enter image description here"></p>