SVG animation hover

Just a little illustration with animation for a project. Designed first in Illustrator and then I cleaned the code a bit and wrote the animations. Pretty cute, isn't it? :)

by Joakim Borg

HTML

<div class="container">
  <div class="image">
  
    <!-- SUN -->
    <svg class="suun" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 500 250" >
        <style>
       .inner-sun{
          fill:url(#SUN);
        }
        .shine{
          fill:url(#SHINE);
        }
        </style>
    
    
      <g id="sun" transform="translate(250 0)">
        <radialGradient id="SHINE" cx="100" cy="100" r="100" gradientUnits="userSpaceOnUse">
          <stop  offset="0.7568" style="stop-color:#FFFFFF"/>
          <stop  offset="1" style="stop-color:#FFF3AB"/>
        </radialGradient>
        <linearGradient id="SUN" gradientUnits="userSpaceOnUse" x1="27.6083" y1="98.0519" x2="169.5758" y2="98.0519">
          <stop  offset="0" style="stop-color:#FFF3AB"/>
          <stop  offset="1" style="stop-color:#FFF2C0"/>
        </linearGradient>

        <g class="inner-sun">
          <path class="shine" d="M162.4,147.8l22,0.9l-9.8-15.5c-0.2-0.5-0.5-1-0.8-1.5v0c-3.1-4.9-1.6-11.1,3-14.2l20.3-8.1l-14.9-9.9
            c-0.5-0.5-1-0.9-1.5-1.3h0c-4.9-3.3-6-9.8-2.8-14.5l15-15.3l-17.3-2.9c-0.7-0.3-1.4-0.5-2.2-0.6h0c-6-1-9.7-6.9-8.4-12.6l7.3-19.6
            l-16.9,4.3c-0.7,0-1.5,0.1-2.2,0.3h0c-6.3,1.6-12.5-2.9-12.9-9.4v0c0-0.2,0-0.3,0-0.4l-1.2-19.1l-13.8,10.9
            c-0.6,0.3-1.1,0.7-1.7,1.1c-5.1,4-12.6,2.4-15.6-3.3l0,0c-0.2-0.5-0.5-0.9-0.8-1.3L98.6,0l-8.4,16c-0.3,0.4-0.6,0.9-0.8,1.3v0
            c-3,5.8-10.5,7.4-15.6,3.3h0c-0.5-0.4-1.1-0.8-1.7-1.1L58.3,8.6l-1.2,19.1c0,0.1,0,0.3,0,0.4v0c-0.4,6.5-6.6,11-12.9,9.4h0
            c-0.8-0.2-1.5-0.3-2.2-0.3l-16.9-4.3l7.3,19.6c1.3,5.7-2.4,11.6-8.4,12.6h0c-0.8,0.1-1.5,0.3-2.2,0.6L4.3,68.5l15,15.3
            c3.2,4.7,2.1,11.2-2.8,14.5c-0.6,0.4-1.1,0.8-1.5,1.3L0,109.5l20.3,8.1c4.6,3,6.1,9.3,3,14.2l0,0c-0.3,0.5-0.6,1-0.8,1.5l-9.8,15.5
           ...

SCSS

body,html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  perspective: 800px;
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: 50%;
  transform-style: preserve-3d;
  position: relative;
  display: inline-block;
  padding-bottom: 25%;
  
  svg{
    position:absolute;
    top:0;
    left:0;
    transition: all .5s ease-out
  }
}


.cloud-center{
  fill:url(#CLOUD-CENTER);
}
.cloud-right{
  fill:url(#CLOUD-FRONT);
}
.cloud-left{
  fill:url(#CLOUD-FRONT);
}

JavaScript

const container = document.querySelector('.container');
const image = document.querySelector('.image');

const sun = document.querySelector('.suun');
const cloudBehind = document.querySelector('.clooud-behind');
const cloudLeft = document.querySelector('.clooud-left');
const cloudRight = document.querySelector('.clooud-right');

const devideAxis = 20;

container.addEventListener('mousemove', e => {
  let xAxis = ~(window.innerWidth / 2 - e.pageX) / devideAxis;
  let yAxis = (window.innerHeight / 2 - e.pageY) / devideAxis;
  
	image.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});

container.addEventListener('mouseenter', e => {
	image.style.transition = 'none';
  //popout
  sun.style.transform = 'translateZ(30px)'
  cloudBehind.style.transform = 'translateZ(70px)'
  cloudLeft.style.transform = 'translateZ(120px)'
  cloudRight.style.transform = 'translateZ(180px)'
})

container.addEventListener('mouseleave', e => {
	image.style.transition = 'all 0.5s ease';
	image.style.transform = `rotateY(0deg) rotateX(0deg)`
  
  cloudLeft.style.transform = 'translateZ(0)'
  cloudBehind.style.transform = 'translateZ(0)'
  cloudRight.style.transform = 'translateZ(0)'
  sun.style.transform = 'translateZ(0)'
})