<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>
<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)