<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>
: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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.