css3 realizes dynamic electrocardiogram polyline
M（moveto）：需要两个参数（x轴和y轴坐标，移动到的点的x轴和y轴的坐标
L（lineto）：需要两个参数（x轴和y轴坐标），它会在当前位置和最新的位置（L前面画笔所在的点）之间画一条线段。
H（horizontal lineto）：一个参数，标明在x轴移动到的位置，绘制水平线
V（vertical lineto）：一个参数，标明在y轴移动到的位置，绘制垂直线
Z（ closepath）：从当前点画一条直线到路径的起点
Broken line electrocardiogram
The coordinate system in SVG原点通常位于左上角, and Y轴的正方向是向下的, which is different from the conventions of some other graphics systems (such as the Cartesian coordinate system). So if you draw a straight line in SVG and thinkHandstand, maybe because you are confused when using Cartesian coordinate system thinking
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
svg {
width: 300px;
height: 200px;
}
.path {
fill: none;
stroke: #ff7f50;
stroke-width: 2;
stroke-dasharray: 1000; /* 设置路径的总长度 */
stroke-dashoffset: 1000; /* 初始偏移量，隐藏路径 */
animation: dash 10s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
/* 将路径偏移量设置为0，显示整个路径 */
}
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<path class="path" d="M0 160 L50 160 L60 200 L70 140 L80 160 L100 0 L120 160 L140 160 L150 130 L160 140 L170 120 L180 130 L200 60 L220 160 L240 160 "/>
</svg>
</body>
</html>