<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.11.9/jquery.velocity.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%">
<linearGradient id="background" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
<stop id="one" offset="0%" stop-color="crimson"/>
<stop id="two" offset="100%" stop-color="cyan"/>
</linearGradient>
<rect id="rect" width="100%" height="100%" fill="url(#background)"/>
<g cursor="pointer" id="group" opacity="0">
<a xlink:href="http://uigradients.com/" target="_blank">
<text class="texto-tittle" id="texto" x="0" y="300">uiGradients</text>
</a>
<a xlink:href="https://github.com/Ghosh/uiGradients" target="_blank">
<g transform="translate(255,272)">
<circle r="16" cx="16" cy="16" fill="white"/>
<path fill="black" d="M16,0C7.2,0,0,7.2,0,16c0,7.1,4.6,13.1,11,15.2 c0.8,0.1,1.1-0.3,1.1-0.8c0-0.4,0-1.4,0-2.7c-4.5,1-5.4-2.1-5.4-2.1c-0.7-1.8-1.8-2.3-1.8-2.3c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.7,2.5,1.7c1.4,2.4,3.7,1.7,4.7,1.3c0.1-1,0.6-1.7,1-2.1c-3.6-0.4-7.3-1.8-7.3-7.9c0-1.7,0.6-3.2,1.6-4.3 c-0.2-0.4-0.7-2,0.2-4.2c0,0,1.3-0.4,4.4,1.6c1.3-0.4,2.6-0.5,4-0.5c1.4,0,2.7,0.2,4,0.5c3.1-2.1,4.4-1.6,4.4-1.6 c0.9,2.2,0.3,3.8,0.2,4.2c1,1.1,1.6,2.5,1.6,4.3c0,6.2-3.7,7.5-7.3,7.9c0.6,0.5,1.1,1.5,1.1,3c0,2.1,0,3.9,0,4.4 c0,0.4,0.3,0.9,1.1,0.8C27.4,29.1,32,23.1,32,16C32,7.2,24.9,0,16,0z"/>
</g>
</a>
</g>
</svg>
<script>
$("#texto")
.delay(10500)
.velocity({x: 70 },{duration:500, easing: "easeInSine"});
$("#group")
.delay(10500)
.velocity({opacity: 1 },{duration:2000, easing: "ease-in"});
$("#background")
.delay(500)
.velocity({x2: "100%", y2: "0%" },{duration:1500, easing: "linear"})
.delay(500)
.velocity({x2: "0%", y2: "100%" },{duration:1500, easing: "linear"})
.delay(500)
.velocity({x1: "50%", y2: "0%" },{duration:1500, easing: "linear"})
.delay(500)
.velocity({x1: "0%", y2: "100%" },{duration:1500, easing: "linear"})
.delay(500)
.velocity({x2: "100%", y2: "0%" },{duration:1500, easing: "linear"});
$("#one")
.delay(1500)
.velocity({stopColor: "#FF4E50" },{duration:1500, easing: "linear"})
.delay(500)
.velocity({stopColor: "#556270" },{duration:1500, easing: "swing"})
.delay(500)
.velocity({stopColor: "#F0C27B" },{duration:1500, easing: "linear"})
.delay(500)
.velocity({stopColor: "#000000" },{duration:1500, easing: "swing"})
.delay(500)
.velocity({stopColor: "#ED4264" },{duration:1500, easing: "linear"});
$("#two")
.delay(1500)
.velocity({stopColor: "#F9D423" },{duration:1500, easing: "linear"})
.delay(500)
.velocity({stopColor: "#FF6B6B" },{duration:1500, easing: "swing"})
.delay(500)
.velocity({stopColor: "#4B1248" },{duration:1500, easing: "linear"})
.delay(500)
.velocity({stopColor: "#e74c3c" },{duration:1500, easing: "swing"})
.delay(500)
.velocity({stopColor: "#FFEDBC" },{duration:1500, easing: "linear"});
</script>
@import url(https://fonts.googleapis.com/css?family=Playball|Open+Sans+Condensend:300);
body {
background-color: snow;
}
html, body, svg {
margin: 0;
width: 100%;
height: 100%;
}
.texto-tittle {
font-family: 'Playball', cursive;
font-size: 40px;
fill: snow;
}
.texto-by {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 12px;
fill: snow;
letter-spacing: 1px;
opacity: .8;
}
