1

I am developing a Neon website. There is a option for texts and SVGs to do the cut sharped effect like these example images:
enter image description here
enter image description here

I am trying to do the same effect on my neon texts and svgs, but unable to make it perfect.
First Try:

filter: drop-shadow(rgb(179, 179, 179) 2px 0px 0px) drop-shadow(rgb(179, 179, 179) -2px 0px 0px) drop-shadow(rgb(179, 179, 179) 0px 2px 0px) drop-shadow(rgb(179, 179, 179) 0px -2px 0px);

This drop-shadow doesn't work fine, because it's displaying like 3/4 shadow layers:
enter image description here

2nd Try:

-webkit-text-stroke: 1px rgb(179, 179, 179);

stroke also doesn't work perfect, it's weird.
enter image description here

Can someone help me to achieve cut sharped effect on text and svgs like the example image I have shown above? I am stuck on it.

j08691
  • 204,283
  • 31
  • 260
  • 272
Zain Shabir
  • 126
  • 9

3 Answers3

2

You might use svg filters as described by
Sara Soueidan (SVG Filter Effects: Outline Text with )

Svg filters could be applied to svg and html elements.

body {
  background-color: #222;
}

h1,
h2{
  font-family: 'Kaushan Script', cursive;
  color: #fff;
  text-align:center;
  font-size: 12vw;
  margin:0
}

h1{
  font-size: 20vw;
}

