Se7ensky动画的工作方式是使用标准破折号动画技术，但用代表徽标手绘外观的轮廓裁剪动画笔触。
因此，标准破折号动画技术的工作原理如下。您采用标准行：
<svg> <path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/></svg>
然后，向其添加破折号样式并为其位置（
stroke-dashoffset）设置动画。
.pen { stroke-dasharray: 280 280; stroke-dashoffset: 280; animation-duration: 2s; animation-name: draw; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear;}@keyframes draw { from { stroke-dashoffset: 280; } to { stroke-dashoffset: 0; }}<svg> <path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/></svg>最后，要获得Se7ensky示例的花哨的可变笔触宽度，请用徽标的轮廓剪裁该行。
因此，让我们假设下面的简单路径代表您的徽标：
<svg> <path stroke="black" stroke-width="1" fill="lightgrey" d="M 40,50C 110,55 195,60, 265,55C 290,55 290,85 265,85C 195,85 110,85 40,100C 0,100 0,50 40,50 Z"/></svg>
我们将其转换为clipPath元素，并使用它来将动画笔触修整为徽标的形状：
.pen { stroke-dasharray: 280 280; stroke-dashoffset: 280; animation-duration: 2s; animation-name: draw; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear;}@keyframes draw { from { stroke-dashoffset: 280; } to { stroke-dashoffset: 0; }}<svg> <clipPath id="logo"> <path d="M 40,50 C 110,55 195,60, 265,55 C 290,55 290,85 265,85 C 195,85 110,85 40,100 C 0,100 0,50 40,50 Z"/> </clipPath> <path d="M 10,75 L 290,75" stroke="red" stroke-width="50" clip-path="url(#logo)"/></svg>因此，要复制他们的示例，您需要在SVG中添加一个连续的路径（或多个路径，如果需要的话），该路径表示笔在徽标中书写字母时笔所采用的路径。
然后，使用dashoffset技术为该路径设置动画，同时使用原始徽标进行剪切。
更新资料
这是具有更逼真的字母形状的最终演示：
// Simple pre to enable and disable the clipping pathvar chk = document.getElementById("chk");var penpath = document.getElementById("penpath");chk.addEventListener("input", function(evt) { if (evt.target.checked) { penpath.classList.add("clipped"); } else { penpath.classList.remove("clipped"); }});.pen { fill: none; stroke: red; stroke-width: 18; stroke-linecap: round; stroke-dasharray: 206 206; stroke-dashoffset: 206; animation-duration: 2s; animation-name: draw; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear;}.clipped { clip-path: url(#logo);}@keyframes draw { from { stroke-dashoffset: 206; } to { stroke-dashoffset: 0; }}<svg> <defs> <clipPath id="logo"> <path d="m85.77 49.77c-10.59 8.017-27.38 21.95-41.58 21.95-6.396 0-12.99-2.481-12.39-9.735l0.3998-4.199c38.38-12.03 48.17-26.15 48.17-35.5 0-7.635-7.995-9.162-14.39-9.162-25.98-0.1909-54.97 25.39-54.17 50.39 0.3998 12.6 7.196 25.01 21.79 25.01 19.79 0 41.78-17.94 53.97-31.5zm-52.37-1.336c5.397-12.6 16.99-21.76 26.98-24.24 1.399-0.3818 2.399 0.7635 2.399 2.1 0.1999 3.245-11.79 16.42-29.38 22.14z"/> </clipPath> </defs> <path id="penpath" d="m39.02 51.1c5.361-1.771 10.04-4.182 15.98-7.857 6.019-3.933 9.841-7.728 12.77-10.71 1.403-1.369 12.03-15.97-7.857-13.93-9.824 1.01-19.62 8.3-26.16 14.91-6.538 6.61-10.42 14.51-11.96 22.23-2.559 12.76 1.807 26.19 21.07 23.48 13.96-1.965 32.59-14.55 43.66-25.54" /></svg><p><input id="chk" type="checkbox" checked="true"/> <label for="chk">Enable clipping path</label></p>
