Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
80s Fonts Text Effect 2: Neon Road Rage Text
<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>
: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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.