Double Outline Font & Multiple Outline FontWith SVG Stroke

double-outline-font-multiple-outline-fontwith-svg-stroke.markdown

Double Outline Font & Multiple Outline FontWith SVG Stroke

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 stroke text definitive guide on coding-dude.com

A Pen by Ion Emil Negoita on CodePen.

License.

index.html

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="200">
  <text class="stroke-text thick color1" x="50%" y="50%">DOUBLE OUTLINE FONT</text>
  <text class="stroke-text" x="50%" y="50%">DOUBLE OUTLINE FONT</text>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="200">
  <text class="stroke-text thicker color1" x="50%" y="50%">MULTIPLE OUTLINE FONT</text>
  <text class="stroke-text thick color2" x="50%" y="50%">MULTIPLE OUTLINE FONT</text>
  <text class="stroke-text color3" x="50%" y="50%">MULTIPLE OUTLINE FONT</text>
</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:75px;
  font-family:sans-serif;
  font-weight:bold;
  text-align:center;
  margin-top:30vh;
}

.stroke-text{
  font-size:80px;
  text-align:center;
  text-anchor:middle;
  stroke:dodgerblue;
  stroke-width:4px;
  fill:none;
}

.thick{
  stroke-width:8px;
}

.thicker{
  stroke-width:12px;
}

.color1{
  stroke:magenta;
}

.color2{
  stroke:yellow;
}

.color3{
  stroke:red;
}


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