<div class="blob">Hello</div>
@import url('https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap');
body{
background:#000;
font-family: 'Bebas Neue', cursive;
font-size:30px;
}
.blob{
width:300px;
height:300px;
margin:10% auto;
position:relative;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
}
.blob::before{
border:2px solid #fff;
border-radius: 58% 42% 48% 53% / 47% 60% 36% 53%;
width:100%;
height:100%;
content:'';
position:absolute;
left:0; top:0;
animation: rotate 16s linear infinite;
}
.blob::after{
border:2px solid #fff;
border-radius: 48% 42% 48% 53% / 47% 60% 36% 53%;
width:100%;
height:100%;
background: rgba(244, 166, 166, 0.1);
content:'';
position:absolute;
left:0; top:0;
animation: rotate 6s linear infinite;
}
@keyframes rotate{
0%{
transform:rotate(0deg);
border-color:#EC0D0D;
}
50%{
border-color:#f4c01c;
}
100%{
transform:rotate(360deg);
border-color:#EC0D0D;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.