Fill an SVG shape with a gradient
<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>