Дата и время Сделать страницу стартовой


Выбирите цвет фона страницы

Canvas..

Обновите браузер
2 3
20 21

Svg

My first SVG










Try it Yourself »


Try it Yourself »




И русский текст в svg печатать можно.
И русский текст в svg печатать можно.
span x="10" y="70">Second line.
I love SVG!
filter>
Your browser does not support the canvas element.
Sorry, your browser does not support inline SVG.
Your browser does not support the canvas element.

Sorry, your browser does not support inline SVG.
Sorry, your browser does not support inline SVG.
Sorry, your browser does not support inline SVG.
Sorry, your browser does not support inline SVG.
Sorry, your browser does not support inline SVG.

Ваш браузер не поддерживает рисование.


Вращающийся символ

Спираль

Световое пятно

текст

Полосы - в низ.
<canvas id=c></canvas>
<canvas id=bg></canvas>
body {
background-color:black;
}
#c {
opacity:.8;
}
canvas {
position:absolute;
top:0; left:0;
}
    //initial
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),

//parameters
total = w,
accelleration = .05,

//afterinitial calculations
size = w/total,
occupation = w/total,
repaintColor = 'rgba(0, 0, 0, .04)'
colors = [],
dots = [],
dotsVel = [];

//setting the colors' hue
//and y level for all dots
var portion = 360/total;
for(var i = 0; i < total; ++i){
colors[i] = portion * i;

dots[i] = h;
dotsVel[i] = 10;
}

function anim(){
window.requestAnimationFrame(anim);

ctx.fillStyle = repaintColor;
ctx.fillRect(0, 0, w, h);

for(var i = 0; i < total; ++i){
var currentY = dots[i] - 1;
dots[i] += dotsVel[i] += accelleration;

ctx.fillStyle = 'hsl('+ colors[i] + ', 80%, 50%)';
ctx.fillRect(occupation * i, currentY, size, dotsVel[i] + 1);

if(dots[i] > h && Math.random() < .01){
dots[i] = dotsVel[i] = 0;
}
}
}

anim();



© 2017