CODEWITHSUNDEEP
javascripthtmljsonanimationsvg
Katarina Perović
Katarina Perović

Reputation: 411

Change color in CSS of an SVG animated with JSON

I downloaded free animated hamburger menu icon from this website. As you can see in the code snippet below, the animation plays on click, and plays back on the second click. Everything works, but how to change its color in CSS?

// JSON
  var svgData = {"v":"5.5.2","fr":30,"ip":0,"op":60,"w":24,"h":24,"nm":"menu V2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"menu V2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[12,12,0],"ix":2},"a":{"a":0,"k":[12,12,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[6,-6],[-6,6]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.757,"y":0},"t":0,"s":[12,6],"to":[0,1],"ti":[0,-1]},{"t":10,"s":[12,12]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.202],"y":[1.082]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[45]},{"i":{"x":[0.67],"y":[3129600.967]},"o":{"x":[0.167],"y":[0]},"t":45,"s":[360]},{"t":59,"s":[360]}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"line/horizontal/top","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[6,-6],[-6,6]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[12,12],"to":[0,0],"ti":[0,0]},{"t":10,"s":[12,12]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.202],"y":[1.114]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[45]},{"i":{"x":[0.665],"y":[1933716.068]},"o":{"x":[0.167],"y":[0]},"t":45,"s":[270]},{"t":59,"s":[270]}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"line/horizontal/center","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[6,-6],[-6,6]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.757,"y":0},"t":0,"s":[12,18],"to":[0,-1],"ti":[0,1]},{"t":10,"s":[12,12]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":45,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":0,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":9,"s":[100]},{"t":10,"s":[0]}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"line/horizontal/bottom","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0}],"markers":[]}
  
  var hamburger = document.getElementById('hamburger');

// Animate SVG
  var animation = bodymovin.loadAnimation({
    container: hamburger,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    animationData: svgData
  });
  
// Animate on click
  var direction = 1;
    hamburger.addEventListener('click', (e) => {
    animation.setDirection(direction);
    animation.play();
    direction = -direction;
  });
#hamburger {
  width: 40px;
  cursor: pointer;
}

/* Updated code */
#hamburger path {
  stroke: #312f2f;
}

#hamburger:hover path {
  stroke: #ef626c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie.js"></script>

<div id="hamburger"></div>

Upvotes: 0

Views: 2955

Answers (2)

GotzJi
GotzJi

Reputation: 63

Sorry I don't know how to change color in CSS, but your can change color in svgData by replace all "k":[0,0,0,1] to color that your want in RGB color (0-255)

Upvotes: 2

Adi Darachi
Adi Darachi

Reputation: 2175

In order to change the color of an SVG element will need to apply the CSS to it's nested elements that actually hold the drawing (path,rect, etc..).

To do so, we can use the following CSS.

div#hamburger path {
    stroke: red;
}

This way we apply the CSS rule to any 'path' element nested inside of the 'div#hamburger'

Upvotes: 2

Related Questions