Strokes behind text in HTML

Question

How can I add strokes behind my title text in HTML

like this image:

Edit: You may also check out their website

Answer 1

This is an SVG placed behind text and animated. You need to redraw your own SVG for example using Inkscape.

*{
  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>