<div></div>
<svg width="0" height="0">
<defs>
<clipPath id="my-shape">
<path d="M89.6342913,129 C86.6318679,137.611315 85,146.865086 85,156.5 C85,200.767808 119.448105,236.989829 163,239.821749 L163,300 L300,300 L300,163 L251.750745,163 C251.915896,160.855015 252,158.687329 252,156.5 C252,110.384223 214.615777,73 168.5,73 C146.712501,73 126.873981,81.3445721 112.006052,95.0121046 L64.5,0 L0,129 L89.6342881,129 Z">
</path>
</clipPath>
</defs>
</svg>
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 50vh;
height: 50vh;
background: linear-gradient(45deg, #3023AE 0%, #FF0099 100%);
animation: magic 5s infinite;
position: relative;
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 2vw;
font-weight: 900;
text-shadow: 1px 1px 1px rgba(0,0,0,.5),-1px -1px 1px rgba(0,0,0,.5);
animation: changeContent 5s infinite;
}
}
@keyframes magic {
0% {
clip-path:inset(5% 5% 5% 5%);
animation-timing-function: cubic-bezier(0, 0, 0.9,-0.15);
}
10% {
clip-path: inset(25% 0 round 0% 25%);
animation-timing-function:cubic-bezier(0, 1.14, 1, 1);
}
20% {
clip-path: ellipse(30% 20% at 50% 50%);
animation-timing-function: cubic-bezier(0.08, 1.13, 0.21, 0.32);
}
30% {
clip-path: circle(50% at 50% 50%);
animation-timing-function: cubic-bezier(0.91, 0.1, 0, 0.79);
}
40% {
clip-path: polygon(0 100%, 50% 0, 100% 100%);
animation-timing-function: cubic-bezier(0.06, 1.16, 1,-0.42);
}
50% {
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
animation-timing-function: cubic-bezier(0.06, 1.16, 1,-0.42);
}
60% {
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
animation-timing-function: cubic-bezier(0.91, 0.1, 0, 0.79);
}
70% {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
animation-timing-function: cubic-bezier(0.08, 1.13, 0.21, 0.32);
}
80% {
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
animation-timing-function:cubic-bezier(0, 1.14, 1, 1);
}
90% {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
animation-timing-function: cubic-bezier(0.91, 0.1, 0, 0.79);
}
100% {
clip-path: url(#my-shape);
animation-timing-function:cubic-bezier(0, 1.14, 1, 1);
}
}
@keyframes changeContent {
0% {
content: 'inset()';
}
10% {
content: 'inset()';
}
20% {
content: 'ellipse()';
}
30% {
content: 'circle()';
}
40% {
content: 'polygon()';
}
50% {
content: 'polygon()';
}
60% {
content: 'polygon()';
}
70% {
content: 'polygon()';
}
80% {
content: 'polygon()';
}
90% {
content: 'polygon()'
}
100% {
content: 'url()'
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.