<div class="freebet-animation-content">
<span class="freebet-text confetti">FREEBETS</span>
<div class="freebet-title-content">
<svg xmlns="http://www.w3.org/2000/svg" width="576,32" height="386,54" viewBox="0 0 239.6 160.702">
<g id="Grupo_2131" data-name="Grupo 2131" transform="translate(5944 -13684.583)">
<path id="Trazado_2349" data-name="Trazado 2349" d="M82.36,0l20.722,11.526L0,66.832Z" transform="matrix(0.829, 0.559, -0.559, 0.829, -5904.212, 13732.235)" fill="#cb9e00" />
<path id="Trazado_2346" data-name="Trazado 2346" d="M63.29,0,79.333,11,0,51.144Z" transform="matrix(-0.819, -0.574, 0.574, -0.819, -5736.273, 13771.981)" fill="#cb9e00" />
<path id="Trazado_2348" data-name="Trazado 2348" d="M8.683,0H237.547l-7.24,45.454H0Z" transform="translate(-5944 13742.27) rotate(-3)" fill="#ffc600" />
<path id="Trazado_2352" data-name="Trazado 2352" d="M0,23.97H5.867l2.075-9.248h9.713l1.181-5.474H9.177l.716-3.166a.886.886,0,0,1,.3-.429.657.657,0,0,1,.4-.161h4.633V5.474h9.588L26.063,0H9.588q-3.7,0-5.08,3.971Zm38.5,0h6.368l-4.687-7.763h2.182a5.189,5.189,0,0,0,5.08-3.953q.769-3.435,1.064-4.767l.3-1.333A4.859,4.859,0,0,0,47.752,1.86,5,5,0,0,0,43.718,0H32.073q-3.667,0-5.062,3.953L22.289,23.934h5.957q.179-.8.34-1.512t.3-1.315q.134-.608.259-1.118t.224-.93q.1-.42.179-.778l.143-.635q.063-.277.107-.492t.089-.376q.045-.161.072-.277T30,16.314q.018-.072.027-.116a.376.376,0,0,0,.009-.063v.036a.036.036,0,0,1-.009.027l-.009.009h3.774Zm3.524-13.827a.7.7,0,0,1-.716.5H31.34l1-4.579a.811.811,0,0,1,.286-.42.673.673,0,0,1,.411-.17h9.194a.669.669,0,0,1,.537.259.7.7,0,0,1,.161.581Zm5.867,7.674a4.832,4.832,0,0,0,1.064,4.293,5.086,5.086,0,0,0,4.087,1.86H67.17q.7-2.969,1.27-5.474H61.893v-.018H54.5a.678.678,0,0,1-.537-.25.7.7,0,0,1-.161-.59l.68-2.916h9.767L65.47,9.248H55.757l.733-3.166a.863.863,0,0,1,.3-.429.694.694,0,0,1,.411-.161H71.463L72.733,0H56.2q-3.7,0-5.1,3.971Zm23.308,0a4.832,4.832,0,0,0,1.064,4.293,5.086,5.086,0,0,0,4.087,1.86H90.478q.7-2.969,1.27-5.474H85.2v-.018H77.813a.678.678,0,0,1-.537-.25.7.7,0,0,1-.161-.59l.68-2.916h9.767l1.216-5.474H79.065L79.8,6.082a.863.863,0,0,1,.3-.429.694.694,0,0,1,.411-.161H94.771L96.041,0H79.513q-3.7,0-5.1,3.971ZM102.91,0h11.735a5.06,5.06,0,0,1,4.078,1.86,4.8,4.8,0,0,1,1.038,4.293l-.009.009a.13.13,0,0,0-.018.054l-.027.134q-.018.089-.054.259t-.1.429q-.063.259-.152.635a6.591,6.591,0,0,1-.894,2.29,8.838,8.838,0,0,1-.662.975,2.883,2.883,0,0,1-.93.8h-.009a.092.092,0,0,0-.036.018.771.771,0,0,1-.116.054q-.089.036-.233.1t-.367.17q-.224.107-.563.25l.009.009a.543.543,0,0,0,.045.036q.036.027.116.1t.233.2q.152.125.385.34a4.682,4.682,0,0,1,.877,3.882h0l-.009.036q-.009.036-.027.116t-.054.233q-.036.152-.1.376t-.143.555q-.08.331-.2.778T116.469,20q-1.431,3.971-5.134,3.971H92.982v-.009a.445.445,0,0,1,.009-.054q.009-.045.036-.134T93.1,23.5q.045-.179.107-.447t.152-.662q.089-.394.224-.93t.3-1.234q.17-.7.376-1.583t.474-1.977q.268-1.091.581-2.406t.689-2.889q.376-1.574.823-3.426t.966-3.98Q99.207,0,102.91,0Zm.25,6.082-.716,3.113h9.266a1.771,1.771,0,0,0,1.073-.34,1.564,1.564,0,0,0,.608-.912l.009-.009a.131.131,0,0,0,.018-.054q.009-.045.036-.143t.072-.277q.045-.179.125-.456t.188-.671a.7.7,0,0,0-.161-.59.678.678,0,0,0-.537-.25h-9.266a.694.694,0,0,0-.411.161A.863.863,0,0,0,103.161,6.082Zm-2.934,12.4h10.143a.657.657,0,0,0,.4-.161.569.569,0,0,0,.224-.429l.009-.036q.009-.036.027-.1t.045-.188q.027-.125.072-.313t.116-.456a1.583,1.583,0,0,0-.313-1.4,1.652,1.652,0,0,0-1.368-.617h-8.461v.009a.269.269,0,0,1-.009.045q-.009.036-.036.134t-.072.268q-.045.17-.107.438t-.152.662q-.089.394-.224.921T100.227,18.478Zm18.961-.662a4.832,4.832,0,0,0,1.064,4.293,5.086,5.086,0,0,0,4.087,1.86h14.132q.7-2.969,1.27-5.474h-6.547v-.018h-7.388a.678.678,0,0,1-.537-.25.7.7,0,0,1-.161-.59l.68-2.916h9.767l1.216-5.474h-9.713l.733-3.166a.863.863,0,0,1,.3-.429.694.694,0,0,1,.411-.161h14.257L144.035,0H127.506q-3.7,0-5.1,3.971Zm30.124,6.153H155l3.917-18.514h7.71L167.969,0H146.7l-1.342,5.456H153.3Zm25.9-18.478a.641.641,0,0,0-.429.152.827.827,0,0,0-.25.349V6a.157.157,0,0,1-.018.045.555.555,0,0,0-.036.125q-.018.089-.054.259t-.1.42q-.063.25-.152.626t-.215.877a.73.73,0,0,0,.143.59.628.628,0,0,0,.519.25h8.712a4.618,4.618,0,0,1,3.855,1.869,4.923,4.923,0,0,1,.885,4.3v.009a.27.27,0,0,1-.009.045q-.009.036-.027.116t-.054.233q-.036.152-.1.385t-.143.581q-.08.349-.2.814l-.268,1.073q-.152.608-.331,1.377a5.293,5.293,0,0,1-1.86,2.862,5.053,5.053,0,0,1-3.238,1.109H164.338v-.009a.447.447,0,0,1,.009-.054q.009-.045.036-.143t.072-.277l.116-.465q.072-.286.161-.7t.224-.975q.134-.563.313-1.3t.394-1.646h15.4a.706.706,0,0,0,.7-.519v-.009a.267.267,0,0,1,.009-.045q.009-.036.027-.125t.063-.259q.045-.17.107-.42t.152-.626q.089-.376.2-.877a.577.577,0,0,0-.063-.581.6.6,0,0,0-.51-.259H172.96a4.675,4.675,0,0,1-3.864-1.834,4.906,4.906,0,0,1-.894-4.32V8.524a.267.267,0,0,1,.009-.045q.009-.036.036-.125t.063-.241q.036-.152.089-.385t.143-.572q.089-.34.2-.814T169,5.259q.152-.608.349-1.377Q170.867,0,174.427,0h17.6V.009a.449.449,0,0,1-.009.054q-.009.045-.036.143t-.072.277q-.045.179-.125.456t-.179.68q-.1.4-.242.957l-.331,1.279q-.188.724-.42,1.637h-15.4Z" transform="translate(-5920.301 13752.594) rotate(-3)" />
</g>
</svg>
</div>
</div>
body {
display: flex;
width: 100%;
height: calc(100vh - 5px);
background-color: #202125;
justify-content: center;
align-items: center;
.freebet-animation-content {
text-align: center;
color: transparent;
position: relative;
}
.freebet-text {
position: relative;
display: block;
text-align: center;
font-size: 60px;
margin: 0 auto;
margin-top: 80px;
margin-bottom: -120px;
z-index: -1;
&.confetti {
> .confetti {
opacity: 0;
position: absolute;
animation: confetti 2s ease-in infinite;
&.c1 {
background-color: #ffc600;
}
&.c2 {
background-color: #159b36;
}
}
}
}
}
.freebet-title-content {
position: absoute;
}
@keyframes confetti {
0% {
opacity: 0;
transform: translateY(0%) rotate(0deg);
}
10% {
opacity: 1;
}
35% {
transform: translateY(-800%) rotate(270deg);
}
80% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(2000%) rotate(1440deg);
}
}
View Compiled
function initparticles() {
confetti();
}
function confetti() {
$.each($(".freebet-text.confetti"), function () {
var confetticount = ($(this).width() / 50) * 10;
for (var i = 0; i <= confetticount; i++) {
$(this).append(
'<span class="confetti c' +
$.rnd(1, 2) +
'" style="top:' +
$.rnd(10, 50) +
"%; left:" +
$.rnd(0, 100) +
"%;width:" +
$.rnd(6, 8) +
"px; height:" +
$.rnd(3, 4) +
"px;animation-delay: " +
$.rnd(0, 30) / 10 +
's;"></span>'
);
}
});
}
jQuery.rnd = function (m, n) {
m = parseInt(m);
n = parseInt(n);
return Math.floor(Math.random() * (n - m + 1)) + m;
};
initparticles();
This Pen doesn't use any external CSS resources.