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>