80s Fonts Text Effect 8: CSS Lazer84 Font Halftone Text Effect

80s-fonts-text-effect-8-css-lazer84-font-halftone-text-effect.markdown

80s Fonts Text Effect 8: CSS Lazer84 Font Halftone Text Effect

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"><div class="lines"></div><div class="lazer84">Lazer 84</div></div>


<svg>
  <defs>
    <circle id="circle" cx="50%" cy="50%" r="20%" fill="#ce00df"/>
    <filter id="fakeHalftone" width="150%" height="150%" >
      <feImage  x="0" y ="0" width="2%" height="4%" xlink:href="#circle" result="circle"></feImage>
      <feTile result="pattern"/>
      <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="1" seed="1" stitchTiles="stitch" result="noise"/>
      <feColorMatrix in="noise"
        type="saturate"
        values="0" result="desaturatedNoise"/>
      <feComponentTransfer in="desaturatedNoise" result="mask">
        <feFuncA type="discrete" tableValues="0 1"/>
      </feComponentTransfer>
      
      <feComposite in="pattern" in2="mask" operator="in" out="pattern1"></feComposite>
      
      <feComposite in2="SourceGraphic" in="pattern1" operator="in" ></feComposite>
      <feOffset dx="5" result="halftone1"></feOffset>
      
      <feOffset dx="-2" dy="3"  result="halftone2"></feOffset>
      <feFlood flood-color="#6b0547" result="color"/>
      <feComposite in="color" in2="halftone2" operator="in" result="halftone2"></feComposite>
      
      
      <feMerge result="halftone">
        <feMergeNode in="SourceGraphic"></feMergeNode>
        <feMergeNode in="halftone2"></feMergeNode>
        <feMergeNode in="halftone1"></feMergeNode>
        
      </feMerge>
      
      
      
      <!-- first bevel -->
      <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="BEVEL_10" />
      <feConvolveMatrix order="3,3" kernelMatrix=
   "1 0 0 
   0 1 0
   0 0 1" in="BEVEL_10" result="BEVEL_20" />
      <feOffset dx="0" dy="0" in="BEVEL_20" result="BEVEL_30"/>
      <feComposite operator="in" in="BEVEL_20" result="BEVEL_30"/>
      <feOffset dx="3" dy="3" in="BEVEL_20" result="BEVEL_30"/>
      <feOffset dx="5" dy="5" in="BEVEL_20" result="BEVEL_40"/>
      <feOffset dx="10" dy="10" in="BEVEL_20" result="BEVEL_50"/>
      <feFlood flood-color="#060469" result="color1"></feFlood>
      <feFlood flood-color="#36a39d" result="color2"></feFlood>
      <feFlood flood-color="#4200ff" result="color3"></feFlood>
      <feComposite in2="BEVEL_30" in="color1" operator="in" result="bevel1"></feComposite>
      <feComposite in2="BEVEL_40" in="color2" operator="in" result="bevel2"></feComposite>
      <feComposite in2="BEVEL_50" in="color3" operator="in" result="bevel3"></feComposite>
      <feGaussianBlur stdDeviation="13 0" result="blurryEdge" />
      <feMerge>
        <feMergeNode in="blurryEdge"></feMergeNode>
        <feMergeNode in="bevel3"></feMergeNode>
        <feMergeNode in="bevel2"></feMergeNode>
        <feMergeNode in="bevel1"></feMergeNode>
        
        <feMergeNode in="halftone"></feMergeNode>
      </feMerge>
      
    </filter>
    
    <filter id="sideBlur" width="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="20 0" result="blurryEdge" />
    </filter>
    
<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>      
  </defs>
</svg>

style.css

:root{
  background:black;
  filter:url(#noise) contrast(120%);
}

:root::before{
  content:' ';
  position:absolute;
  width:100vw;
  height:100vh;
  top:0;
  left:0;
  opacity:0.3;
  background-position-y: 0px;
  background-image:
        repeating-linear-gradient(90deg,#504a64 0%,transparent 1px, transparent 50px,#504a64 50px),repeating-linear-gradient(180deg,#504a64 0%,transparent 1px, transparent 50px,#504a64 50px );
}

.centered{
  position:absolute;
  left:50vw;
  top:50vh;
  transform:translateX(-50%) translateY(-50%) rotate(-5deg);
  text-align:center;
}

.lazer84{
  font-family:'Lazer84';
  font-size:40vh;
  letter-spacing:0.2em;
  max-width:3em;
  color:#b70077;
  filter:url(#fakeHalftone);
  line-height:0.9em;
}
.lazer84:first-letter {
  font-size:1.5em;
}
.lines{
/*   background-color:red; */
  position:absolute;
  width:90%;
  height:50%;
  left:10%;
  top:30%;
  padding:0 2em;
  background-image:
        repeating-linear-gradient(180deg,#2a65fd 0%,transparent 10%, transparent 12%,#12018e 12%);
  
  filter:url(#sideBlur);
}

styles

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