80s Fonts Text Effect 3: Indelible Text

80s-fonts-text-effect-3-indelible-text.markdown

80s Fonts Text Effect 3: Indelible 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="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>

style.css

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

styles

<link href="http://www.coding-dude.com/fonts/indelible-stylesheet.css" rel="stylesheet" />