[[[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
});
This Pen doesn't use any external CSS resources.