[html]
<style>
#demo {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
}
</style>
<script>

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

// Design тут можно заменить цвет точек в двух местах
var circleFill = "rgba(255,160,30,1)";

var Particle = function (sx, sy) {
    this.sx = sx;
    this.sy = sy;
    this.vx = 0.0;
    this.vy = 0.0;
};

// create particles здесь же в n меняется кол во точек если лагает меньше 
var n = 255;
var particles = [];
for (var i = 0; i < n; ++i) {
    var sx = Math.random() * canvas.width;
    var sy = Math.random() * canvas.height;
    particles[i] = new Particle(sx, sy);
}

var drawLine = function (x0, y0, x1, y1, alpha) {
    context.lineWidth = "hairline";
    context.strokeStyle = "rgba(255,160,30," + alpha + ")";
    context.beginPath();
    context.moveTo(x0, y0);
    context.lineTo(x1, y1);
    context.closePath();
    context.stroke();
};

var drawCircle = function (x, y, r) {
    context.fillStyle = circleFill;
    context.beginPath();
    context.arc(x, y, r, 0.0, Math.PI * 2.0);
    context.closePath();
    context.fill();
};

var mouseX = 0.0;
var mouseY = 0.0;

// Physics Properties
var particleInfluenceRadius = 26.0;
var particleAttractionRadius = 18.0;
var partcileAttrationForce = 1.0 / 200.0;
var partcileVelocityDecay = 0.99;
var particleMouseInfluenceRadius = 48.0;
var particleMouseRejectionForce = 1.0 / 96.0;

var solveAndDraw = function () {
    var strength;
    var i = particles.length;
    while (--i > -1) {
        var particle = particles[i];
        var j = i;
        while (--j > -1) {
            var neighbour = particles[j];
            var dx = particle.sx - neighbour.sx;
            var dy = particle.sy - neighbour.sy;
            var dd = Math.sqrt(dx * dx + dy * dy);
            if (dd > particleInfluenceRadius) {
                //-- out of radius
            } else if (dd > particleAttractionRadius) {
                //-- attraction
                particle.vx -= dx * partcileAttrationForce;
                particle.vy -= dy * partcileAttrationForce;
                neighbour.vx += dx * partcileAttrationForce;
                neighbour.vy += dy * partcileAttrationForce;
                strength = 1.0 - (dd - particleAttractionRadius) / (particleInfluenceRadius - particleAttractionRadius);
                drawLine(
                particle.sx,
                particle.sy,
                neighbour.sx,
                neighbour.sy,
                strength);
            } else if (dd > 0.0) {
                //-- rejection:spring
                dd = 0.5 * (dd - particleAttractionRadius) / dd;
                dx *= dd;
                dy *= dd;
                particle.vx -= dx;
                particle.vy -= dy;
                neighbour.vx += dx;
                neighbour.vy += dy;
                drawLine(
                particle.sx,
                particle.sy,
                neighbour.sx,
                neighbour.sy, 1.0);
            }
        }
    }
};

var moveAndDraw = function () {
    for (var i = 0; i < n; ++i) {
        var particle = particles[i];
        var sx = particle.sx;
        var sy = particle.sy;
        // mouse attraction
        var dx = mouseX - sx;
        var dy = mouseY - sy;
        var dd = Math.sqrt(dx * dx + dy * dy);
        if (dd < particleMouseInfluenceRadius) {
            particle.vx -= dx * particleMouseRejectionForce;
            particle.vy -= dy * particleMouseRejectionForce;
        }
        // damp velocity
        particle.vx *= partcileVelocityDecay;
        particle.vy *= partcileVelocityDecay;
        // apply velocity
        sx += particle.vx;
        sy += particle.vy;
        // bounds
        if (sx < 0) {
            sx = 0;
            particle.vx = -particle.vx;
        } else if (sx > width) {
            sx = width;
            particle.vx = -particle.vx;
        }
        if (sy < 0) {
            sy = 0;
            particle.vy = -particle.vy;
        } else if (sy > height) {
            sy = height;
            particle.vy = -particle.vy;
        }
        // draw
        drawCircle(sx, sy, 2.0);
        // write back
        particle.sx = sx;
        particle.sy = sy;
    }
};

var enterFrame = function () {
    context.clearRect(0, 0, width, height);
    solveAndDraw();
    moveAndDraw();
    window.requestAnimationFrame(enterFrame);
};

var mouseMove = function (e) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
};

window.requestAnimationFrame(enterFrame);
canvas.addEventListener("mousemove", mouseMove);
</script>
<div id="demo">
    <canvas id="canvas" width="800" height="200">no canvas, no shlanvas</canvas>
</div>

[/html]

[html]
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
.russian-river {
  position: relative;
  display: inline-block;
}

