title: Fill an SVG shape with a gradient
body: <p><a href="https://i.stack.imgur.com/LTGZJ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/LTGZJ.jpg" alt="Wavy shape with gradient"></a></p>
  
  <p><a href="https://i.stack.imgur.com/N63yp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/N63yp.png" alt="wavy shape"></a></p>
  
  <p><a href="https://i.stack.imgur.com/9J8Xs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9J8Xs.png" alt="linear gradient"></a></p>
  
  <p>How can I apply Linear gradient and drop shadow to this pattern?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg viewbox="0 0 60 10"&gt;
    &lt;pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="10" height="10"&gt;
      &lt;path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="#FFC338" /&gt;
    &lt;/pattern&gt;
    &lt;rect x="0" y="0" width="60" height="7" fill="url(#waves)" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>