Сделать яйцо на Пасху на HTML

#javascript #html #css #svg #canvas

Задача – сделать пасхальное яйцо используя любые WEB технологии.

HTML, CSS, SVG, Canvas, JavaScript можно использовать любые техники и приёмы.
    

Ответы

Ответ 1

Пасхальное яйцо с помощью Canvas и JavaScript:



var canvas = document.getElementById('canvas'),
	canvas2 = document.createElement('canvas'),
	ctx = canvas.getContext('2d'),
	ctx2 = canvas2.getContext('2d');

canvas2.width = canvas2.height = 50;

ctx2.lineWidth = 5;
ctx2.fillStyle = '#8f0';
ctx2.fillRect(0, 0, 50, 50);
ctx2.strokeStyle = '#80f';
ctx2.fillStyle = '#0ae';

ctx2.beginPath();
ctx2.moveTo(0, 25);
ctx2.lineTo(25, 0);
ctx2.lineTo(50, 25);
ctx2.lineTo(25, 50);
ctx2.lineTo(0, 25);
ctx2.stroke();
ctx2.fill();

ctx2.strokeStyle = '#8f0';
ctx2.fillStyle = '#00ae00';
ellipse(ctx2, 25, 25, 15, 15);
ctx2.fill();
ctx2.fillStyle = '#80f';
ellipse(ctx2, 25, 25, 9, 9);
ctx2.fill();
ctx2.stroke();

ctx.lineWidth = 2;
//следующая строка будет работать не везде
//ctx.ellipse(130, 195, 125, 170, 0, 0, 2 * Math.PI);
ellipse(ctx, 130, 195, 125, 170);

ctx.strokeStyle = '#80f';
ctx.fillStyle = ctx.createPattern(canvas2, 'repeat');
ctx.fill();
ctx.stroke();

ctx.font = 'bold 164px "Palatino Linotype",serif';
ctx.fillStyle = '#ddd';
ctx.fillText('ХВ', 20, 250);
ctx.strokeText('ХВ', 20, 250);

//stackoverflow.com/a/8372834/
function ellipse(ctx, cx, cy, rx, ry)
{
	ctx.save();
	ctx.beginPath(); 
	ctx.translate(cx - rx, cy - ry);
	ctx.scale(rx, ry);
	ctx.arc(1, 1, 1, 0, 2 * Math.PI, false);
	ctx.restore();
}



Ответ 2

CSS код сгенерирован с помощью scss. Для подборки гармоничного сочетания цветов использовано
одинаковое равномерное смещение hue в HSL системе координат для цветов.

$baseColor: hsl(225, 100%, 84%);

@for $i from 0 through 11 {
  .c#{$i} { fill: adjust-hue($baseColor, 36 * $i); };
}


Использованы паттерны и flip-ы.

Смотреть в полноэкранном режиме.



html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 100%;
}

.str {
  stroke: #7247cb;
  stroke-width: 5px;
}

.str2 {
  stroke: #7247cb;
  stroke-width: 2px;
}

.c0 {
  fill: #adc2ff;
}

.c1 {
  fill: #caadff;
}

.c2 {
  fill: #fbadff;
}

.c3 {
  fill: #ffadd2;
}

.c4 {
  fill: #ffbaad;
}

.c5 {
  fill: #ffebad;
}

.c6 {
  fill: #e2ffad;
}

.c7 {
  fill: #b1ffad;
}

.c8 {
  fill: #adffda;
}

.c9 {
  fill: #adf3ff;
}

.c10 {
  fill: #adc2ff;
}

.c11 {
  fill: #caadff;
}



Ответ 3

Яйцо, нарисованное в Inkscape: