JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' >
<defs>
  <pattern id='p' height='7' width='1000' patternUnits='userSpaceOnUse' >
    <rect height='7' width='1000' fill='green' stroke-width='1' stroke='blue'/>
  </pattern>
</defs>

<text x="0" y="20">According to the spec, you should not see a stroked, green line with blue stripes:</text>
<line x1='0' y1='40' x2='400' y2='40' stroke-width='20' stroke='url(#p)' />

<text x="0" y="100">According to the spec, you should see a stroked, green line with blue stripes:</text>
<line x1='0' y1='120' x2='400' y2='121' stroke-width='20' stroke='url(#p)' />

<text x="0" y="180">According to the spec, you should not see a stroked, green circle with blue stripes:</text>
<line x1='200' y1='200' x2='200' y2='200' stroke-width='20' stroke='url(#p)' stroke-linecap="round"/>
</svg>

CSS

svg { width: 100%; height: 500px; }