How to draw SVG curved using single path?

Question

What I want is in the following image -

I have 3 relative question regarding this

1.Can we draw the whole canvas with a single path.?

2.If we can only draw the whole using more than one path will it be convenient to give them animation?

3.In both cases can anyone be kind enough to guide to a proper way with a sample.?

This is where I have gotten so far... as you can see am not an expert on SVG and of course, you can use a circle for the big dot. Thank You in advance.

svg {
  width: 100%;
}

.straightLine {
  height: 3000px;
  position: relative;
}

.st0 {
  fill: none;
  stroke-dashoffset: 3px;
  stroke: #000000;
  stroke-width: 5;
  stroke-miterlimit: 10;
}

<div class="straightLine">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1280 1000" style="enable-background:new 0 0 1280 800;" xml:space="preserve">
	<g class="all">
	<path id="line1" class="st0" stroke-dasharray="10,9" d="M 35 -17 C 0 190 50 83 600 109 "/>
	<path id="line1" class="st0" stroke-dasharray="10,9" d="M 600 109  c 64.9 0 90.4 40.5 90.4 90.4"/>
	</g>
  </svg>
</div>

Answer 1

Use something like:

<path d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" />

As shown in the documentation, paths can contain an arbitrary number of components.

As a summary:

M/m    Move current position
L/l    Draw a line
H/h    Draw a horizontal line
V/v    Draw a vertical line
C/c    Draw a cubic Bezier
Q/q    Draw a quadratic Bezier
A/a    Draw a circular/elliptal arc
Z/z    Close path

In general, uppercase instructions specify absolute coordinates and lowercase instructions specify relative.