Сегодня ночью будем играться в CSS Painting API см https://developer.mozilla.org/en-US/doc … inting_API

Ну вот маленький пример index.html:

Код:
<!DOCTYPE html>
<html>
  <head>
    <style>
    * { padding:0; margin:0; }
    #mybg {
      width:600px; 
      height:600px;
      background-color:#000;
      background-image:paint(myPattern);
    }
    </style>
    <script>
      window.onload = function() {
        CSS.paintWorklet.addModule('patternWorklet.js');
      }
    </script>
  </head>
  <body>
    <div id="mybg">
    </div>
  </body>
</html>

patternWorklet.js:

Код:
class Shape {
  paint(ctx, geom, properties) {
    ctx.moveTo(10, 10);
    ctx.lineTo(100, 50);
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#fff';
    ctx.stroke();
  }
}

registerPaint('myPattern', Shape);