CODEWITHSUNDEEP
javaandroidsvg
juztcode
juztcode

Reputation: 1355

making a 4 stop gradient in android's xml

I tried using inkscape's mesh gradient but it seems not supported in android, I need something like this:
enter image description here

a 4 stop gradient for android's rectangle(or any other shape, like a circle), basically 4 blends of gradient color. How do I do this in android? Or atleast by something that android supports( is illustrator's svg output taken by android)?

Upvotes: 1

Views: 761

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101878

You can approximate it using multiple gradients. This is just a quick attempt to get something close. You may be able to do better with a little extra tweaking.

<svg width="250" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="grad1" x1="0" y1="1">
      <stop offset="0" stop-color="rgb(149,254,149)"/>
      <stop offset="1" stop-color="rgb(255,254,149)"/>
    </linearGradient>

    <radialGradient id="grad2" cx="0" cy="0" r="0.75">
      <stop offset="0" stop-color="rgba(254,151,149, 1)"/>
      <stop offset="1" stop-color="rgba(254,151,149, 0)"/>
    </radialGradient>

    <radialGradient id="grad3" cx="1" cy="1" r="0.75">
      <stop offset="0" stop-color="rgba(149,150,202, 1)"/>
      <stop offset="1" stop-color="rgba(149,150,202, 0)"/>
    </radialGradient>
  </defs>
  
  <rect width="100" height="100" fill="url(#grad1)"/>
  <rect width="100" height="100" fill="url(#grad2)"/>
  <rect width="100" height="100" fill="url(#grad3)"/>
</svg>

Upvotes: 2

Related Questions