<svg width="900" height="250">
	<filter id="myFilter">
		<feMorphology operator="dilate" radius="8" 
		in="SourceGraphic" result="THICKNESS" />
		<feComposite operator="out" in="THICKNESS" in2="SourceGraphic" ></feComposite>
	</filter>
	
	<text dx="30" dy="150" filter="url(#myFilter)" letter-spacing="10px">SVG Rocks</text>
</svg>

<h2>SVG Rocks in HTML too!</h2>
@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One|Bangers');
svg {
	border: 2px solid #eee;
}

svg text, h2 {
	font-family: 'Bangers', cursive;
	font-size: 150px;
	letter-spacing: 13px;
	fill: #000;
}



h2 {
	-webkit-filter: url(#myFilter);
	filter: url(#myFilter);
	color: deepPink;
	font-size: 7em;
	margin: 2vw;
}

svg {
	background-color: gold;
	animation: colorsssss 2s linear infinite;
	animation-delay: 3s;
}

@keyframes colorsssss {
	50% {
		background-color: deepPink;
	}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.