JSFiddle - React, Tailwind, and code Playground

by RAX7

HTML

<div class="container">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 200 200">
    
    <defs>
      <path id="textArc" d="M25,100a75,75,0,0,1,150,0"/>

      <filter id="emboss">
        <feOffset in="SourceAlpha" dx="0.25" dy="0.5" />
        <feGaussianBlur result="blurOut" stdDeviation="0.25" />
        <feFlood flood-color="#000" result="floodOut" />
        <feComposite operator="out" in="floodOut" in2="blurOut" result="compOut" />
        <feComposite operator="in" in="compOut" in2="SourceAlpha" />
        <feComponentTransfer result="shadowOut">
          <feFuncA type="linear" slope="0.25"/>
        </feComponentTransfer>
        
        <feComponentTransfer in="SourceAlpha" result="bgOut">
          <feFuncA type="linear" slope="0.15"/>
        </feComponentTransfer>
        
        <feBlend mode="multiply" in1="bgOut" in2="shadowOut" result="tetxOut"/>
        <feBlend mode="multiply" in1="SourceGraphic" in2="tetxOut"/>
      </filter>
    </defs>
    
    <image
      width="100%" height="100%"
      preserveAspectRatio="xMidYMid slice"
      xlink:href="http://alacoladder.com/wp-content/uploads/brushedsteel4.jpg"/>
    
    <text fill="#000" filter="url(#emboss)">
      <textPath id="embossText" href="#textArc" startOffset="50%" text-anchor="middle">
        Type some text
      </textPath>
    </text>
  </svg>
  

  <input id="textInput" type="text" value="Type some text">
</div>

CSS

.container {
  position: relative;
}

#textInput {
  position: absolute;
  top: 5px;
  left: 5px;
}

text {
  font-family: Arial, sans-serif;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}

JavaScript

textInput.addEventListener('input', (e) => embossText.textContent = e.target.value);