CSS
body{
background-color:#000;
}
.masked{
clip-path: polygon(26% 35%, 32% 17%, 36% 1%, 49% 13%, 63% 31%, 66% 53%, 69% 71%, 79% 86%, 85% 100%, 6% 100%, 2% 82%, 10% 60%);
width:50px;
height:50px;
background-color:purple;
position:absolute;
animation-name: flames;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction:alternate-reverse;
transition:all 0.4s;
}
@keyframes flames{
0% { clip-path: polygon(26% 35%, 32% 17%, 36% 1%, 49% 13%, 63% 31%, 66% 53%, 69% 71%, 79% 86%, 85% 100%, 6% 100%, 2% 82%, 10% 60%); }
25% { clip-path: polygon(16% 36%, 31% 20%, 48% 0, 53% 16%, 58% 35%, 61% 54%, 66% 71%, 74% 86%, 81% 100%, 9% 100%, 4% 80%, 6% 58%); }
50% { clip-path: polygon(18% 32%, 33% 15%, 55% 0, 49% 18%, 51% 37%, 54% 56%, 66% 51%, 68% 70%, 81% 100%, 9% 100%, 4% 80%, 7% 54%); }
75% { clip-path: polygon(21% 31%, 41% 11%, 66% 0, 60% 17%, 58% 32%, 60% 46%, 64% 63%, 73% 80%, 81% 100%, 9% 100%, 4% 80%, 7% 54%); }
100% { clip-path: polygon(26% 35%, 32% 17%, 36% 1%, 49% 13%, 63% 31%, 66% 53%, 69% 71%, 79% 86%, 85% 100%, 6% 100%, 2% 82%, 10% 60%); }
}