CODEWITHSUNDEEP
svgdynamicfill
Hubert Olender
Hubert Olender

Reputation: 1180

Dynamic filling svg

I want to fill SVG (which doesn't have a standard shape) dynamically For example, I have a heart that I copied from somewhere below.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" data-ember-extension="1" width="100px" height="100px">
  <path d="M50,30c9-22 42-24 48,0c5,40-40,40-48,65c-8-25-54-25-48-65c 6-24 39-22 48,0 z" fill="red" stroke="#000"/>
</svg>

Now I want to get an effect like this:

enter image description here

There will be always 3 colors to fill, but there would be proportions like:

0% green 40% orange 60% blue

or

15% green 0% orange 85% blue

or

0% green 0% orange 100% blue

There always must be filled from the left to right with the order of the same colors: gree, orange, blue.

Any suggestion how can I achieve it? The heart shape is an example, I have to have it also for other shapes like for example teardrop.

Upvotes: 0

Views: 203

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101938

Use a linear gradient with abrupt steps in colour.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" data-ember-extension="1" width="100px" height="100px">
  <defs>
    <linearGradient id="grad">
      <stop offset="0%" stop-color="limegreen"/>
      <stop offset="25%" stop-color="limegreen"/>
      <stop offset="25%" stop-color="orange"/>
      <stop offset="50%" stop-color="orange"/>
      <stop offset="50%" stop-color="dodgerblue"/>
      <stop offset="100%" stop-color="dodgerblue"/>
    </linearGradient>
  </defs>
  <path d="M50,30c9-22 42-24 48,0c5,40-40,40-48,65c-8-25-54-25-48-65c 6-24 39-22 48,0 z" fill="url(#grad)" stroke="#000"/>
</svg>

Upvotes: 1

Related Questions