Анимация SVG делает соединения плавными в пути

Question

Я могу получить форму сердца с path. но соединения не были изогнуты, могу ли я получить некоторую помощь, как это получить.

Запуск кода в Code pen: live

<svg width=400 height=400>  
  <path d="M 200 380
             L 60 180 
             C 60 180, 100 -70,  200 125 
             C 200 125 , 300 -70 , 340 180
             L 340 180
           L 200 380" fill="#FF0266" 
        stroke="yellow" 
        stroke-dasharray= 2
        stroke-width=1
        />
</svg>

Answer 1

Svg использует Cubic Bézier Curve: C, что помогает в создании структуры кривой.

ниже приведены несколько команд SVG-пути:

MoveTo: M, m
LineTo: L, l, H, h, V, v
Cubic Bézier Curve: C, c, S, s
Quadratic Bézier Curve: Q, q, T, t
Elliptical Arc Curve: A, a
ClosePath: Z, z

Вот рабочая скрипка

Источник-1

Источник-2

body {
  background: #333;
  color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-size: 3em;
  margin-top: 1em;
  text-align: center;
  text-transform: uppercase;
}

.heart {
  fill: #EE025F;
  position: relative;
  top: 5px;
  width: 300px;
  animation: pulse 1.4s ease infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.12);
    opacity: .75
  }
  30% {
    transform: scale(1.1);
    opacity: .5;
  }
  50% {
    transform: scale(1.12);
    opacity: .75;
  }
  70% {
    transform: scale(1.1);
    opacity: .7
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

<svg class="heart" viewBox="0 0 32 29.6">
  <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
	c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>