HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>SVG Pattern — rotated stripes</title>

</head>

<body>

  <h1>SVG &lt;pattern&gt; — patternTransform rotate(45)</h1>

  <svg width="220" height="180" viewBox="0 0 220 180" role="img" aria-label="Rectangle filled with diagonal striped pattern">

    <defs>

      <pattern id="diag-stripes" patternUnits="userSpaceOnUse" width="20" height="20" patternTransform="rotate(45)">

        <rect width="10" height="20" fill="#6366f1" />

        <rect x="10" width="10" height="20" fill="#eef2ff" />

      </pattern>

    </defs>

    <rect x="10" y="10" width="200" height="160" rx="16" fill="url(#diag-stripes)" stroke="#c7d2fe" />

  </svg>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

SVG Pattern — rotated stripes (Try It)