.outline{
  filter: url(#outline);
}
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<h1 class="outline">Hello</h1>
<h2 class="outline">World</h2>


<svg viewBox="0 0 100 100">
  <filter id="outline">
    <feMorphology in="SourceAlpha" result="dilated" operator="dilate" radius="5" />
    <feFlood flood-color="magenta" flood-opacity="1" result="neon" />
    <feComposite in="neon" in2="dilated" operator="in" result="outline" />
    <feMerge>
      <feMergeNode in="outline" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</svg>

However: svg filters are infamous for introducing massive performance hits.
So you should not apply them to many elements.

herrstrietzel
  • 11,541
  • 2
  • 12
  • 34
1

For SVGs it's easy. Just draw the paths stroked, before you draw the fills.

You have to draw all the strokes before any of the fills though. Otherwise the stroke for one element will be on top of the previous element's fill.

<svg viewBox="0 0 203.2 152.4">
  <defs>
    <g id="hello">
      <path d="m 153.91272,38.02268 c -2.12093,1.573594 -4.03661,4.173443 -7.04696,3.626107 1.29993,-2.668267 2.66827,-5.062866 2.66827,-8.073218 0,-2.052513 -0.4105,-3.489272 -2.46302,-4.036609 0.75259,-0.410503 1.5736,-0.821005 1.5736,-1.847262 0,-1.847261 -2.25777,-2.531432 -3.76294,-2.463015 -4.17345,0.205251 -9.09948,2.052513 -12.794,5.062865 -3.83136,2.941935 -6.36279,6.36279 -6.22596,11.494073 0.27367,6.225956 3.55769,9.783645 7.11538,9.783645 4.31028,0 7.66272,-2.189347 10.53623,-5.131283 4.99445,0 8.00481,-1.64201 11.08357,-5.541785 z m -12.58874,-5.336533 c 0.27367,0.136834 -2.94194,4.447111 -2.94194,8.0048 0,1.163091 0.34209,2.052513 0.82101,3.147187 -1.5736,1.436759 -3.01036,2.736684 -5.26812,2.736684 -1.71043,0 -3.01035,-0.615754 -3.01035,-2.59985 0,-2.12093 1.29992,-4.789197 2.8051,-6.294373 2.05251,-1.984096 5.26812,-3.626106 7.5943,-4.994448 z"/>
      <path d="m 113.6151,31.728307 c 3.2156,-7.046961 7.11537,-13.2045 10.46781,-14.84651 -1.23151,3.899774 -5.47337,10.467816 -10.33098,14.983344 z m 13.34133,7.252213 c -2.73668,2.463015 -8.0048,6.84171 -11.76774,6.84171 -1.84726,0 -2.8051,-1.368342 -3.42086,-2.941936 -0.34208,-1.64201 -0.13683,-3.557689 0.47892,-4.72078 14.84652,-14.36759 16.62536,-20.388295 17.10428,-26.887919 0.0684,-0.889423 -0.20525,-2.5314327 -1.36834,-2.5314327 -2.18935,0 -8.68897,6.3627897 -14.70968,13.8202537 -4.44711,5.473368 -7.52588,13.2045 -7.52588,20.388295 0,4.036609 1.09467,8.894223 6.08912,8.894223 5.88387,0 12.31508,-6.910127 16.07802,-10.809901 z"/>
      <path d="m 93.090027,31.728307 c 3.2156,-7.046961 7.115373,-13.2045 10.467813,-14.84651 -1.23151,3.899774 -5.473373,10.467816 -10.330983,14.983344 z m 13.341333,7.252213 c -2.73668,2.463015 -8.004803,6.84171 -11.767743,6.84171 -1.84726,0 -2.8051,-1.368342 -3.42086,-2.941936 -0.34208,-1.64201 -0.13683,-3.557689 0.47892,-4.72078 14.846513,-14.36759 16.625363,-20.388295 17.104283,-26.887919 0.0684,-0.889423 -0.20525,-2.5314327 -1.36834,-2.5314327 -2.18935,0 -8.688973,6.3627897 -14.709683,13.8202537 -4.44711,5.473368 -7.52588,13.2045 -7.52588,20.388295 0,4.036609 1.09467,8.894223 6.08912,8.894223 5.88387,0 12.315083,-6.910127 16.078023,-10.809901 z"/>
      <path d="m 85.974747,38.364766 c -3.6261,2.873518 -9.373141,7.867966 -14.230755,7.867966 -2.189347,0 -4.447112,-0.889422 -4.24186,-3.489272 l 0.136834,-1.505176 c 13.136081,-4.310277 16.488521,-9.373143 16.488521,-12.72558 0,-2.736684 -2.73668,-3.284021 -4.92603,-3.284021 -8.894224,-0.06842 -18.814704,9.099474 -18.541035,18.062114 0.136834,4.515528 2.463015,8.96264 7.457464,8.96264 6.773292,0 14.299171,-6.431207 18.472621,-11.288821 z m -17.925278,-0.47892 c 1.847261,-4.515528 5.815453,-7.799549 9.236308,-8.688971 0.47892,-0.136835 0.82101,0.273668 0.82101,0.752588 0.0684,1.16309 -4.036614,5.88387 -10.057318,7.936383 z"/>
      <path d="m 39.861688,39.254188 c -2.531432,4.789197 -3.626106,7.936384 -3.968191,9.988897 -0.342086,2.052512 0.06842,3.010352 1.231507,3.420854 1.778845,0.615754 5.268117,-2.736683 7.457464,-2.257764 C 44.3088,49.10625 43.82988,47.532657 43.82988,46.301149 c 0,-2.052513 2.531433,-5.268116 3.557689,-7.046961 2.805101,-0.205251 4.926031,0 6.978544,0.47892 2.189348,-3.557689 4.994449,-6.636459 8.210052,-9.167892 -2.805101,-1.710427 -6.157539,-1.64201 -9.304725,-1.710427 l 7.389046,-9.099474 c 5.131283,-6.294373 5.610203,-7.594298 5.610203,-9.7836447 0,-0.752588 -0.273669,-1.573594 -1.163091,-1.573594 -1.436759,0 -4.310277,3.8313577 -5.131283,4.9260317 L 47.592821,28.854789 37.056587,30.086297 44.78772,21.876245 c 2.736683,-2.941935 6.841709,-7.046961 6.841709,-11.288821 0,-3.3524377 -1.710427,-6.7048757 -7.389046,-6.7048757 -5.883871,0 -14.504425,1.64201 -20.183044,3.489272 -3.899775,1.231508 -15.3254311,4.9944477 -17.7884461,7.7995487 -1.231508,1.642011 -2.326182,5.541785 -2.326182,7.525881 0,1.231508 0.47892,3.147187 2.052513,3.147187 0.95784,0 1.915679,-0.547337 2.736684,-0.95784 4.7207801,-2.394598 4.2418601,-2.463015 9.3731431,-4.24186 0.821005,-0.273668 1.710427,-0.684171 1.710427,-1.64201 0,-0.615754 -0.478919,-0.821005 -0.957839,-1.026257 11.220404,-4.652362 19.840959,-7.183795 23.467065,-7.183795 0.821005,0 2.394598,0.273668 2.394598,1.505176 0,1.368342 -1.984095,3.762941 -2.873518,4.72078 -6.020704,6.84171 -10.946736,12.178244 -13.546585,14.709676 -10.399399,1.984096 -10.467816,2.463016 -11.220405,2.463016 -0.547336,0 -1.094673,-0.47892 -1.573593,-0.47892 -1.847262,0 -3.831357,3.626106 -3.831357,5.1997 0,2.326181 2.189347,3.215603 6.978544,2.805101 -0.95784,1.847261 -5.815454,6.568041 -5.815454,8.48372 0,1.573593 1.847262,2.941935 3.352438,2.941935 1.642011,0 3.147187,-2.736684 3.968192,-3.899774 l 7.115378,-8.346887 z"/>
    </g>
  </defs>
  
  <use xlink:href="#hello" fill="none" stroke="red" stroke-width="8"/>
  <use xlink:href="#hello" fill="black"/>
</svg>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
0

You can add multiple shadows with text-shadow just by comma-separating them like so:

.neon {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff;
}

Just play with the shadow colors and spacing until they match your preferences. Or view this on Codepen.

Sebastian
  • 48
  • 7
  • No, I don't need a shadow/blur. Please see the example images I have attached in my question. You can simply say "2px/3px Border on texts and svgs" – Zain Shabir Apr 27 '22 at 11:14
  • Are you looking for something like this then? [Link](https://stackoverflow.com/a/8712442/1379475). This is a SCSS mixin to determine the strength and color. Since the attached example no longer works, I have updated my [codepen](https://codepen.io/caasion/pen/rNpXxoX). – Sebastian Apr 27 '22 at 12:28
  • 1
    Check this screenshot: https://snipboard.io/PYwWiz.jpg. The codepen example you sent me, if you zoom it, you'll see layers. And i don't want this kinda thing. I hope you understand. – Zain Shabir Apr 27 '22 at 12:40
  • Yeah I do now. I've read about unclear edges in the past, but back then text-shadow wasn't a living standard. – Sebastian Apr 27 '22 at 13:15
  • Good, please share your thought how can i achieve that – Zain Shabir Apr 27 '22 at 13:33