Воздушные шары [15/15] - 100% (с комментариями)

Курсы §36. Знакомство с SVG
1

HTML

<svg width="360" height="500">
    
<!--ФОН - отступы по 20-->
    <rect width="320" height="460" x="20" y="20" rx="20" fill="lemonchiffon"/>

<!--ШАРЫ-->        
    <circle r="100" cx="140" cy="170" fill="crimson"/>
    <ellipse rx="60" ry="80" cx="250" cy="210" fill="gold"/>

<!--ВЕРЁВОЧКИ - по х сперва +10, затем -15, по у +30-->
    <polyline points="140,270 150,300 135,330 150,360 135,390 150,420" stroke="brown" fill="none"/>
    <polyline points="250,290 260,320 245,350 260,380 245,410 260,440" stroke="brown" fill="none"/>
    
<!--ХВОСТИКИ - высота 10, основание +/- 10 от вершины-->
    <polygon points="130,280 140,270 150,280" fill="crimson"/>
    <polygon points="240,300 250,290 260,300" fill="gold"/>
  
</svg>


<!-- Цвета
lemonchiffon - фон
crimson - шар1
gold - шар2
brown - верёвочка
-->
3 лайка
2

Подскажите, как высчитывать координаты (например, веревочки и хвостики), не понятно

3

по осевым линиям:

  1. вершина хвостика расположена по линии центра фигуры и удалена от центра на вертикальный радиус.
  2. углы хвостика по 10 пикселей равноудалены по оси х от вершины и на 10 пикселей ниже вершины по оси y.
  3. начало веревки в вершине хвостика.
  4. правый сдвиг веревки от вершины хвостика +10, левый сдвиг -15 от правого, повторяемые координаты по оси х для разных точек.
  5. вертикальное движение точек по 30 пикселей вниз от вершины хвостика.
    В принципе ТС расписал полностью решение в комменте к коду.
4 
<svg width="360" height="500">
  <rect width = "320" height = "460" x = "20" y = "20" rx = "20" fill = "lemonchiffon"/>
  <circle r="100" cx ="140" cy="170" fill = "crimson"/>
  <ellipse rx ="60" ry = "80" cx = "250" Cy = "210" fill = "gold"/>
  <polyline points="140,270 150,300 135,330 150,360 135,390 150,420" stroke="brown" fill="none"/>
  <polyline points="250,290 260,320 245,350 260,380 245,410 260,440" stroke="brown" fill="none"/>
  <polygon points="130,280 140,270 150,280" fill="crimson"/>
  <polygon points="240,300 250,290 260,300" fill="gold"/>
</svg>

Тоже самое только без комментариев