How to animate SVG image
hey guys I need help to animate an SVG human body. I am creating a app which have a Human body as SVG image. the body image is white in color, now I want to show progress like animation, lets user daily target of drinking water 5 litre and user drunk 2 litre. Than I want to show 20 percent progress as body fill color
46 Replies
anyway, your image was that color because the PNG had a transparent background
oh
sir did you understand my question
oh, no, I was just commenting on the image you pasted, not the question
wait let me show you what I build
please
sir, here is my react native app
now the image fill color is fully white,
hope you understand what I was trying to say
you can use a gradient fill to fill it part way, if you just want a simple line
sir this is the first time i used svg
`
I tried this but its working as I want
take a look at #How To Ask Good Questions and share something we can poke at, then maybe someone can have a more direct answer
okay sir
right now all I see is a picture that could be anything and have any layout, there's not really much I can say about that other than "mess with the background fill"
Not that I'm an SVG expert by any means
Sir this is the SVG image component
and this is the fill color which fill the whole body, I just want that it should only fill depend on water Intake
Svg fill can apparently also take gradients https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill
fill - SVG: Scalable Vector Graphics | MDN
The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
When you set two stops very close together, you can use a gradient to make a partially filled shape https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients
Gradients in SVG - SVG: Scalable Vector Graphics | MDN
Perhaps more exciting than just fills and strokes is the fact that you can also create and apply gradients as either fills or strokes.
Let me check this sir, thanks a lot for providing this
Mate I want something like this
I tried this but its not helping me. It become gradient color and I want only one color which should go from down to up
Defs>
<LinearGradient id="grad" x1="0" y1="100%" x2="0%" y2="0%">
<Stop offset="100%" stopColor="gray" />
<Stop offset="70%" stopColor="blue" />
<Stop offset="40%" stopColor="red" />
<Stop offset="20%" stopColor="green" />
<Stop offset="0%" stopColor="yellow" />
</LinearGradient>
</Defs>
try setting two of the stops right at or almost at the same point (so blue and red both at 40%, or one at 40% and one at the other at 40.1%)
I would just use a SVG mask and then a translate a rectangle behind it.
If you paste the SVG I can maybe give quick example.
https://codepen.io/b1mind/pen/vYZEVXy demo of how powerful SVG masking can be
sir here is the gist of my svg functional component
https://gist.github.com/nehatkkhan786/1ed3fdf8b94287d3269e6cd8dab95efb
Gist
Human Body SVG Functional Component
Human Body SVG Functional Component. GitHub Gist: instantly share code, notes, and snippets.
const waterIntakePercentage = ((waterIntake / 1000) / waterIntakeTarget) * 100
sir this function is giving the percentage of user drunk water.
But when I pass it to the Linear Gradient it initilly stay normal and when there is change in percentage it fill up the full body
<Defs>
<LinearGradient id="grad" x1="0" y1="100%" x2="0%" y2="0%">
<Stop offset={waterIntakePercentage} stopColor="lightblue" />
<Stop offset={waterIntakePercentage + 0.02 } stopColor="gray" />
</LinearGradient> </Defs>
</LinearGradient> </Defs>
examine what the value is when it fills the whole body is filled
Here is the video sir
you probably need to add the % sign
what I meant was, use the inspector in devtools to look at the actual value being presented to the browser
oh yes but how
no idea, I don't know how you debug a react native app
no no I mean how to give percentage sign along with the percentage value
<Stop offset={waterIntakePercentage} stopColor="lightblue" />
{waterIntakePercentage + "%"} is my best guessbro bro
done done
I love you
Sir thanks a lot. Really I am so happy today because of you. Was struggling from last 1 week
glad to have helped!
@jochemm sir is there any way that on 100% it should drown into water.
Like it should fill till neck on 100%
so the head is always unfilled you mean?
Yes sir
easiest way is to multiply the percentage by something like 0.95 or something, so that 100% will result in a 95% fill
Gray is the filled color and white is the u filled color
you'll have to play with the number to make it line up correctly
Hmmm make sense
Done sir
How can I make this tread to solved
on PC there's three dots at the top right, where you have an option to edit tags and add the 'solved' tag. It's similar on mobile I think