Как нарисовать SVG изогнутой, используя один путь?

Question

То, что я хочу, это на следующем рисунке -

У меня есть 3 относительных вопроса относительно этого

1. Можем ли мы нарисовать весь холст с single path .?

2. Если мы можем нарисовать только целое, используя более одного пути, будет ли удобно давать им анимацию?

3.В обоих случаях кто-нибудь может быть достаточно любезен, чтобы правильно сориентироваться с образцом.

Это то, где я дошел до сих пор... как вы можете видеть, я не эксперт по SVG и, конечно, вы можете использовать круг для большой точки. Заранее спасибо.

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

Используйте что-то вроде:

<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" />

Как показано в документации, пути могут содержать произвольное количество компонентов.

Как резюме:

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

Как правило, строчные буквы указывают абсолютные координаты, а строчные - относительные.