Шкала сердцебиения на SVG и CSS

Вариант 1:

HTML
CSS

<div class="heartbeat-1">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 523.7 481.8">
		<path pathLength="1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M25.2 256h100.3l37.2-86.9 49.1 191.8L280 20l51.8 438.2 50.9-200.9h119.8"/>
	</svg>	
</div>

</svg>

</div>

.heartbeat-1 {
	display: flex;
	justify-content: center;
	align-items: center;	
}
.heartbeat-1 svg {
	height: 260px;
	fill: none;
	stroke: #337AB7;
	stroke-width: 20; 
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: heartbeat-1 3s ease infinite;	
}
@keyframes heartbeat-1 {
	to {
		stroke-dashoffset: 0;
	}
}

.heartbeat-1 {

display: flex;

justify-content: center;

align-items: center;

}

.heartbeat-1 svg {

height: 260px;

fill: none;

stroke: #337AB7;

stroke-width: 20;

stroke-dasharray: 1;

stroke-dashoffset: 1;

animation: heartbeat-1 3s ease infinite;

}

@keyframes heartbeat-1 {

to {

stroke-dashoffset: 0;

}

<div class="heartbeat-2">
	<svg x="0px" y="0px" viewBox="0 0 298 53.9">
		<path d="M297.5,41.2h-76.6c-0.5,0-0.9,0.4-1,0.8l-1.6,11.3l-3.1-32c0-0.5-0.4-0.9-0.9-0.9c-0.5,0-0.9,0.3-1,0.8 l-5.3,25.5l-2.3-10.9c-0.1-0.4-0.4-0.7-0.9-0.8c-0.4,0-0.8,0.2-1,0.6l-2.3,4.8h-107c0,0,0,0,0,0H82c-1.6,0-2.2,1.1-2.2,1.6 l-1.6,11.3l-3.1-52c0-0.5-0.4-0.9-0.9-0.9c-0.5,0-0.9,0.3-1,0.8l-9.3,45.5l-2.3-10.9c-0.1-0.4-0.4-0.7-0.9-0.8c-0.4,0-0.8,0.2-1,0.6 l-2.3,4.8H0.5"/>
	</svg>
</div>

</svg>

</div>

.heartbeat-2 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px 0;
}
.heartbeat-2 svg {
    stroke: #337AB7;
    stroke-width: 2px;
    fill: none;
    stroke-dasharray: 150, 200;
    stroke-dashoffset: 0;
    animation: heartbeat-2 4s infinite linear;
}
@keyframes heartbeat-2 {
	to {
		stroke-dashoffset: 1050;
	}
}

.heartbeat-2 {

display: flex;

justify-content: center;

align-items: center;

margin: 10px 0;

}

.heartbeat-2 svg {

stroke: #337AB7;

stroke-width: 2px;

fill: none;

stroke-dasharray: 150, 200;

stroke-dashoffset: 0;

animation: heartbeat-2 4s infinite linear;

}

@keyframes heartbeat-2 {

to {

stroke-dashoffset: 1050;

}

Вариант 1:

Вариант 2:

Смотрите также:

Добавить комментарий:

Комментарии: