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
Jochem
Jochem2y ago
anyway, your image was that color because the PNG had a transparent background
nehatkhan
nehatkhan2y ago
oh sir did you understand my question
Jochem
Jochem2y ago
oh, no, I was just commenting on the image you pasted, not the question
nehatkhan
nehatkhan2y ago
wait let me show you what I build please
nehatkhan
nehatkhan2y ago
sir, here is my react native app
nehatkhan
nehatkhan2y ago
now the image fill color is fully white, hope you understand what I was trying to say
Jochem
Jochem2y ago
you can use a gradient fill to fill it part way, if you just want a simple line
nehatkhan
nehatkhan2y ago
sir this is the first time i used svg
const fill = waterIntake < 3 ? '#fff' : 'blue';
const fill = waterIntake < 3 ? '#fff' : 'blue';
` I tried this but its working as I want
Jochem
Jochem2y ago
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
nehatkhan
nehatkhan2y ago
okay sir
Jochem
Jochem2y ago
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
nehatkhan
nehatkhan2y ago
Sir this is the SVG image component
nehatkhan
nehatkhan2y ago
and this is the fill color which fill the whole body, I just want that it should only fill depend on water Intake
Jochem
Jochem2y ago
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.
Jochem
Jochem2y ago
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.
nehatkhan
nehatkhan2y ago
Let me check this sir, thanks a lot for providing this
nehatkhan
nehatkhan2y ago
Mate I want something like this
nehatkhan
nehatkhan2y ago
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>
Jochem
Jochem2y ago
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%)
b1mind
b1mind2y ago
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.
b1mind
b1mind2y ago
https://codepen.io/b1mind/pen/vYZEVXy demo of how powerful SVG masking can be
nehatkhan
nehatkhan2y ago
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.
nehatkhan
nehatkhan2y ago
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>
Jochem
Jochem2y ago
examine what the value is when it fills the whole body is filled
nehatkhan
nehatkhan2y ago
Here is the video sir
Jochem
Jochem2y ago
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
nehatkhan
nehatkhan2y ago
oh yes but how
Jochem
Jochem2y ago
no idea, I don't know how you debug a react native app
nehatkhan
nehatkhan2y ago
no no I mean how to give percentage sign along with the percentage value <Stop offset={waterIntakePercentage} stopColor="lightblue" />
Jochem
Jochem2y ago
{waterIntakePercentage + "%"} is my best guess
nehatkhan
nehatkhan2y ago
bro bro done done I love you
nehatkhan
nehatkhan2y ago
nehatkhan
nehatkhan2y ago
Sir thanks a lot. Really I am so happy today because of you. Was struggling from last 1 week
Jochem
Jochem2y ago
glad to have helped!
nehatkhan
nehatkhan2y ago
@jochemm sir is there any way that on 100% it should drown into water.
nehatkhan
nehatkhan2y ago
Like it should fill till neck on 100%
Jochem
Jochem2y ago
so the head is always unfilled you mean?
nehatkhan
nehatkhan2y ago
Yes sir
nehatkhan
nehatkhan2y ago
Jochem
Jochem2y ago
easiest way is to multiply the percentage by something like 0.95 or something, so that 100% will result in a 95% fill
nehatkhan
nehatkhan2y ago
Gray is the filled color and white is the u filled color
Jochem
Jochem2y ago
you'll have to play with the number to make it line up correctly
nehatkhan
nehatkhan2y ago
Hmmm make sense
nehatkhan
nehatkhan2y ago
Done sir
nehatkhan
nehatkhan2y ago
How can I make this tread to solved
Jochem
Jochem2y ago
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
Want results from more Discord servers?
Add your server