I am developing a Neon website. There is a option for texts and SVGs to do the cut sharped effect like these example images:
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:
2nd Try:
-webkit-text-stroke: 1px rgb(179, 179, 179);
stroke also doesn't work perfect, it's weird.
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.
CodePudding user response：
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.
CodePudding user response：
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>