need to make a lightin strike from one oint to another dealing with svg and canvas coordinate [on hold]

I have a svg file that have three areas one is a outer area with points around the edge another is a inner area with point mid away in to the center and at the center are points randomly laid out. Either a animation of lightn, glowing beam, or some other type of animation will be use to visually connect these points together, if i can somehow find away to use a single image as a lightn strike or a glowing beam strike to increase performance… I can get the location of each point from the svg file embedded in the html by dom element method getBoundingClientRect and getClientRects. It seem to work sometime and others time it don’t. Can someone show me or codepen me a example of a svg images made up of two circle one a outer and the other a inner and in the inner varies of points to target and hit. It can be a canvas with just drawing lines from the outer to the inner and from the inner to the varies of points in the inner closer to the center.

Thank you for reading.