27Non-Scaling Stroke

II · Drawing with SVG

vector-effect keeps line weight constant while the artwork scales.

Source

2 files

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CodeSandbox</title>
  </head>
  <body>
    <style>
      .swoops {
        width: 100%;
        height: 200px;
    
        * {
          vector-effect: non-scaling-stroke;
        }
      }
    </style>
    
    <div class="swoops-wrapper">
      <svg
        class="swoops"
        preserveAspectRatio="none"
        viewBox="0 0 745 167"
      >
        <path
          d="M738 51.2502C726.736 51.2531 715.17 52.8872 704.122 57.1247C656.005 75.5794 670.735 151.387 600.524 154.879C530.313 158.371 500.363 85.0524 413.459 77.5723C326.555 70.0921 219.52 115.894 180.732 105.503C141.944 95.1126 141.944 16.2274 72.7152 7.7487C39.8232 3.72029 18.9013 16.5797 6 31.1888"
        />
      </svg>
    </div>
  </body>
</html>