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.
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.
<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; | |
} |