<div></div>
div {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .5s;
    transition-timing-function: cubic-bezier(.92,-0.5,1,.12);
    border-radius: 50%;
}
View Compiled
setInterval(function() {
    const length = 2000;

    let el = document.querySelectorAll("div")[0];
    let coordinate = "";

    for (let i = 0; i < length; i++) {
        coordinate +=
            parseInt(Math.random() * 10000) / 100 +
            "% " +
            parseInt(Math.random() * 10000) / 100 +
            "%, ";
    }

    coordinate = "polygon(" + coordinate.slice(0, -2) + ")";

    el.style.clipPath = coordinate;
    el.style.backgroundColor =
        "#" + (~~(Math.random() * (1 << 24))).toString(16);
}, 500);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.