80s Fonts Text Effect 2: Neon Road Rage Text

80s-fonts-text-effect-2-neon-road-rage-text.markdown

80s Fonts Text Effect 2: Neon Road Rage Text

Inspired by PSDDude's 80s font collection this text effect is part of the SVG filters 80s font text effects list on http://www.coding-dude.com/wp/css/svg-filters/

A Pen by Ion Emil Negoita on CodePen.

License.

index.html

<div class="centered"><span class="road-rage shine" data-text="road">road</span><br/><span class="road-rage offset shine" data-text="rage">rage</span></div>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    
    <filter id="noise" x="0vw" y="0vh" width="100vw" height="100vh">
      <feFlood flood-color="#808080" result="neutral-gray" />      
      <feTurbulence in="neutral-gray" type="fractalNoise" baseFrequency="0.8" numOctaves="10" stitchTiles="stitch" result="noise"/>
      <feColorMatrix in="noise" type="saturate" values="0" result="destaturatedNoise"></feColorMatrix>
      <feComponentTransfer in="desaturatedNoise" result="theNoise">
        <feFuncA type="table" tableValues="0 0 0.2 0"></feFuncA>
      </feComponentTransfer>
      <feBlend in="SourceGraphic" in2="theNoise" mode="soft-light" result="noisy-image"/>      
    </filter>
 
    
    <filter id="softGlow" height="300%" width="300%" x="-75%" y="-75%">
		<!-- Thicken out the original shape -->
		<feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />

		<!-- Use a gaussian blur to create the soft blurriness of the glow -->
		<feGaussianBlur in="thicken" stdDeviation="10" result="blurred" />

		<!-- Change the colour -->
		<feFlood flood-color="rgba(254,65,123,0.8)" result="glowColor" />

		<!-- Color in the glows -->
		<feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" />

		<!--	Layer the effects together -->
		<feMerge>
			<feMergeNode in="softGlow_colored"/>
			<feMergeNode in="SourceGraphic"/>
		</feMerge>

	</filter>
  </defs>
</svg>

style.css

:root{
  background:radial-gradient(#1f0e30 0%,#030016 40%) -10vw 20vh no-repeat #030016;
  
  filter:url('#noise') contrast(110%);
  margin:0;
  padding:0;
  width:100vw;
  height:100vh;
  position:absolute;
}

@font-face {
font-family: 'RoadRage';
font-style: normal;
font-weight: normal;
src: local('RoadRage'), url('http://coding-dude.com/wp/wp-content/uploads/Road_Rage.woff') format('woff') ;
}

.centered{
  position:absolute;
  left:50vw;
  top:50vh;
  transform:translateX(-50%) translateY(-50%);
}
.road-rage{
  font-family:'Road Rage';
  font-size:10rem;
  font-style: italic;
  line-height:75%;
  display:inline-block;
  transform:rotate(-5deg);
  color:#fe417b;
  background:#fe417b;
  width:120%;
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  filter:url(#softGlow);
  z-index:-1;
}

.road-rage.offset{
  margin-left:3rem;
}

.shine:after{
/*   text-shadow:0 0 10px #fe417b, 0 0 100px #fe417b; */
  content:attr(data-text);
  background-image:linear-gradient(0deg,transparent 0%,rgba(255,255,255,0.5) 35%,transparent 60%);
  mix-blend-mode:soft-light;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  -webkit-background-clip:text;
  background-size: 100% 100%;
  background-position: 100% 50%;
  z-index:999;
}