Glowing animation on SVG using CSS

user_7158959 0
Viewed 2634

I am trying to apply glowing shadow effect on SVG icon but it does not work.

I have similar thing applied on text and that works fine using text-shadow:

.glow {
  font-weight: 450;
  -webkit-animation: glow 1.5s ease-in-out infinite alternate;
  -moz-animation: glow 1.5s ease-in-out infinite alternate;
  animation: glow 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073,
      0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
  }

  to {
    text-shadow: 0 0 10px #fff,
      0 0 15px #ff9800 0 0 20px #ff9800 0 0 25px #ff9800 0 0 30px #ff9800 0 0
        40px #ff9800 0 0 45px #ff4da6;
  }
}
     <a href="#sec1" class="nav-link  glow">
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" style="max-width:50px" class="svg-inline--fa fa-home fa-w-18 svg-shadow" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>
      <span class="link-text">NASLOVNA</span>
     </a>

So I tried same thing with SVG using webkit-filter: drop-shadow witch if you un-comment the line successfully drops shadow on SVG but I can not make it work to animate. I cant seem to find anywhere example of animation of SVG using shadow, i find some using fill but that does not interest me.

Any guidance is appreciated. 

.svg-shadow {

/*-webkit-filter: drop-shadow( 3px 3px 2px #ff5722); */
    -webkit-animation: svg-shadow 1.5s ease-in-out infinite alternate;
  -moz-animation: svg-shadow 1.5s ease-in-out infinite alternate;
  animation: svg-shadow 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes svg-shadow {
  from {
     -webkit-filter: drop-shadow( 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073,
      0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073);
  }

  to {
    -webkit-filter: drop-shadow( 0 0 10px #fff,
      0 0 15px #ff9800 0 0 20px #ff9800 0 0 25px #ff9800 0 0 30px #ff9800 0 0
        40px #ff9800 0 0 45px #ff4da6);
  }
}
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18 svg-shadow" role="img" style="max-width:50px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>

animation svg css
1 Answers

Your syntax of multiple shadow is wrong, it need to be like below:

.svg-shadow {
  animation: svg-shadow 1.5s ease-in-out infinite alternate;
}

@keyframes svg-shadow {
  from {
    filter: drop-shadow( 0 0 5px #fff) drop-shadow( 0 0 15px #e60073) drop-shadow( 0 0 20px #e60073);
  }

  to {
    
    filter: drop-shadow( 0 0 20px #fff) drop-shadow( 0 0 25px #e60073) drop-shadow( 0 0 40px #e60073);
  }
}
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18 svg-shadow" role="img" style="max-width:50px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>

user_86203330
Related