how do i fix this code

Question

i need help fixing this code to make it simulate rain . i want to animate it so they all fall at once

<ellipse cx="30" cy="30" rx="10"ry="20"style= "fill:pink"/>
<ellipse cx="120" cy="30" rx="10"ry="20"style= "fill:pink" />
<ellipse cx="200" cy="30" rx="10"ry="20"style= "fill:pink"/>
<ellipse cx="300" cy="30" rx="10"ry="20"style= "fill:pink"/>
<ellipse cx="360" cy="30" rx="10"ry="20"style= "fill:pink" />
<ellipse cx="440" cy="30" rx="10"ry="20"style= "fill:pink"/>
<animate attributeName="ry" from="0" to="300" dur="3s" fill="freeze" repeatCount="indefinite"/>
</ellipse>

Answer 1

Advices first, for avoid mistakes:
- be more strict in your code indentation: you'll be able to spot more easily the grossest errors
- keep use full form of xml tags ( <opening> + </closing> ) instead of shortcut way ( <tag/> ), even you don't put child nodes ( content ) inside

Well, you have at least an error of opening tag syntax, for the last <ellipse> element containing the child node <animate> ( slash '/' to delete, the closing tag is after the <animate> node )...
But you don't give us the context of your svg code: the <svg> parent tag element, in which are defined the size of the svg viewport.

Notice also that as is, only the last ellipse element will be animated. You should look at, study and test global features as 'def' ( define ) possibilities ( re-use/clone of elements ) and 'groups' before starting a still too ambitious project for now... maybe ;) ( especially since for this purpose, you can surely benefit from use of <canvas> instead <svg>, and of JS in all the cases )

Answer 2

If tou don't know what I mean by the <elipse>, that's you don't have look at what you have copy paste: your svg code is only composed of <elipse> tags...

So, I didn't tell to waut for learning absolutely <canvas>, but I suggest you to learn deeper svg before planning ambitious project: you talk about "simulate rain" in your question... that's not a little exercise ;) And I said that if you have a more globaly view on others Html possibilities like <canvas> which may be more appropriate for this putpose...

Anyway, to have valid code ( don't say working as you like ) change your 3 last lines by:

<ellipse cx="440" cy="30" rx="10"ry="20"style= "fill:pink">
<animate attributeName="ry" from="0" to="300" dur="3s" fill="freeze" repeatCount="indefinite"/>
</ellipse>

... as I previously said, you had put a slash ( "/" ) at end of opening tag <elipse> ^^
But I don't dive into more explanation, as my english is bad, and you seems to need too much explanation than I could write :P

Answer 3

i put the svg but i had a lot of code in between. also i dont understand what you mean by the ellipse in your second paragraph.

but so from what your saying i should wait and lean canvas first then try to work on a project like this ?

Answer 4

ooooooh okay i understand now