Shahid Shahid - 6 months ago 30
CSS Question

Fill a SVG shape with a linear-gradient

Wavy shape with gradient

wavy shape

linear gradient

How can I apply Linear gradient and drop shadow to this pattern?



<svg viewbox="0 0 60 10">
<pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="10" height="10">
<path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="#FFC338" />
</pattern>
<rect x="0" y="0" width="60" height="7" fill="url(#waves)" />
</svg>




Answer

As commented by Paul LeBeau, you need to convert the wavy shape to one path, then you can fill the wavy shape with a linear gradient as shown in this example:

<svg viewbox="7.5 0 60 10">
  <defs>
    <linearGradient id="gradient">
      <stop offset="5%" stop-color="#FFC338" />
      <stop offset="95%" stop-color="#FFEA68" />
    </linearGradient>
  </defs>
  <path fill="url(#gradient)" d="M0 10 V5 Q2.5 2.5 5 5 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 V10" />
</svg>

Comments