LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
    
    
      
    
  
  
  sunrise
  
    
      
      
        
        
      
      
        
        
        
        
        
        
        
        
      
    
  
CSS
html {
  text-align: center;
  background: #f4c042;
}

svg {
  width: 400px;
  height: 300px;
}

* {
  stroke: #765d20;
  stroke-linecap: round;
  vector-effec: non-scaling-stroke;
}

[id='line'] {
  stroke-width: 3;
}

text {
  font: .875em century gothic, verdana, sans-serif;
}

[id='mover'] {
  animation: sun-motion 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}

[id='main'] {
  fill: transparent;
  stroke-width: 7;
}

[id='eyes'] {
  animation: eye-motion 5s ease-out infinite;
}
[id='eyes'] circle {
  fill: #765d20;
}

[id='ray'] {
  stroke-width: 4;
}

[id='rays'] {
  animation: rot 5s linear infinite;
}

@keyframes rot {
  to {
    transform: rotate(0.25turn);
  }
}
@keyframes eye-motion {
  0%, 20%, 49%, 100% {
    transform: translate(-13px);
  }
  21%, 25%, 29%, 47% {
    transform: translate(13px) scaleY(1);
  }
  27% {
    transform: translate(13px) scaleY(0);
  }
  48% {
    transform: translate(0);
  }
}
@keyframes sun-motion {
  0%, 99%, 100% {
    transform: translateY(-16px);
  }
  50% {
    transform: translateY(-29px);
  }
  52%, 98% {
    transform: translate(4px) scaleY(1.25);
  }
  53%, 97% {
    transform: translateY(23px);
  }
}
JS
// DONE
Host Instantly Drag and Drop Website Builder

 

Description

Live coded on Friday, the 18th of September. Tested & works in Firefox 40, Chrome 45, 47 (canary)/ Opera 32 beta on Windows 8. Uses CSS transforms on SVG elements, so it won't work in IE. Inspiration:
Term
Mon, 11/27/2017 - 21:51

Related Codes

Pen ID
Pen ID
Pen ID