h17 {
  margin: 0;
  font-size: 128px;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fcf5ed;
  text-shadow:
    /* grey part - static */
    -1px -1px #34342f,
    1px 1px #34342f,
    2px 2px #34342f,
    3px 3px #34342f,
    4px 4px #34342f,
    5px 5px #34342f,
    6px 6px #34342f,
    7px 7px #34342f,
    /* red part - dynamic */
    0 8px #da5845,
    0 9px #da5845,
    0 10px #da5845,
    0 11px #da5845,
    0 12px #da5845,
    0 13px #da5845,
    0 14px #da5845,
    0 15px #da5845,
    0 16px #da5845,
    0 17px #da5845,
    0 18px #da5845,
    1px 8px #da5845,
    1px 9px #da5845,
    1px 10px #da5845,
    1px 11px #da5845,
    1px 12px #da5845,
    1px 13px #da5845,
    1px 14px #da5845,
    1px 15px #da5845,
    1px 16px #da5845,
    1px 17px #da5845,
    1px 18px #da5845,
    2px 8px #da5845,
    2px 9px #da5845,
    2px 10px #da5845,
    2px 11px #da5845,
    2px 12px #da5845,
    2px 13px #da5845,
    2px 14px #da5845,
    2px 15px #da5845,
    2px 16px #da5845,
    2px 17px #da5845,
    2px 18px #da5845,
    3px 8px #da5845,
    3px 9px #da5845,
    3px 10px #da5845,
    3px 11px #da5845,
    3px 12px #da5845,
    3px 13px #da5845,
    3px 14px #da5845,
    3px 15px #da5845,
    3px 16px #da5845,
    3px 17px #da5845,
    3px 18px #da5845,
    4px 8px #da5845,
    4px 9px #da5845,
    4px 10px #da5845,
    4px 11px #da5845,
    4px 12px #da5845,
    4px 13px #da5845,
    4px 14px #da5845,
    4px 15px #da5845,
    4px 16px #da5845,
    4px 17px #da5845,
    4px 18px #da5845,
    5px 8px #da5845,
    5px 9px #da5845,
    5px 10px #da5845,
    5px 11px #da5845,
    5px 12px #da5845,
    5px 13px #da5845,
    5px 14px #da5845,
    5px 15px #da5845,
    5px 16px #da5845,
    5px 17px #da5845,
    5px 18px #da5845,
    6px 8px #da5845,
    6px 9px #da5845,
    6px 10px #da5845,
    6px 11px #da5845,
    6px 12px #da5845,
    6px 13px #da5845,
    6px 14px #da5845,
    6px 15px #da5845,
    6px 16px #da5845,
    6px 17px #da5845,
    6px 18px #da5845,
    7px 8px #da5845,
    7px 9px #da5845,
    7px 10px #da5845,
    7px 11px #da5845,
    7px 12px #da5845,
    7px 13px #da5845,
    7px 14px #da5845,
    7px 15px #da5845,
    7px 16px #da5845,
    7px 17px #da5845,
    7px 18px #da5845;
}

.first-letter, .last-letter {
  font-size: 160px;
  position: relative;
  top: 23px;
}

[class^="trigger"] {
  position: absolute;
  width: 20%;
  height: 100%;
  z-index:2;
}

.trigger2 {left: 20%;}
.trigger3 {left: 40%;}
.trigger4 {left: 60%;}
.trigger5 {left: 80%;}

.trigger1:hover ~ h17 {
  text-shadow:
    /* grey part - static */
    -1px -1px #34342f,
    1px 1px #34342f,
    2px 2px #34342f,
    3px 3px #34342f,
    4px 4px #34342f,
    5px 5px #34342f,
    6px 6px #34342f,
    7px 7px #34342f,
    /* red part - dynamic */
    8px 8px #da5845,
    8px 9px #da5845,
    9px 10px #da5845,
    9px 11px #da5845,
    10px 12px #da5845,
    10px 13px #da5845,
    11px 14px #da5845,
    11px 15px #da5845,
    12px 16px #da5845,
    12px 17px #da5845,
    13px 18px #da5845;
}

.trigger2:hover ~ h17 {
  text-shadow:
    /* grey part - static */
    -1px -1px #34342f,
    1px 1px #34342f,
    2px 2px #34342f,
    3px 3px #34342f,
    4px 4px #34342f,
    5px 5px #34342f,
    6px 6px #34342f,
    7px 7px #34342f,
    /* red part - dynamic */
    8px 8px #da5845,
    8px 9px #da5845,
    8px 10px #da5845,
    9px 11px #da5845,
    9px 12px #da5845,
    9px 13px #da5845,
    10px 14px #da5845,
    10px 15px #da5845,
    10px 16px #da5845,
    11px 17px #da5845,
    11px 18px #da5845;
}

