Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/c391e001bb5bedb87c51aff9ffa0719b to your computer and use it in GitHub Desktop.
Save CodeMyUI/c391e001bb5bedb87c51aff9ffa0719b to your computer and use it in GitHub Desktop.
Animated Blobs Text - Multiple Colors
<div class="container">
<h1><span>THE<br>BLOBS</span></h1>
<div class="blobs_1"></div>
<div class="blobs_2"></div>
<div class="blobs_3"></div>
<div class="blobs_4"></div>
<div class="blobs_5"></div>
<div class="blobs_6"></div>
<div class="blobs_7"></div>
</div>
<!-- This is not part of Pen -->
<a class="me" href="https://codepen.io/uzcho_/pens/popular/?grid_type=list" target="_blank" style="color:#000"></a>
@import url('https://fonts.googleapis.com/css?family=Titan+One');
body{text-align:center}
div{display:block;position:absolute}
.container{
width:320px;
height:320px;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
h1{
background:#fff;
width:100%;
height:100%;
margin:0;
padding:0;
display:flex;
font-family:'Titan One',cursive;
font-size:90px;
font-weight:700;
flex-flow:row wrap;
align-content:center;
justify-content:center
}
h1 span{width:100%;position:relative}
h1 span:before{
background:linear-gradient(45deg,#fc5c7d,#6a82fb,#fc5c7d);
width:100%;
height:100%;
display:block;
position:absolute;
content:"";
mix-blend-mode:screen
}
[class*="blobs"]
{mix-blend-mode:color;animation:blobs 15s ease-in-out infinite alternate}
.blobs_1{
background:#ff1493;
width:60px;
height:60px;
top:90px;
left:210px
}
.blobs_2{
background:#ff4500;
width:80px;
height:80px;
top:155px;
left:230px
}
.blobs_3{
background:#00ff00;
width:60px;
height:60px;
top:145px;
left:20px
}
.blobs_4{
background:#ff0000;
width:100px;
height:100px;
top:115px;
left:100px
}
.blobs_5{
background:#ffff00;
width:50px;
height:50px;
top:55px;
left:70px
}
.blobs_6{
background:#00ffff;
width:60px;
height:60px;
top:220px;
left:55px
}
.blobs_7{
background:#ff8c00;
width:50px;
height:50px;
top:210px;
left:180px
}
@keyframes blobs{
0%{border-radius:26% 74% 61% 39% / 54% 67% 33% 46%}
10%{border-radius:74% 26% 47% 53% / 68% 46% 54% 32%}
20%{border-radius:48% 52% 30% 70% / 27% 37% 63% 73%}
30%{border-radius:73% 27% 57% 43% / 28% 67% 33% 72%}
40%{border-radius:63% 37% 56% 44% / 25% 28% 72% 75%}
50%{border-radius:39% 61% 70% 30% / 61% 29% 71% 39%}
60%{border-radius:27% 73% 29% 71% / 73% 51% 49% 27%}
70%{border-radius:39% 61% 65% 35% / 74% 65% 35% 26%}
80%{border-radius:55% 45% 37% 63% / 38% 30% 70% 62%}
90%{border-radius:25% 75% 70% 30% / 39% 50% 50% 61%}
100%{border-radius:66% 34% 33% 67% / 65% 73% 27% 35%}
}
<link href="https://codepen.io/uzcho_/pen/RmOWmw.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment