CODEWITHSUNDEEP
svg
phagyrhe
phagyrhe

Reputation: 197

How to fill up the inside of SVG shape

I created an SVG shape which I intend to use on the background but got into a muddle while trying to fill up the inside. I don't know if I have been doing it the wrong way though. SVG shape

Edited - As suggested, I would like to have the shape filled like this.:

Here is a similar filled-shape I am targeting

My code:

<div class="svg-child-container">
    <svg xmlns="http://www.w3.org/2000/svg" width="1400" height="650" viewBox="0 0 140 65"
         preserveAspectRatio="xMidYMin slice">
        <linearGradient id="PSgrad_0" x1="70.711%" x2="0%" y1="70.711%" y2="0%">
            <stop offset="0%" stop-color="rgb(95,54,152)" stop-opacity="1"/>
            <stop offset="100%" stop-color="rgb(247,109,138)" stop-opacity="1"/>
        </linearGradient>
        <g id="curves">
            <path fill-rule="nonzero" d="M 45 0 C 45 20 70 8 76 14" stroke="url(#PSgrad_0)" fill="url(#PSgrad_0)"/>
            <path fill-rule="nonzero" d="M 76 13.8 C 85 29 52 25 54 47" stroke="url(#PSgrad_0)" fill="transparent"/>
            <path fill-rule="nonzero" d="M 53.85 46 C 56 70 80 64 80 63" stroke="url(#PSgrad_0)" fill="url(#PSgrad_0)"/>
            <line x1="79" x2="140" y1="63.5" y2="43" stroke="url(#PSgrad_0)" fill="url(#PSgrad_0)"/>
        </g>
    </svg>
</div>

My question is that is, is there a solution to this?

Upvotes: 0

Views: 274

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

If you want a whole shape to be filled, then it has to be one path. It can't be four different paths. Otherwise, they'll just get filled individually.

<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="650" viewBox="0 0 140 65"
         preserveAspectRatio="xMidYMin slice">
  <linearGradient id="PSgrad_0" x1="70.711%" x2="0%" y1="70.711%" y2="0%">
    <stop offset="0%" stop-color="rgb(95,54,152)" stop-opacity="1"/>
    <stop offset="100%" stop-color="rgb(247,109,138)" stop-opacity="1"/>
  </linearGradient>
  <g id="curves">
    <path d="M 45 0 C 45 20 70 8 76 14 C 85 29 52 25 54 47 C 56 70 80 64 80 63 L 140 43" stroke="url(#PSgrad_0)" fill="url(#PSgrad_0)"/>
  </g>
</svg>

Upvotes: 2

Related Questions