.trigger4:hover ~ h17 {
  text-shadow:
    /* grey part - static */
    -1px -1px #34342f,
    1px 1px #34342f,
    2px 2px #34342f,
    3px 3px #34342f,
    4px 4px #34342f,
    5px 5px #34342f,
    6px 6px #34342f,
    7px 7px #34342f,
    /* red part - dynamic */
    -1px 1px #da5845,
    -1px 2px #da5845,
    -1px 3px #da5845,
    -2px 4px #da5845,
    -2px 5px #da5845,
    -2px 6px #da5845,
    -3px 7px #da5845,
    -3px 8px #da5845,
    -3px 9px #da5845,
    -4px 10px #da5845,
    -4px 11px #da5845,
    -4px 12px #da5845,
    -5px 13px #da5845,
    -5px 14px #da5845,
    -5px 15px #da5845,
    -6px 16px #da5845,
    -6px 17px #da5845,
    -6px 18px #da5845,
    
    6px 8px #da5845,
    6px 9px #da5845,
    6px 10px #da5845,
    5px 11px #da5845,
    5px 12px #da5845,
    5px 13px #da5845,
    4px 14px #da5845,
    4px 15px #da5845,
    4px 16px #da5845,
    3px 17px #da5845,
    3px 18px #da5845;;
}

.trigger5:hover ~ h17 {
  text-shadow:
    /* grey part - static */
    -1px -1px #34342f,
    1px 1px #34342f,
    2px 2px #34342f,
    3px 3px #34342f,
    4px 4px #34342f,
    5px 5px #34342f,
    6px 6px #34342f,
    7px 7px #34342f,
    /* red part - dynamic */
    -1px 1px #da5845,
    -1px 2px #da5845,
    -2px 3px #da5845,
    -2px 4px #da5845,
    -3px 5px #da5845,
    -3px 6px #da5845,
    -4px 7px #da5845,
    -4px 8px #da5845,
    -5px 9px #da5845,
    -5px 10px #da5845,
    -6px 11px #da5845,
    -6px 12px #da5845,
    -7px 13px #da5845,
    -7px 14px #da5845,
    -8px 15px #da5845,
    -8px 16px #da5845,
    -9px 17px #da5845,
    -9px 18px #da5845,
    
    6px 8px #da5845,
    6px 9px #da5845,
    5px 10px #da5845,
    5px 11px #da5845,
    4px 12px #da5845,
    4px 13px #da5845,
    3px 14px #da5845,
    3px 15px #da5845,
    2px 16px #da5845,
    2px 17px #da5845,
    1px 18px #da5845;
}

</style>
<div class="russian-river">
  <div class="trigger1"></div>
  <div class="trigger2"></div>
  <div class="trigger3"></div>
  <div class="trigger4"></div>
  <div class="trigger5"></div>
  <h17><span class="first-letter">R</span>ussian Rive<span class="last-letter">r</span></h17>
</div>
[/html]

[html]
<style>
.panel {
  position:relative;
  display:inline-block;
  width:12.5vw;
  max-width:200px;
  height:25vw;
  margin:5vw 1vw;
  background: rgb(255, 255, 255);
  box-shadow:0 5px 10px rgba(0,0,0,.5);
  border-radius:.25vw;
  overflow:hidden;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.panel:nth-child(2), .panel:nth-child(4) {
  margin:2.5vw 1vw;
  height:30vw;
}
.panel:nth-child(3) {
  height:35vw;
  margin:0 1vw;
}

.panel div {
  position:absolute;
  mix-blend-mode:multiply;
}
.panel .triangle {
  clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
}
.panel .circle {
  border-radius:50%;
}

label {
  width:100px;
  display:block;
  font-size:14px;
  font-family:sans-serif;
  text-align:center;
  color:white;
  position:fixed;
  bottom:35px;
  left:10px;
  left:calc(50% - 50px);
}
#interior_elements {
  width:100px;
  position:fixed;
  bottom:10px;
  left:calc(50% - 50px);
}
</style>
<script>
const divs = document.querySelectorAll('div')
function fillPanels() {
  var elementCount = document.querySelector('input').value
  divs.forEach(function(el){
    el.innerHTML = ''
    function addElement() {
      var d = document.createElement('div')
      var shape = Math.random() < .5 ? 'triangle' : 'circle'
      d.className = Math.random() < .5 ? shape : 'square'
      var size = Math.ceil(Math.random()*7) + 'vw';
      d.style.width = size
      d.style.height = size
      var color = 'hsl('+(Math.random()*360)+'deg, 100%, 60%)'
      if(Math.random() < .5) {
        d.style.backgroundColor = color 
      } else {
        d.style.backgroundImage = 'linear-gradient(to bottom, transparent 4px , '+color+' 4px, '+color+' 5px, transparent 5px)'
      }      
      d.style.backgroundSize = '100% 6px'
      d.style.left = Math.random()*100 + '%'
      d.style.top = Math.random()*100 + '%'
      d.style.transform = 'rotate('+Math.random()*360+'deg)'
      el.appendChild(d)
    }

    for(var i=0;i<elementCount;i++) {
      addElement()  
    }
  })  
}

fillPanels()

window.addEventListener('click', fillPanels)
document.querySelector('input').addEventListener('change', fillPanels)
</script>
<div class='panel'></div>
<div class='panel'></div>
<div class='panel'></div>
<div class='panel'></div>
<div class='panel'></div>

<label for="interior_elements">Interior Shapes:</label>
<input type="number" id="interior_elements" name="interior_elements" min="1" max="50" value="5">
[/html]