0

Please can anyone tell me how to add glow to each of the svg path? My aim is to convert this svg image into a neon sign. Thanks a million.

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"  width="60%" height="534.000000px" viewBox="0 0 572.000000 534.000000"  preserveAspectRatio="xMidYMid meet">

  <g transform="translate(0.000000,534.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
   <path class="big-blue" fill="#21265A" d="M4935 5329 c-243 -36 -492 -190 -675 -420 -93 -116 -146 -205 -211 -349 -64 -144 -218 -600 -267 -795 -69 -271 -130 -614 -152 -860 -13 -139 -13 -352 -1 -339 5 5 30 92 56 194 182 723 341 1159 552 1518 133 226 278 396 399 467 180 105 401 92 537 -34 146 -135 141 -421 -14 -746 -193 -407 -691 -941 -1265 -1357 -224 -163 -230 -173 -66 -112 374 140 854 483 1262 900 232 238 378 425 478 614 313 591 118 1221 -408 1316 -84 15 -137 16 -225 3z"/>
   <path class="big-red" fill="#DE171C" d="M2580 4470 c-85 -18 -188 -78 -264 -154 -120 -119 -166 -234 -167 -411 0 -258 133 -531 399 -821 171 -187 358 -332 552 -429 148 -74 290 -116 290 -86 0 5 -46 40 -102 77 -246 164 -510 408 -622 577 -69 104 -126 225 -162 342 -23 75 -27 110 -28 210 -1 112 1 124 27 177 55 112 156 166 288 155 174 -15 314 -152 436 -429 94 -212 143 -395 208 -768 20 -112 39 -208 44 -213 21 -21 28 298 11 493 -35 398 -114 708 -232 908 -45 78 -217 248 -298 295 -118 68 -272 99 -380 77z"/>
   <path class="small-blue" fill="#383D60" d="M4119 3470 c-50 -26 -101 -88 -143 -174 -47 -94 -68 -156 -122 -361 -26 -93 -48 -178 -51 -187 -9 -32 14 -20 134 70 332 248 422 354 423 500 0 75 -26 134 -70 157 -41 21 -127 18 -171 -5z"/>
   <path class="small-red" fill="#E5322D" d="M2986 3225 c-21 -23 -26 -38 -26 -80 0 -69 20 -124 75 -200 51 -72 124 -138 210 -190 75 -45 89 -45 80 -2 -53 253 -105 404 -160 457 -30 29 -43 34 -94 38 -55 4 -62 2 -85 -23z"/>
   <path class="big-green" fill="#006929" d="M4495 2669 c-153 -20 -442 -113 -498 -160 -29 -24 -24 -24 169 6 295 48 537 44 752 -11 293 -74 444 -255 365 -435 -64 -145 -214 -205 -414 -165 -154 31 -313 104 -580 266 -72 44 -136 80 -141 80 -17 0 10 -35 79 -101 198 -189 503 -370 717 -424 185 -47 373 -28 494 49 211 135 250 401 87 597 -109 129 -304 234 -530 285 -85 18 -399 27 -500 13z"/>
   <path class="small-green" fill="#019541" d="M4045 2443 c-44 -8 -84 -18 -88 -22 -18 -17 248 -165 352 -195 67 -20 111 -20 156 -2 103 44 48 173 -93 216 -77 24 -206 25 -327 3z"/>
   <path class="arrow" fill="#151515" d="M2230 2790 c0 -18 124 -142 205 -205 172 -135 458 -302 501 -293 10 2 -16 24 -70 58 -258 164 -387 254 -436 304 -30 31 -52 56 -48 56 29 0 305 -118 483 -207 382 -190 666 -390 918 -645 l137 -139 68 3 67 3 -140 140 c-147 148 -239 225 -420 354 -365 258 -798 471 -1134 556 -109 27 -131 30 -131 15z"/>
   <path class="v" fill="#081D0C" d="M520 2051 c0 -28 1 -28 75 -34 132 -10 184 -58 239 -218 16 -46 78 -223 138 -394 61 -170 147 -420 193 -555 111 -326 109 -320 144 -320 24 0 31 6 41 33 17 46 195 556 302 861 163 468 213 546 377 587 59 15 66 19 69 43 l3 26 -340 0 -341 0 0 -29 c0 -28 1 -28 68 -35 97 -10 165 -45 191 -100 23 -46 26 -105 10 -176 -12 -54 -276 -835 -293 -869 -12 -22 -14 -20 -30 40 -10 35 -90 270 -177 523 -87 252 -159 470 -159 485 0 62 43 83 193 96 77 7 77 7 77 36 l0 29 -390 0 -390 0 0 -29z"/>
   <path class="i-dot" fill="#081D0C" d="M3132 2053 c-17 -6 -42 -57 -42 -83 0 -33 53 -80 89 -80 41 0 80 36 88 82 8 50 -29 88 -84 87 -21 0 -44 -3 -51 -6z"/>
   <path  class="t" fill="#081D0C" d="M2667 1894 c-11 -110 -72 -196 -159 -224 -30 -9 -38 -17 -38 -36 0 -23 3 -24 64 -24 l64 0 4 -252 c3 -233 5 -257 25 -300 26 -56 55 -77 119 -84 72 -9 126 9 167 55 41 46 57 93 57 174 0 49 -3 57 -19 57 -16 0 -20 -11 -26 -67 -8 -79 -16 -100 -44 -130 -26 -27 -61 -38 -97 -29 -48 12 -54 50 -54 326 l0 250 100 0 100 0 0 30 0 30 -100 0 -100 0 0 140 0 140 -29 0 c-27 0 -28 -2 -34 -56z"/>
   <path class="la" fill="#081D0C" d="M305 1883 c-4 -10 -40 -110 -80 -223 -40 -113 -81 -227 -92 -254 -11 -32 -37 -68 -71 -102 -43 -42 -53 -57 -50 -80 l3 -27 31 26 32 27 -24 -75 c-28 -87 -30 -113 -10 -121 23 -9 95 29 166 86 l65 52 5 -40 c16 -110 103 -135 188 -53 l40 39 -10 -34 c-22 -83 24 -73 175 36 65 47 97 85 97 116 0 14 -32 -5 -106 -62 -47 -36 -88 -63 -91 -60 -3 3 18 54 46 115 55 118 60 141 34 141 -27 0 -34 -8 -110 -116 -106 -150 -174 -198 -203 -145 -28 53 -4 135 59 204 70 75 187 110 284 82 24 -7 27 -5 27 19 0 31 -27 41 -116 41 -110 0 -195 -56 -317 -209 -35 -43 -161 -139 -165 -126 -5 15 83 266 154 443 95 232 112 317 64 317 -10 0 -21 -8 -25 -17z"/>
   <path class="o" fill="#081D0C" d="M2022 1681 c-70 -24 -143 -96 -185 -181 -30 -60 -32 -72 -32 -165 0 -91 3 -106 31 -166 63 -133 154 -199 273 -199 83 0 136 24 195 85 87 89 128 219 107 337 -38 216 -218 350 -389 289z m170 -58 c52 -49 71 -114 76 -258 7 -229 -47 -357 -151 -357 -113 0 -170 110 -170 327 -1 130 20 215 65 269 49 60 127 68 180 19z"/>
   <path class="e" fill="#081D0C" d="M4344 1689 c-51 -15 -126 -70 -166 -124 -131 -172 -88 -452 86 -560 41 -25 62 -30 124 -34 90 -4 140 9 188 51 67 59 112 188 65 188 -13 0 -22 -12 -31 -47 -48 -168 -254 -201 -330 -53 -20 40 -40 134 -40 192 l0 38 216 0 217 0 -6 53 c-9 90 -44 165 -106 228 -72 73 -133 93 -217 68z m128 -69 c31 -34 48 -86 48 -150 0 -56 -8 -68 -51 -80 -45 -13 -216 -13 -224 0 -9 15 13 147 30 181 46 87 140 111 197 49z"/>
   <path class="i" fill="#081D0C" d="M3010 1651 c0 -20 19 -31 55 -31 12 0 33 -9 46 -19 l24 -19 -3 -259 c-2 -158 -8 -263 -14 -270 -6 -7 -33 -13 -60 -13 -46 0 -49 -2 -46 -22 3 -23 6 -23 153 -26 176 -3 218 2 213 26 -2 12 -15 18 -48 20 -27 2 -50 9 -57 19 -10 13 -13 92 -13 315 l0 298 -125 0 c-116 0 -125 -1 -125 -19z"/>
   <path class="v" fill="#081D0C" d="M3344 1655 c-9 -23 5 -35 41 -35 76 0 106 -51 219 -370 91 -258 106 -291 129 -288 18 3 36 42 118 259 53 140 109 279 124 308 31 56 70 91 104 91 16 0 21 6 21 25 l0 26 -142 -3 c-133 -3 -143 -4 -143 -22 0 -13 11 -23 34 -31 64 -21 74 -61 43 -162 -34 -109 -115 -304 -122 -296 -12 12 -150 404 -150 424 0 24 29 39 74 39 32 0 36 3 36 25 l0 25 -190 0 c-157 0 -192 -3 -196 -15z"/>
   <path class="solutions" fill="#373435" d="M1882 830 c-38 -23 -52 -54 -52 -114 0 -60 26 -89 110 -121 69 -26 90 -45 90 -83 0 -28 -42 -62 -77 -62 -38 0 -83 40 -83 75 0 20 -5 25 -25 25 -21 0 -25 -5 -25 -31 0 -75 54 -129 130 -129 82 0 130 51 130 137 0 63 -27 94 -110 128 -83 34 -99 51 -85 91 22 60 110 50 129 -14 6 -22 14 -31 23 -27 8 3 19 5 24 5 14 0 11 38 -7 75 -28 61 -111 82 -172 45z"/>
   <path class="solutions" fill="#373435" d="M2210 831 c-23 -12 -45 -36 -63 -72 -27 -50 -28 -61 -25 -149 2 -72 8 -105 24 -135 59 -113 199 -113 258 0 17 33 21 58 21 145 0 92 -3 110 -24 146 -26 46 -84 84 -128 84 -15 0 -44 -8 -63 -19z m120 -69 c90 -91 51 -312 -56 -312 -106 0 -147 236 -53 314 40 34 74 33 109 -2z"/>
   <path class="solutions" fill="#373435" d="M3545 836 c-42 -18 -82 -68 -96 -119 -17 -64 -7 -193 20 -245 55 -107 193 -110 253 -5 41 70 42 214 2 298 -32 68 -115 101 -179 71z m102 -70 c54 -45 70 -172 34 -253 -48 -105 -157 -77 -183 48 -32 153 60 280 149 205z"/>
   <path class="solutions" fill="#373435" d="M4184 836 c-33 -15 -64 -67 -64 -109 0 -68 38 -110 125 -137 55 -17 75 -37 75 -76 0 -87 -136 -82 -155 6 -5 24 -12 30 -32 30 -24 0 -25 -2 -20 -42 10 -77 58 -118 139 -118 61 0 105 36 118 96 19 86 -18 142 -117 175 -76 25 -96 52 -69 93 9 14 28 29 42 32 34 9 78 -24 82 -60 3 -20 8 -26 19 -22 8 3 21 6 29 6 11 0 13 7 8 28 -13 51 -35 84 -69 98 -42 17 -71 17 -111 0z"/>
   <path class="solutions" fill="#373435" d="M2480 620 l0 -220 105 0 105 0 0 30 0 30 -80 0 -80 0 0 190 0 190 -25 0 -25 0 0 -220z"/>
   <path class="solutions" fill="#373435" d="M2730 670 c0 -192 11 -240 61 -265 46 -24 112 -19 148 11 43 36 51 77 51 262 l0 162 -25 0 -25 0 -1 -152 c0 -91 -5 -167 -12 -188 -14 -39 -48 -57 -91 -46 -46 11 -56 54 -56 231 l0 155 -25 0 -25 0 0 -170z"/>
   <path class="solutions" fill="#373435" d="M3030 810 c0 -29 1 -30 50 -30 l50 0 0 -190 0 -190 30 0 30 0 0 190 0 190 50 0 c49 0 50 1 50 30 l0 30 -130 0 -130 0 0 -30z"/>
   <path class="solutions" fill="#373435" d="M3330 620 l0 -220 30 0 30 0 0 220 0 220 -30 0 -30 0 0 -220z"/>
   <path class="solutions" fill="#373435" d="M3800 620 l0 -220 25 0 25 0 1 158 1 157 76 -157 c71 -148 78 -158 104 -158 l28 0 0 220 0 220 -25 0 -25 0 -1 -157 -1 -158 -76 157 c-71 145 -79 157 -104 158 l-28 0 0 -220z"/>
  </g>
 </svg>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
Itzasunnyday
  • 1
  • i already tried the previous solutions, its not working – Itzasunnyday May 28 '17 at 01:57
  • Works for me: https://jsfiddle.net/w0t1gasr/ You just have to make the blur larger to compensate for bigger coordinates in your SVG. – Paul LeBeau May 29 '17 at 01:07
  • Thanks a lot work just fine too. However, I am trying to achieve something like the work of Robert Lemon https://codepen.io/rlemon/pen/kIiDE. I am new to webiste development so having issues with linking the css to the various svg paths as i want each path to animate with its original color. Any suggestion and help will be greatly appreciated. – Itzasunnyday May 30 '17 at 03:30
  • That demo uses CSS effects (ie. `text-shadow`) that won't work with SVG elements. You'll need to use SVG filters as per my fiddle and the linked question. Since you'll need to animate the SVG filter, you'll either need to use SVG (a.k.a. SMIL) animations. Or a JS animation library if you prefer. Both options have numerous tutorials on the net. Have a go and ask another question if you get stuck. Good luck. – Paul LeBeau May 30 '17 at 03:51
  • i have searched animations but non seems to be on animating the glow and filters. just stuffs on the svg itself. – Itzasunnyday May 31 '17 at 00:02

0 Answers0