<div class="container">
<div class="content">543.62</div>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" width="100%" id="blobSvg">
<defs>
<linearGradient id="path1-a" x1="50%" x2="50%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#1AD8FF" />
<stop offset="100%" stop-color="#1AD8FF" />
</linearGradient>
</defs>
<path id="blob" fill="url(#path1-a)" fill-rule="evenodd">
<animate attributeName="d" dur="2s" repeatCount="indefinite" fill="freeze" values="M408,363Q323,476,186.5,435.5Q50,395,50,250Q50,105,187,63.5Q324,22,408.5,136Q493,250,408,363Z;
M406.5,360.5Q322,471,187,432.5Q52,394,53,251Q54,108,188,69Q322,30,406.5,140Q491,250,406.5,360.5Z;
M403.5,364Q324,478,195,431Q66,384,57.5,244Q49,104,185.5,66.5Q322,29,402.5,139.5Q483,250,403.5,364Z;
M407,361.5Q322,473,185,435Q48,397,49.5,251.5Q51,106,187,65Q323,24,407.5,137Q492,250,407,361.5Z" />
</path>
</svg>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Exo", Arial, sans-serif;
font-size: 20px;
font-weight: 600;
background: radial-gradient(50% 100%, #00acfe 0%, #006eff 0%, #2b9fff 100%),
linear-gradient(180deg, #006eff 0%, #00c2ff 100%);
}
.container {
width: 420px;
height: 420px;
position: relative;
margin: auto;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.content {
background-color: #d8f3fe;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 320px;
height: 320px;
color: #0044cd;
font-size: 2.5rem;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
position: relative;
z-index: 2;
}
svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.