...просто как пример ... может кому пригодится ... адаптировано из примеров с инета, под задачу TC ... в гонке снегоходов не участвую.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
height: 500px;
background-color: rgba(224, 255, 255, 1);
}
.ddd{
height: 45px;
width: 300px;
background-color: rgba(133, 224, 255, 1) ;
margin: 50px auto;
border-bottom: 15px solid rgba(104, 92, 183, 1);
border-radius: 8px;
}
</style>
<script>
(function() {
function d(a) {
return Math.floor(a * Math.random())
}
function l() {
k = document.querySelector(".ddd");
c = document.createElement("canvas");
c.style.position = "fixed";
c.style.top = "0px";
c.style.left = "0px";
c.style.zIndex = "-10";
document.body.insertBefore(c, document.body.firstChild);
a = c.getContext("2d");
m();
n = setInterval(t, x);
setInterval(y, z);
window.addEventListener("resize", m, !1)
}
function m() {
p = !0;
c.width = document.body.offsetWidth;
c.height = window.innerHeight
}
function e(f, c) {
a.save();
0 == f ? a.lineTo(c, 0) : (a.scale(1 / 3, 1 / 3), e(f - 1, c), a.rotate(60 *
g), e(f - 1, c), a.rotate(-120 * g), e(f - 1, c), a.rotate(60 * g), e(f - 1, c));
a.restore();
a.translate(c, 0)
}
function h(a) {
a = a.getBoundingClientRect();
return {
top: a.bottom + pageYOffset,
left: a.left + pageXOffset
}
}
function t() {
var a = 2 + d(2),
c = 10 * a + d(10),
b = h(k).left + d(200),
e = h(k).top,
g = q[d(q.length)];
r.push({
x: b,
y: e,
vx: 0,
vy: 3 + d(3),
angle: 0,
size: c,
order: a,
stroke: g,
fill: "transparent"
});
r.length > A && clearInterval(n)
}
function y() {
a.clearRect(0, 0, c.width, c.height);
for (var f = c.height, u = 0; u < r.length; u++) {
var b = r[u];
b.y += b.vy;
b.x +=
b.vx;
b.y > f && (b.y = h(k).top, b.x = h(k).left + d(200));
p && (b.x = h(k).left + d(200));
var l = b.x,
m = b.y,
n = b.angle,
v = b.size,
w = b.order,
q = b.stroke,
t = b.fill;
a.save();
a.strokeStyle = q;
a.fillStyle = t;
a.beginPath();
a.translate(l, m);
a.moveTo(0, 0);
a.rotate(n);
e(w, v);
a.rotate(-120 * g);
e(w, v);
a.rotate(-120 * g);
e(w, v);
a.closePath();
a.fill();
a.stroke();
a.restore();
1 == d(4) && (b.vx += (d(11) - 5) / 10);
2 < b.vx && (b.vx = 2); - 2 > b.vx && (b.vx = -2);
1 == d(3) && (b.angle = (d(13) - 6) / 271)
}
p && (p = !1)
}
if (document.createElement("canvas").getContext) {
"complete" ===
document.readyState ? l() : window.addEventListener("DOMContentLoaded", l, !1);
var g = Math.PI / 180,
A = 20,
r = [],
z = 64,
x = 500,
c, a, n, p = !1,
q = "#6cf #9cf #99f #ccf #66f #3cf".split(" "),
k;
}
})();
</script>
</head>
<body>
<div class="ddd"></div>
</body>
</html>