[[[https://codepen.io/tylersticka/pen/850480f3e2c4bb63f719dbc3c491554c]]]
/* Visual styles */

#shadow {
  opacity: 0.5;
  fill: #99621A;
}

#face-fill {
  fill: #F9EAE1;
}

#face-shading {
  fill: #E2CEC5;
}

#face-highlights {
  fill: #FFFFFF;
}

#face-lines {
  fill: #604747;
}

#sunflower-back {
  fill: #BA7E27;
}

#sunflower-front {
  fill: #FCD521;
  stroke: #BA7E27;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

/* Demo scaffolding stuff */

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  width: 90%;
  max-height: 90vh;
}
var sunflowerBack = document.getElementById('sunflower-back');
var sunflowerFront = document.getElementById('sunflower-front');

TweenMax.to(sunflowerBack, 1, {
  rotation: 6,
  transformOrigin: '50% 50%',
  repeat: -1,
  yoyo: true,
  ease: Quad.easeInOut
});

TweenMax.to(sunflowerFront, 1, {
  rotation: 9,
  transformOrigin: '50% 50%',
  repeat: -1,
  yoyo: true,
  ease: Quad.easeInOut
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js