SVG animation guidance needed - animation

Question

I read this Pocket Guide to SVG today and learned a lot from it, but... it does not cover animation. I need some guidance on how to do a simple animation. I dont need any transitions between frames, I just want to define shapes for frame one, shapes for frame two, etc.
https://svgpocketguide.com/book/
<!-- https://svgpocketguide.com/book/#section-4 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1080" height="1080">
<!-- the doctype and svg need to be like this to render in Firefox -->
<rect width="1080" height="1080" fill="white"/>
<!-- delay frames by waiting 0.5 seconds between frames -->
<animation frame 1>
<line x1="75" y1="75" x2="10" y2="50" stroke="hsl(0,82%,56%)" stroke-width="3"/>
<line x1="75" y1="75" x2="175" y2="475" stroke="hsl(236,82%,56%)" stroke-width="3"/>
<circle cx="10" cy="50" r="5" fill="black" />
<circle cx="75" cy="75" r="5" fill="black" />
<circle cx="175" cy="475" r="5" fill="black" />
</animation frame 1>
<animation frame 2>
<line x1="75" y1="75" x2="10" y2="50" stroke="hsl(0,82%,56%)" stroke-width="3"/>
<line x1="75" y1="75" x2="175" y2="475" stroke="hsl(236,82%,56%)" stroke-width="3"/>
<circle cx="10" cy="50" r="5" fill="black" />
<circle cx="75" cy="75" r="5" fill="black" />
<circle cx="175" cy="475" r="5" fill="black" />
</animation frame 2>
</svg>

Answer 1

<!-- https://svgpocketguide.com/book/#section-4 -->
<!-- https://oak.is/thinking/animated-svgs/ -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1080" height="1080">
<rect width="1080" height="1080" fill="white"/>
<line x1="400" y1="400" x2="10" y2="515" stroke="hsl(250,82%,56%)" stroke-width="3">
<animate
attributeName="x1"
dur="0.5s"
values="50;100;200;350;400"
calcMode="discrete"
repeatCount="1"
/>
<animate
attributeName="y1"
dur="0.5s"
values="50;100;200;350;400"
calcMode="discrete"
repeatCount="1"
/>
<animate
attributeName="stroke"
dur="0.5s"
values="hsl(50,82%,56%);hsl(100,82%,56%);hsl(150,82%,56%);hsl(200,82%,56%);hsl(250,82%,56%)"
calcMode="discrete"
repeatCount="1"
/>
</line>
<circle cx="50" cy="50" r="5" fill="black" />
<circle cx="100" cy="100" r="5" fill="black" />
<circle cx="200" cy="200" r="5" fill="black" />
<circle cx="350" cy="350" r="5" fill="black" />
<circle cx="400" cy="400" r="5" fill="black" />
</svg>

Answer 2

This question shows a method for frame-based animation in an SVG. It uses CSS animation, but you could achieve the same thing with SMIL. However, the CSS way is a little cleaner IMO.
SIMPLE – Animate Multiple SVGs in Sequence (like a looping GIF)
Here's another answer, that may help: SVG frame-based animation