廢話不多少 上圖上程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
body {
margin: unset;
display: grid;
place-content: center;
height: 100vh;
background-color: #282c34;
}
</style>
<svg width="1900" height="200">
<defs>
<g id="box">
<polyline points="0 57 713 57 720 63 1200 63 1210 57 1920 57" fill="transparent"
id="boxPath" stroke-width="1" />
</g>
<radialGradient id="radialGradient" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
</radialGradient>
<mask id="mask">
<circle cx="0" cy="0" r="100" fill="url(#radialGradient)">
<animateMotion dur="4s" repeatCount="indefinite" from="0,57" to="1920,57">
<mpath xlink:href="#boxPath"></mpath>
</animateMotion>
</circle>
</mask>
</defs>
<use stroke="#235fa7" stroke-width="4" xlink:href="#box"></use>
<use stroke="#4fd2dd" stroke-linecap="round" stroke-width="2" xlink:href="#box" mask="url(#mask)">
<animate attributeName="stroke-dasharray" from="0,0" to="1920,0" dur="4s" repeatCount="indefinite">
</animate>
</use>
</svg>
</body>
</html>
一個名為
box的<g>組，其中包含一條透明填充的折線<polyline>，定義了一條路徑。一個徑向漸變
<radialGradient>，從白色不透明到完全透明。一個名為
mask的遮罩層，包含一個圓形，其填充為上述定義的徑向漸變，並且該圓在定義的路徑上無限迴圈移動。SVG容器尺寸為寬1900px，高200px。
<defs>內定義了多個SVG元件供後續使用：使用
<use>標籤引用之前定義的box組兩次，一次用於繪製藍色的靜態線條，另一次用於建立帶有遮罩效果的動態線條動畫。動畫效果：
第二個
<use>元素中的<animate>標籤負責實現線條的動態顯示效果，透過改變stroke-dasharray屬性值來模擬線條逐漸顯現的過程，持續時間為4秒，並且無限重複。
