Пульсирующее изменение цвета на изображении

Question

SVG

я наткнулся на этом удивительном дизайне сегодня: http://codepen.io/tmrDevelops/pen/jPLpLJ

мне очень нравится пульсирующее изменение цвета. На моем веб-сайте у меня есть логотип .svg, который я хотел бы изменить цвет, когда я навешиваю изображение. Мне бы хотелось, чтобы svg изменил цвет, а не фон или что-то еще. Мне действительно не нужна анимация с щелчком мыши.

Возможно ли это с помощью css? Я знаю, что у меня есть источник прямо в кодеде, но это немного выше моих навыков.

Примечание: оно не обязательно должно основываться на этом коде. Пока это выглядит примерно так, все в порядке.

HTML:

<canvas id="canv"></canvas> 
<h4>Click For 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() { 
    for (var i = 0; i < 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 is a shadow mimic - 
    a black underlay, which is not necessary but 
    the canvas shadow attr kills the springiness 
    in FF :/ so using this instead for a lil depth. 
    */ 
    $.beginPath(); 
    $.strokeStyle = 'hsla(0,0%,5%,.35)'; 
    $.lineWidth = 26; 
    $.moveTo(xp1, yp1); 

    for (var i = 0; i < 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 one is the actual color circle. 
    $.beginPath(); 
    $.strokeStyle = 'hsla(' + u + ',100%, 50%,1)'; 
    $.lineWidth = 20; 
    $.moveTo(xp1, yp1); 

    for (var i = 0; i < 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 = []; 

    for (var i = 0; i < 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(); 

Answer 1

Как это?

.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>

Это должно работать в Firefox и Chrome.