Вариант 1:
|
1 2 3 4 5 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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; } } |
Вариант 2:
|
1 2 3 4 5 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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; } } |
Добавить комментарий: