html - Pulsating color change on svg image -

i came across awesome design today: http://codepen.io/tmrdevelops/pen/jplplj

i pulsating color change. on website have .svg logo change color when hover on image. actual svg change color, not background or anything. don't need on-click animation.

is possible css? know have source right there in codepen little above skills.

note: doesn't have based on code. long looks sort of same it's ok.

html:

<canvas id="canv"></canvas> <h4>click random squiggle</h4> 

css:

@import url(http://fonts.googleapis.com/css?family=poiret+one); body {   width: 100%;   margin: 0;   overflow: hidden;   cursor: pointer;   background: hsla(0, 0%, 10%, 1);   font-family: 'poiret one', serif; }  h4 {   width: 100%;   position: absolute;   text-align: center;   bottom: 0;   left: 0;   color: hsla(255, 255%, 255%, .5);   font-size: 2em;   letter-spacing: 15px;   user-select: none; } 

javascript:

window.requestanimframe = (function() {   return window.requestanimationframe ||     window.webkitrequestanimationframe ||     window.mozrequestanimationframe ||     window.orequestanimationframe ||     window.msrequestanimationframe ||     function(callback) {       window.settimeout(callback, 1000 / 60);     }; })();  var max = 50; var rad = 200;  var c, $, inc, p;  var c = document.getelementbyid('canv'); var $ = c.getcontext('2d'); var w = c.width = window.innerwidth; var h = c.height = window.innerheight; var u = 0;  var go = function() {   upd();   draw(); }  var upd = function() {   (var = 0; < max; i++) {     if (i % 2 == 0) {       p[i].upd(inc);      } else {       p[i].upd(0);     }   } }  var draw = function() {   u -= .5;   $.clearrect(0, 0, c.width, c.height);   $.fillstyle = 'hsla(0,0%,10%,1)';   $.fillrect(0, 0, w, h);    var xp1 = (p[0].x + p[max - 1].x) / 2;   var yp1 = (p[0].y + p[max - 1].y) / 2;  /*   first beginpath() set shadow mimic -    black underlay, not necessary    canvas shadow attr kills springiness    in ff :/ using instead lil depth.    */   $.beginpath();   $.strokestyle = 'hsla(0,0%,5%,.35)';   $.linewidth = 26;   $.moveto(xp1, yp1);    (var = 0; < max - 1; i++) {     var xp = (p[i].x + p[i + 1].x) / 2;     var yp = (p[i].y + p[i + 1].y) / 2;      $.quadraticcurveto(p[i].x - 2, p[i].y + 2, xp, yp);   }    $.quadraticcurveto(p[i].x, p[i].y, xp1, yp1);   $.closepath();   $.stroke();    //this 1 actual color circle.    $.beginpath();   $.strokestyle = 'hsla(' + u + ',100%, 50%,1)';   $.linewidth = 20;   $.moveto(xp1, yp1);    (var = 0; < max - 1; i++) {     var xp = (p[i].x + p[i + 1].x) / 2;     var yp = (p[i].y + p[i + 1].y) / 2;      $.quadraticcurveto(p[i].x, p[i].y, xp, yp);   }    $.quadraticcurveto(p[i].x, p[i].y, xp1, yp1);   $.closepath();   $.stroke();   }  var set = function() {    var rot = 360 / max;   p = [];    (var = 0; < max; i++) {      var pt = new pt(w / 2, h / 2);     pt.radii = rot * i;     pt.rad = rad;     pt.ready();     p.push(pt);   } }  window.addeventlistener('mousedown', function() {   var rnd = (math.random() * 410) + 10;   inc = (inc == 0) ? rnd : 0; }, false);  var ready = function(e) {   inc = 0;   set();   run(); }  var run = function() {   window.requestanimframe(run);   go(); } var pt = function(midx, midy) {   this.acc = 5;   this.chng = 1.35;   this.midx = midx;   this.midy = midy;   this.vert = 0;   this.x, this.y, this.rad, this.radii, this.dia;    this.ready = function() {     this.dia = this.rad;     this.xy();   }    this.upd = function(inc) {     var r = this.dia + inc;     this.rad = this.getrad(r, this.rad);     this.xy();   }    this.xy = function() {     var cos = math.cos(this.radii * (math.pi / 180)) * this.rad;     var sin = math.sin(this.radii * (math.pi / 180)) * this.rad;      this.x = cos + this.midx;     this.y = sin + this.midy;    }   this.getrad = function(mv, cur) {     this.vert = (this.vert + ((mv - cur) / this.acc)) / this.chng;     return this.vert + cur;   } } window.addeventlistener('resize', function() {   c.width = w = window.innerwidth;   c.height = h = window.innerheight;   set(); }, false);  ready(); 

like this?

.hue {    fill: red;  }    .hue:hover {    animation: pulse 10s infinite;    -webkit-animation: pulse 10s infinite;  }    @keyframes pulse {    0%   { fill: #ff0000 }    17%  { fill: #ffff00 }    33%  { fill: #00ff00 }    50%  { fill: #00ffff }    67%  { fill: #0000ff }    83%  { fill: #ff00ff }    100% { fill: #ff0000 }  }    @-webkit-keyframes pulse {    0%   { fill: #ff0000 }    17%  { fill: #ffff00 }    33%  { fill: #00ff00 }    50%  { fill: #00ffff }    67%  { fill: #0000ff }    83%  { fill: #ff00ff }    100% { fill: #ff0000 }  }

<svg>    <circle cx="150" cy="75" r="70" class="hue"/>  </svg>

this should work in firefox , chrome.