SVG random color fill
HTML
<div>
<svg width="60" height="51" viewBox="0 0 197 170" xmlns="http://www.w3.org/2000/svg"><title>tr13ze</title><path d="M151.034043 37.8407213c0-11.1302951-8.581561-17.3686229-18.336171-17.3686229-13.320567 0-20.209929 10.9049508-20.025532 23.7410164H87.3489362C88.2042553 19.9672131 102.920567 1.7984754 126.123404 0H75.8184397v132.657885l21.8808511 37.186082 20.8510642-35.373344c-21.4836883-4.881984-34.8553195-20.372262-34.3900713-46.0443935H109.48227c.539007 12.8360655 7.110638 24.4983445 21.161702 25.4339505l18.797163-33.7873767c-5.914894-6.873-18.303546-6.9657049-26.814185-6.9657049V54.2466393c12.765958.9413115 28.407093-1.3235409 28.407093-16.405918zm25.678014-3.4101147L196.470922 0h-57.229787c18.466666 1.7984754 36.478014 14.323623 37.470922 34.4306066zM50.2865248 84.3315246V47.0655738H27.4808511l22.8056737 37.2659508zM15.412766 26.8573279C34.3617021 27.0926557 51.6468085 18.8804262 54.7390071 0H0l15.412766 26.8573279z" fill-rule="evenodd"/></svg>
</div>
CSS
svg {
fill: #000000;
transition: fill 1.5s ease;
-webkit-transition: fill 1.5s ease;
}
div {
position:absolute;
width:60px;
height:51px;
top:50%;
left:50%;
}
JAVASCRIPT
var select = function(s) {
return document.querySelector(s);
};
var svgItem = select('svg');
var chars = '0123456789ABCDEF'.split('');
var randomColor = function () {
var color = '#';
for (var i = 0; i < 6; i++)
color += chars[Math.floor(Math.random() * 16)];
return color;
};
setInterval(function () {
svgItem.style.fill = randomColor();
}, 1500);
1 Response
http://codepen.io/danielillo/pen/BpwJjZ