D
D
dc65k2020-12-17 11:33:26
SVG
dc65k, 2020-12-17 11:33:26

How to make such gradient at path (SVG)?

Hello everyone, how to make such a gradient on path (SVG)?
5fdb1761c85a3086589844.jpeg

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Stepan Voevodin, 2020-12-19
@dc65k

It's not very clear what it is.
The simplest thing is to split it into 2 paths and make a linear gradient for each. It will turn out something like this:
5fde08eb3571d145502895.jpeg

<svg width="438" height="213" fill="none" xmlns="http://www.w3.org/2000/svg">

  <path d="M.0078125 213C189.608 164.6 350.341 51.1667 407.008.5l30.5 10C397 41 200.5 176 .0078125 213z" fill="url(#paint0_linear)"/>
    <linearGradient id="paint0_linear" x1="9.7e-7" y1="213" x2="438" y2="12" gradientUnits="userSpaceOnUse">
      <stop stop-color="#2ACD66"/>
      <stop offset="1" stop-color="#2ACD66" stop-opacity="0"/>
    </linearGradient>  
  
  <path d="M.0078125 213C104.5 207.5 382 90 437.508 37V10.5C397 41 200.5 176 .0078125 213z" fill="url(#paint1_linear)"/>
    <linearGradient id="paint1_linear" x1="9.7e-7" y1="213" x2="430.422" y2="5.72326" gradientUnits="userSpaceOnUse">
      <stop stop-color="#EE814A"/>
      <stop offset="1" stop-color="#EE814A" stop-opacity="0"/>
    </linearGradient>

</svg>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question