-2

How can I add strokes behind my title text in HTML

like this image:

enter image description here

Edit: You may also check out their website

Fahmid Bin Farooqui
  • 51
  • 7
  • https://www.w3schools.com/cssref/pr_background-image.asp – ATP Sep 12 '21 at 15:11
  • @ATP I didn't meant the background image. I was asking about the pink strokes behind the text "বিজ্ঞান ও প্রযুক্তি দুনিয়ায়". You may check out [the website](https://www.sciencebee.com.bd/). – Fahmid Bin Farooqui Sep 12 '21 at 15:19
  • If you look how it was done there, there's an outer `
    ` containing another `
    ` with the text, and `position: relative`, and an `` with the strokes and `position: absolute` + some animation. Positioning `` absolutely allows the `
    ` with text to overlay.
     – tromgy Sep 12 '21 at 15:25

2 Answers2

0

Here's a very simple example:

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

Should look like this:

enter image description here

tromgy
  • 4,937
  • 3
  • 17
  • 18
0

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>
ProgramistaZaDyche
  • 214
  • 3
  • 10