JSFiddle - React, Tailwind, and code Playground

by Wietse De Vries

HTML

<svg width="900" height="500">
    <defs>
        <pattern id="transformedPattern"
            x="0" y="0" width="2" height="17"
            patternUnits="userSpaceOnUse"
            patternTransform="rotate(-45)">

            <circle cx="0" cy="0" r="4" style="stroke: none; fill: rgba(0,0,0,0.1)" />
        </pattern>
    </defs>
    <rect x="0" y="0" width="100" height="100" style="fill: url(#transformedPattern);" />
</svg>

CSS

body {
  background: #f2f2f2;
}