CODEWITHSUNDEEP
javascriptcssanimationsvg
upog
upog

Reputation: 5531

Animation SVG make joins smooth in path

I'm able to get the shape of heart with path. but the joins were not curved, can i get some help how to get that.

Running code in 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>

Upvotes: 1

Views: 123

Answers (1)

Manjuboyz
Manjuboyz

Reputation: 7066

Svg uses Cubic Bézier Curve: C here which helps in creating a curve structure.

below are the few SVG path commands:

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

Here is the working fiddle

Source-1

Source-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>

Upvotes: 2

Related Questions