<link href='//fonts.googleapis.com/css?family=Dosis:400,600' rel='stylesheet' type='text/css'>
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 0 1252 600" width="250px">
<path fill="none" d="M531.3 11.2S520.6.5 509.5.5c-11 0-25.4 11.3-25.4 11.3L11 360s-16 12-7.4 24c8.8 12.2 25.5 1.5 25.5 1.5L499 112s6.6-4.2 10.3-4c3 .2 7.7 4 7.7 4l283 229s4 3 6 3c2.7.2 7.4-3.3 7.4-3.3l210-145.4s2.2-1.7 3.6-1.7c1 0 3.4 1.7 3.4 1.7l189.3 144.5s15.8 12.8 27.2.3c11-12-4-27-4-27l-196.7-181s-7.3-7.5-15.8-8c-8.6-.4-19.8 7.8-19.8 7.8l-196.2 122s-5.5 4-8.6 4c-2.6-.3-6.5-4-6.5-4z"/>
</svg>
<!-- me -->
<div style="font-family:'Dosis'; font-weight:bold; color:#888; text-align:center;margin-top:20px">made with <span style="color:rgb(199, 59, 84)">♥</span> by <a style="color:#999;text-decoration:none;border-bottom:1px dashed #555" href="http://www.alticreation.com/en" title="front end developer" target="_blank">alticreation</a></div>
<div id="tryAgain" style="text-decoration:underline;font-family:'Dosis'; font-weight:bold; color:#000; text-align:center;margin-top:10px;cursor:pointer">
try again
</div>
</div>#container {
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}window.onload = play();
document.getElementById('tryAgain').addEventListener('click', () => { play() })
function play() {
var blue = '#2980b9';
var l = Snap('#logo');
var p = l.select('path');
l.clear();
l.append(p);
p.attr({
fill: blue,
stroke: '#0066CC',
});
setTimeout( function() {
// modify this one line below, and see the result !
var logoTitle = 'alticreation';
var logoRandom = '';
var logoTitleContainer = l.text(0, '98%', '');
var possible = "-+*/|}{[]~\\\":;?/.><=+-_)(*&^%$#@!)}";
logoTitleContainer.attr({
fontSize: 280,
fontFamily: 'Dosis',
fontWeight: '600'
});
function generateRandomTitle(i, logoRandom) {
setTimeout( function() {
logoTitleContainer.attr({ text: logoRandom });
}, i*70 );
}
for( var i=0; i < logoTitle.length+1; i++ ) {
logoRandom = logoTitle.substr(0, i);
for( var j=i; j < logoTitle.length; j++ ) {
logoRandom += possible.charAt(Math.floor(Math.random() * possible.length));
}
generateRandomTitle(i, logoRandom);
logoRandom = '';
}
}, 500 );
}
External CSS
This Pen doesn't use any external CSS resources.