Skip to content

Instantly share code, notes, and snippets.

@zarazum

zarazum/index.html

Created May 19, 2015 17:35
Show Gist options
  • Save zarazum/39dd8851346b14ea16fc to your computer and use it in GitHub Desktop.
Save zarazum/39dd8851346b14ea16fc to your computer and use it in GitHub Desktop.
Download ZIP
Homework 00 // source http://jsbin.com/pojava
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Homework 00</title>
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Serif:400,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<style id="jsbin-css">
body{
color: #ffffaa;
font-family: 'Noto Serif', serif;
font-size: 12px;
text-align: center;
}
div{
width: 400px;
height: 400px;
margin: 20px auto;
}
h1{
position: relative;
top: -400px;
font-size: 4em;
line-height: 1.2em;
}
h2{
position: relative;
top: -400px;
font-family: 'Noto Serif', serif;
font-weight: 700;
font-style: italic;
font-size: 2em;
text-align: center;
}
span.pixelate{
font-family: 'Press Start 2P', cursive;
font-size:0.7em;
}
#zCanvas{
position: relative;
top: -20px;
}
#flag{
position: relative;
top: -400px;
}
.frame{
background: #424242;
padding: 20px;
}
.description{
margin-top: -20px;
background: #ffffaa;
color: #424242;
padding: 20px;
text-align: left;
}
/* flag */
rect{
}
</style>
</head>
<body>
<div class="frame">
<canvas id="zCanvas" width=400 height=400></canvas>
<svg xmlns="http://www.w3.org/2000/svg"
width="100" height="100" viewBox="0,0,1,1" id="flag">
<!-- Define a gradient -->
<defs>
<radialGradient id="zRadGradient">
<stop offset="10%" stop-color="#ffffaa"/>
<stop offset="95%" stop-color="rgba(33, 33, 33, 0.75)"/>
</radialGradient>
</defs>
<rect width="1" height="1" x="0" rx="0.1" fill="rgba(33, 33, 33, 0.75)" />
<!-- Eyes -->
<rect width="0.4" height="0.4" x="0" rx="1" fill="url(#zRadGradient)" />
<rect width="0.4" height="0.4" x="0.6" fill="url(#zRadGradient)" />
<!-- Nose -->
<rect width="0.1" height="0.1" x="0.35" y="0.5" fill="#ffffaa" />
<rect width="0.1" height="0.1" x="0.55" y="0.5" fill="#ffffaa" />
<!-- Mouth -->
<rect width="0.02" height="0.1" x="0.2" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.24" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.28" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.32" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.36" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.40" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.44" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.48" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.52" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.56" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.60" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.64" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.68" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.72" y="0.8" fill="#ffffaa" />
<rect width="0.02" height="0.1" x="0.76" y="0.8" fill="#ffffaa" />
</svg>
<h1>Кружок <span class="pixelate">вёрстки</span></h1>
<h2>и&nbsp;шитья</h2>
</div>
<div class="description">
<p>Здесь будет текст, всем текстам текст, и пафоса в нём будет — завались.</p>
<p>Здесь будет текст, всем текстам текст, и пафоса в нём будет — завались.</p>
<p>Здесь будет текст, всем текстам текст, и пафоса в нём будет — завались.</p>
</div>
<script id="jsbin-javascript">
var width = 400,
height = 400;
var ctx = document.getElementById('zCanvas').getContext('2d');
var lastX = width * Math.random();
var lastY = height * Math.random();
var hue = 0;
function line() {
var i;
ctx.save();
ctx.translate(width/2, height/2);
ctx.scale(0.9, 0.9);
ctx.translate(-width/2, -height/2);
ctx.beginPath();
ctx.lineWidth = 5 + Math.random() * 10;
ctx.moveTo(lastX, lastY);
lastX = width * Math.random();
lastY = height * Math.random();
for(i = 0; i<5; i++){
ctx.bezierCurveTo(width * Math.random(),
height * Math.random(),
width * Math.random(),
height * Math.random(),
lastX, lastY);
hue = hue + 10 * Math.random();
ctx.strokeStyle = 'hsl(' + hue + ', 75%, 30%)';
}
ctx.shadowColor = 'white';
ctx.shadowBlur = 20;
ctx.stroke();
ctx.restore();
}
setInterval(line, 20);
function blank() {
ctx.fillStyle = 'rgba(66, 66, 66, 0.5)';
ctx.fillRect(0, 0, width, height);
}
setInterval(blank, 20);
</script>
<script id="jsbin-source-css" type="text/css">
body{
color: #ffffaa;
font-family: 'Noto Serif', serif;
font-size: 12px;
text-align: center;
}
div{
width: 400px;
height: 400px;
margin: 20px auto;
}
h1{
position: relative;
top: -400px;
font-size: 4em;
line-height: 1.2em;
}
h2{
position: relative;
top: -400px;
font-family: 'Noto Serif', serif;
font-weight: 700;
font-style: italic;
font-size: 2em;
text-align: center;
}
span.pixelate{
font-family: 'Press Start 2P', cursive;
font-size:0.7em;
}
#zCanvas{
position: relative;
top: -20px;
}
#flag{
position: relative;
top: -400px;
}
.frame{
background: #424242;
padding: 20px;
}
.description{
margin-top: -20px;
background: #ffffaa;
color: #424242;
padding: 20px;
text-align: left;
}
/* flag */
rect{
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var width = 400,
height = 400;
var ctx = document.getElementById('zCanvas').getContext('2d');
var lastX = width * Math.random();
var lastY = height * Math.random();
var hue = 0;
function line() {
var i;
ctx.save();
ctx.translate(width/2, height/2);
ctx.scale(0.9, 0.9);
ctx.translate(-width/2, -height/2);
ctx.beginPath();
ctx.lineWidth = 5 + Math.random() * 10;
ctx.moveTo(lastX, lastY);
lastX = width * Math.random();
lastY = height * Math.random();
for(i = 0; i<5; i++){
ctx.bezierCurveTo(width * Math.random(),
height * Math.random(),
width * Math.random(),
height * Math.random(),
lastX, lastY);
hue = hue + 10 * Math.random();
ctx.strokeStyle = 'hsl(' + hue + ', 75%, 30%)';
}
ctx.shadowColor = 'white';
ctx.shadowBlur = 20;
ctx.stroke();
ctx.restore();
}
setInterval(line, 20);
function blank() {
ctx.fillStyle = 'rgba(66, 66, 66, 0.5)';
ctx.fillRect(0, 0, width, height);
}
setInterval(blank, 20);</script></body>
</html>
Raw
jsbin.pojava.css
body{
color: #ffffaa;
font-family: 'Noto Serif', serif;
font-size: 12px;
text-align: center;
}
div{
width: 400px;
height: 400px;
margin: 20px auto;
}
h1{
position: relative;
top: -400px;
font-size: 4em;
line-height: 1.2em;
}
h2{
position: relative;
top: -400px;
font-family: 'Noto Serif', serif;
font-weight: 700;
font-style: italic;
font-size: 2em;
text-align: center;
}
span.pixelate{
font-family: 'Press Start 2P', cursive;
font-size:0.7em;
}
#zCanvas{
position: relative;
top: -20px;
}
#flag{
position: relative;
top: -400px;
}
.frame{
background: #424242;
padding: 20px;
}
.description{
margin-top: -20px;
background: #ffffaa;
color: #424242;
padding: 20px;
text-align: left;
}
/* flag */
rect{
}
Raw
jsbin.pojava.js
var width = 400,
height = 400;
var ctx = document.getElementById('zCanvas').getContext('2d');
var lastX = width * Math.random();
var lastY = height * Math.random();
var hue = 0;
function line() {
var i;
ctx.save();
ctx.translate(width/2, height/2);
ctx.scale(0.9, 0.9);
ctx.translate(-width/2, -height/2);
ctx.beginPath();
ctx.lineWidth = 5 + Math.random() * 10;
ctx.moveTo(lastX, lastY);
lastX = width * Math.random();
lastY = height * Math.random();
for(i = 0; i<5; i++){
ctx.bezierCurveTo(width * Math.random(),
height * Math.random(),
width * Math.random(),
height * Math.random(),
lastX, lastY);
hue = hue + 10 * Math.random();
ctx.strokeStyle = 'hsl(' + hue + ', 75%, 30%)';
}
ctx.shadowColor = 'white';
ctx.shadowBlur = 20;
ctx.stroke();
ctx.restore();
}
setInterval(line, 20);
function blank() {
ctx.fillStyle = 'rgba(66, 66, 66, 0.5)';
ctx.fillRect(0, 0, width, height);
}
setInterval(blank, 20);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment