Improve neon sharped cut text effect

Question

I am trying to add sharped cut effect on text. I have achieved this thing:

But I want to achieve this backplate/background sharped cut text effect:

My Code:

.wrapper {
  background-color: #000;
}
.previewText {
    text-shadow: var(--text-color) 0px 0px 10px, var(--text-color) 0px 0px 25px, #000 1px 1px 1px;
    --text-color: #fff;
}
.previewText svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}


  
   
      work HARD
      dream big

Can someone help me to achieve that thing as shown in the image #2? I am stuck. I tried a lot but i just got a little bit of a stroke with svg, the stroke should be in the full background of texts as shown in the image #2.

user_271353 · Answer

You need to use lighting primitives to get those edge lighting effects. Lighting primitives are buggy and usually trigger some kind of weird cross-browser bug then when you try to run them on Safari. Even Chrome runs into issues with them because they're just not very well debugged.

That caveat provided - this is the basic structure of how you'd accomplish something like this. It's a painstaking process of trial and error to figure out the exact right combination of lighting effect attributes to get exactly what you want - so this is something in the right neighborhood but I would not claim this is professional quality yet.

I would probably recommend Photoshop rather than SVG filters for this kind of effect.

body {
  background-color: black;
}


.meow {
  font-family: 'Meow Script', cursive;
  font-size: 11pt;
  font-weight: light;
  fill: #faf;
  stroke: none;
}

.comfort {
  font-family: 'Comfortaa', sans-serif;
    font-size: 11pt;
  font-weight: light;
  fill: #FAF;
  stroke: none;
}

Improve neon sharped cut text effect

1 Answers