Horizon logo

horizon-logo.markdown

Horizon logo

Logo animation for Horizon.io

A Pen by Chris Gannon on CodePen.

License.

index.html

<svg id="logoSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet"
>
  <defs>
    <linearGradient id="skyGrad" x1="399.25" y1="335.05" x2="406.25" y2="6.05" gradientUnits="userSpaceOnUse">
      <stop id="lower" offset="0.15" stop-color="#f9b681"/>
      <stop id="upper" offset="1" stop-color="#eb4a78"/>
    </linearGradient>
    <clipPath id="waterMask" >
      <rect  y="300" fill="#E00000" width="800" height="300" />
    </clipPath>    
    <clipPath id="skyMask" >
      <rect fill="#E00000" width="800" height="301"/>
    </clipPath>
    <clipPath id="mainCircleMask">
      <circle cx="400" cy="300" r="284" />      
    </clipPath>
  </defs>
  <title>logo</title>
  <g id="wholeLogo" clip-path="url(#mainCircleMask)">
  <g clip-path="url(#waterMask)">
    <!-- <circle id="waterCircle" cx="400" cy="300" r="284" fill="#5db3c6"/> -->
    <rect id="waterCircle" fill="#5DB3C6" width="800" height="600"/>
<path id="waterRipple" fill="#A5DCE4" d="M700,300c0,0-44,72-113,81s-181,13-174,32s101,18,83,40S319,544.1,0,510.1
	C0,551.8,0,840,0,840l1007.1,19c0,0-3.1-377.4,0-454C1014,231.9,794,178,700,300z"/>    
  </g>
  <g clip-path="url(#skyMask)">
    <!-- <circle id="skyCircle" cx="400" cy="300" r="284" fill="url(#skyGrad)"/> -->
<rect id="skyCircle" fill="url(#skyGrad)" width="800" height="600"/>    
  <circle id="sun" cx="400" cy="300" r="105" fill="#fefdeb"/>
  </g>
  </g>
</svg>

script.js

var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  }


TweenMax.set('svg', {
  visibility: 'visible',
  transformOrigin:'50% 50%',
  scale:1
})

var mainTl = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:2});
var skySunTl = new TimelineMax({paused:true});
skySunTl.fromTo('#lower', 10, {
  stopColor:'#020111'
},{
  stopColor:'#CD82A0',
  ease:Linear.easeNone
})
.fromTo('#upper', 10, {
  stopColor:'#1F1F2B'
},{
  stopColor:'#4B4A6A',
  ease:Linear.easeNone
},'-=10')

.to('#lower', 10, {
  stopColor:'#95DFFF',
  ease:Linear.easeNone
})
.to('#upper', 10, {
  stopColor:'#94DFFF',
  ease:Linear.easeNone
},'-=10')

.to('#lower', 10, {
  stopColor:'#f9b681',
  ease:Linear.easeNone
})
.to('#upper', 10, {
  stopColor:'#eb4a78',
  ease:Linear.easeNone
},'-=10')

.fromTo('#sun', 10, {
  fill:'#B30200'
},
  {
  fill:'#EC8323',
  ease:Linear.easeNone

},'-=30')
.to('#sun', 10, {
  fill:'#FFF',
  ease:Linear.easeNone
},'-=20')
.to('#sun', 10, {
  fill:'#fefdeb',
  ease:Linear.easeNone
},'-=10')

.fromTo('#sun', 15, {
  attr:{
    cy:410,
    r:105
  }},{
  attr:{
    cy:0,
    r:90
  },
  ease:Power1.easeInOut
},'-=30')
.to('#sun', 14, {
  attr:{
    cy:300,
    r:105
  },
  ease:Sine.easeInOut
},'-=13')
.from('#mainCircleMask circle', 30, {
  attr:{
    r:500
  },
  ease:Power1.easeInOut
},'-=30')

var waterTl = new TimelineMax({paused:true});
waterTl.fromTo('#waterCircle', 30, {
  fill:'#020111'
},{
  fill:'#5DB3C6',
  ease:Linear.easeNone
})
.fromTo('#waterRipple', 30, {
  fill:'#020111'
},{
  fill:'#A5DCE4',
  ease:Linear.easeNone
},'-=30')
.fromTo('body', 30, {
  backgroundColor:'#020111'
},{
  backgroundColor:'#FFF',
  ease:Linear.easeNone
},'-=30')


var skySunTween = TweenMax.to(skySunTl, 10, {
  time:skySunTl.duration(),
  ease:Power2.easeInOut
})

var waterTween= TweenMax.to(waterTl, 10, {
  time:waterTl.duration(),
  ease:Power2.easeInOut
})
mainTl.add(skySunTween, 0);
mainTl.add(waterTween, 0);
mainTl.timeScale(4);
mainTl.play(0)
//ScrubGSAPTimeline(mainTl)

//tl.timeScale(30)

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

style.css

body {
  background-color:#FFF;
  overflow: hidden;
}

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


svg{
  width:100%;
  height:100%;
  visibility:hidden;

}