HTML 文本后面的笔划

Question

如何在 HTML

中的标题文本后面添加笔画

喜欢这张图片：

编辑：您也可以查看their website

Answer 1

这是一个非常简单的例子：

  <body>
    <div style="background-color: black">
      <svg style="position: absolute; top: 0px" viewBox="0 0 400 160" width="200" xmlns="http://www.w3.org/2000/svg">
        <ellipse style="fill: rgb(204, 6, 171)" cx="196.941" cy="70.296" rx="162.105" ry="41.931" />
      </svg>
      <h1 style="position: relative; color: white">Hello world</h1>
    </div>
  </body>

应该是这样的：

Answer 2

这是放置在文本后面的 SVG 动画。例如，您需要使用 Inkscape 重绘自己的 SVG。

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: #303030;
  height: 100vh;
}
svg{
    width: 300px;
    height: 150px;
    overflow: visible;
  position: absolute;
  top: -10px;
  left: 0;
}
path{
  stroke: #ff165e;
    stroke-opacity: 1;
    stroke-width: 10px;
   fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  stroke-dasharray: 4627, 4627;
  
}
.text{
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  color:#fff;
  font-family: verdana;
  font-size: 100px;
  font-weight: bold;
}
.container{
  width: 300px;
  height: 300px;
}

<div class="container">
  <div class="text">TEXT</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200" preserveAspectRatio="none">
<path class="n2-ss-long" d="M20,40 C41,44 474,40 474,48 C474,56 10,54 10,62 C10,70 472,65 473,72 C473,79 22,83 22,89 C22,95 469,90 469,97 C469,104 13,107 13,112 C13,117 469,110 469,117 C469,124 24,128 24,133 C24,138 490,127 490,131 C490,135 17,160 17,160"></path>
</svg>
</div>

HTML 文本后面的笔划

Strokes behind text in HTML

html

stroke