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="indelible" data-text="indelible">indelible</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="fake-anaglyph" height="300%" width="300%" x="-75%" y="-75%"> | |
<!-- Thicken out the original shape --> | |
<feMorphology operator="dilate" radius="1" in="SourceGraphic" result="thicken" /> | |
<feOffset dx="-3" result="thicken1" /> | |
<!-- Change the colour --> | |
<feFlood flood-color="#5dd4c6" result="glowColor" /> | |
<!-- Color in the glows --> | |
<feComposite in="glowColor" in2="thicken1" operator="in" result="softGlow_colored" /> | |
<!-- Layer the effects together --> | |
<feMerge> | |
<feMergeNode in="softGlow_colored"/> | |
<feMergeNode in="SourceGraphic"/> | |
</feMerge> | |
</filter> | |
<filter id="inner-glow"> | |
<feFlood flood-color="rgba(255,255,255,1)"/> | |
<feComposite in2="SourceAlpha" operator="out"/> | |
<feGaussianBlur stdDeviation="2" result="blur"/> | |
<feOffset dx="-2" result="glow"/> | |
<feComposite operator="in" in="glow" in2="SourceAlpha" result="composite"/> | |
</filter> | |
</defs> | |
</svg> |
:root{ | |
background:radial-gradient(#332d2d 0%,#0c0c0c 40%) -10vw 20vh no-repeat #0c0c0c; | |
filter:url('#noise') contrast(110%); | |
margin:0; | |
padding:0; | |
width:100vw; | |
height:100vh; | |
position:absolute; | |
} | |
.centered{ | |
position:absolute; | |
left:50vw; | |
top:50vh; | |
transform:translateX(-50%) translateY(-50%); | |
} | |
.indelible{ | |
font-family:'Indelible',sans-serif; | |
font-size:10rem; | |
background-repeat:repeat; | |
padding-right:7rem; | |
padding-left:3rem; | |
background:#ad69ee; | |
-webkit-background-clip:text; | |
-webkit-text-fill-color: transparent; | |
positions:relative; | |
filter:url(#fake-anaglyph); | |
} | |
.indelible1:after{ | |
content:attr(data-text); | |
background:#ad69ee; | |
-webkit-background-clip:text; | |
-webkit-text-fill-color: transparent; | |
filter:url(#inner-glow); | |
position:absolute; | |
left:0; | |
top:0; | |
padding-right:7rem; | |
padding-left:3rem; | |
} |
<link href="http://www.coding-dude.com/fonts/indelible-stylesheet.css" rel="stylesheet" /> |