This demo produces different result on each repaints (resize browser, zoom, play with controls, etc.), as there is no way to store state inside the registered paint. More info in this TC39 proposal about Seeded Random numbers from Tab Atkins.

A solution could be used, see the Random bubbles mask demo

Code adapted from Rough.js

.el {
  background: var(--rough-fill);
  border: var(--rough-stroke-width) solid var(--rough-stroke);
  --rough-fill: #0081ff;
  --rough-stroke: black;
  --rough-stroke-width: 4px;
  --rough-roughness: 7;
}
.el:nth-child(2) {
  --rough-fill: #8100ff;
}
@supports (border-image-source: paint(rough-boxes)) {
  .is-loaded .el {
    border-image-source: paint(rough-boxes);
    border-image-slice: 0 fill;
    border-image-outset: 10px;
    background: none;
  }
}