JSFiddle - React, Tailwind, and code Playground
by luka kupunia
HTML
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ab quidem, doloribus quibusdam. Ratione, asperiores, molestiae. Unde impedit voluptatem quibusdam nam optio facere sapiente iure earum facilis temporibus, quo dolorum.
</div>
CSS
div.box {
width : 300px;
height: 300px;
background: purple;
opacity : 1;
color: white;
-webkit-clip-path: polygon(0% 15%, 79% 73%, 15% 0%, 85% 0%, 30% 74%, 100% 15%, 100% 85%, 33% 23%, 85% 100%, 15% 100%, 76% 26%, 0% 85%);
clip-path: polygon(0% 15%, 79% 73%, 15% 0%, 85% 0%, 30% 74%, 100% 15%, 100% 85%, 33% 23%, 85% 100%, 15% 100%, 76% 26%, 0% 85%);
animation: luka 2s forwards infinite;
}
@keyframes luka {
100% {
-webkit-clip-path: polygon(0% 15%, 16% 19%, 100% 47%, 58% 100%, 86% 16%, 100% 15%, 15% 0, 84% 83%, 0 34%, 10% 100%, 17% 83%, 0% 85%);
clip-path: polygon(0% 15%, 16% 19%, 100% 47%, 58% 100%, 86% 16%, 100% 15%, 15% 0, 84% 83%, 0 34%, 10% 100%, 17% 83%, 0% 85%);
}
}