CSS Stroke Text Using SVG Filters

css-stroke-text-using-svg-filters.markdown

CSS Stroke Text Using SVG Filters

CSS Stroke Text Using text-shadow. The idea is to have multiple shadows combined all around the text to give the illusion of a real stroke text.

Sample code for CSS text stroke definitive guide on coding-dude.com

A Pen by Ion Emil Negoita on CodePen.

License.

index.html

<span class="stroke-text">I ❤️️ STROKE  TEXT</span>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
  <defs>
    <filter id="stroke-text-svg-filter">
      <feMorphology operator="dilate" radius="2"></feMorphology>
      <feComposite operator="xor" in="SourceGraphic"/>
    </filter>
  </defs>
</svg>

<footer>The Definitive Guide to <a href="http://www.coding-dude.com/wp/css/css-stroke-text/">Stroke Text CSS</a> made by <a href="http://www.coding-dude.com">Coding Dude</a></footer>

style.css

:root{
  font-size:55px;
  font-family:sans-serif;
  font-weight:bold;
  text-align:center;
  margin-top:30vh;
}

.stroke-text{
  color:dodgerblue;
  filter:url(#stroke-text-svg-filter);
}


footer{
  position:fixed;
  bottom:10px;
  right:50px;
  font-size:13px;
}