<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mistic100/pen/zAren?depth=everything&order=popularity&page=9&q=page&show_forks=false" />
<style class="cp-pen-styles">@font-face {
font-family:'Ubuntu';
font-style:normal;
font-weight:700;
src:local('Ubuntu Bold'), local('Ubuntu-Bold'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/0ihfXUL2emPh0ROJezvraD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
html, body {
padding:0; margin:0;
height:100%; width:100%;
}
body {
font-family:"Calibri",sans-serif;
background:radial-gradient(#fff, #ccc);
background:radial-gradient(#ffffff, #fdfdfd 16%, #fbfbfb 33%, #f8f8f8 49%, #efefef 66%, #dfdfdf 82%, #bfbfbf 100%);
}
#notfound {
margin:0 auto;
}
#notfound svg {
-webkit-animation: noise 2s linear infinite;
animation: noise 2s linear infinite;
}
@-webkit-keyframes noise {
0%, 3%, 5%, 42%, 44%, 100% { -webkit-transform: scaleY(1); }
4.3% { -webkit-transform: scaleY(1.7); }
43% { -webkit-transform: scaleX(1.5); }
}
@keyframes noise {
0%, 3%, 5%, 42%, 44%, 100% { transform: scaleY(1); }
4.3% { transform: scaleY(1.7); }
43% { transform: scaleX(1.5); }
}
p {
text-align:center;
}
p.small {
font-size:0.8em;
opacity:0.5;
}</style></head><body>
<p>
Logo for the 404 page of <a href="https://www.strangeplanet.fr/">my website</a>
</p>
<div id="notfound"></div>
<p class="small">
<b>Inspirations:</b><br>
<a href="https://codepen.io/mistic100/pen/GFHkm">Colorful Tiles</a> by mistic100<br>
<a href="https://codepen.io/jorgeatgu/pen/zmAnr">SVG error 404</a> by jorgeatgu<br>
<a href="https://codepen.io/kaypooma/pen/ehfjC">Glitchy 404 Page</a> by kaypooma<br>
</p>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/svg.js/1.0.0-rc.8/svg.min.js'></script><script src='https://strangeplanet.fr/files/misc/perlin-noise-simplex.js'></script>
<script >if (!SVG.supported) {
alert('SVG not supported !');
}
else {
// parameters
var a = 40,
speed = 50,
points = [
[ , ,1,1, , ,1,1, , ,1,1,1,1,1,1, , ,1,1, , ,1,1],
[ ,1,1, , ,1,1, , ,1,1, , ,1,1, , ,1,1, , ,1,1, ],
[1,1,1,1,1,1, , ,1,1, , ,1,1, , ,1,1,1,1,1,1, , ],
[ , , ,1,1, , ,1,1, , ,1,1, , , , , , ,1,1, , , ],
[ , ,1,1, , ,1,1,1,1,1,1, , , , , , ,1,1, , , , ]
],
colors = [
'#ED1156', '#ED194E', '#ED2247', '#ED2B3F', '#EE3438',
'#EE3D31', '#EE4529', '#EF4E22', '#EF571A', '#EF6013',
'#F0690C', '#E8720E', '#E17B10', '#D98512', '#D28E14',
'#CB9816', '#C3A118', '#BCAA1A', '#B4B41C', '#ADBD1E',
'#A6C721', '#96C62F', '#87C53E', '#78C44D', '#69C35C',
'#5AC26B', '#4AC17A', '#3BC089', '#2CBF98', '#1DBEA7',
'#0EBDB6', '#0EBAB0', '#0EB8AA', '#0EB5A4', '#0EB39E',
'#0EB098', '#0EAE92', '#0EAB8C', '#0EA986', '#0EA680',
'#0EA47B', '#269376', '#3F8372', '#58736E', '#71626A',
'#895266', '#A24262', '#BB315E', '#D4215A'
],
shadowColors = ['#0055ff', '#ff0000'],
textColors = ['#012C33', '#12575E'];
// computed parameters
var a2 = a/2,
h = Math.round(a2*Math.sqrt(3) *100)/100,
grid = [points[0].length, points.length],
size = [(grid[0]/2+0.5)*a+a*2, grid[1]*h+a*3],
nb_colors = colors.length,
objects = [],
groups = [];
// init canvas
var container = document.getElementById('notfound');
container.style.width = size[0]+'px';
container.style.height = size[1]+'px';
var simplex = new SimplexNoise(),
paper = SVG(container).size(size[0], size[1]).viewbox(0, 0, size[0], size[1]);
up = paper.defs().path('M'+ a2 +',0 l'+ a2 +','+ h +' l-'+ a +',0 l'+ a2 +',-'+ h),
down = paper.defs().path('M0,0 l'+ a +',0 l-'+ a2 +','+ h +' -'+ a2 +',-'+ h),
shadow = [paper.group(), paper.group()];
// draw objects
for (var l=0; l<grid[1]; l++) {if (window.CP.shouldStopExecution(2)){break;}
objects[l] = [];
groups[l] = paper.group();
for (var c=0; c<grid[0]; c++) {if (window.CP.shouldStopExecution(1)){break;}
if (!points[l][c]) {
continue;
}
var rnd = Math.round((simplex.noise(c/10, l/10)+1) / 2 * nb_colors),
cid = rnd - Math.floor(rnd/nb_colors)*nb_colors,
pos = [c*a2+a, l*h+a],
use;
if ((l%2==0 && c%2==0) || (l%2==1 && c%2==1)) {
use = up;
}
else {
use = down;
}
var el = paper.use(use)
.move(pos[0], pos[1])
.style('fill:'+colors[cid])
.data('i', rnd);
groups[l].add(el);
objects[l][c] = el;
shadow[0].use(use).move(pos[0], pos[1]);
shadow[1].use(use).move(pos[0], pos[1]);
}
window.CP.exitedLoop(1);
}
window.CP.exitedLoop(2);
// draw text
var text = paper.text('Page not found!')
.font({
family: 'Ubuntu, Calibri',
size: a
})
.opacity(0.7)
.cx(size[0]/2-a2)
.y(size[1]-a-a2);
shadow[0].add(text.clone());
shadow[1].add(text.clone());
text.fill(
paper.gradient('linear', function(stop) {
stop.at(0, textColors[0]);
stop.at(1, textColors[1]);
}).from(0,0).to(0,1)
);
// animate shadows
shadow[0].back()
.fill(shadowColors[0])
.animate(speed*4).loop()
.during(function(i) {
if (i<0.1)
this.move(-a/4, 0);
else if (i>=0.8)
this.move(a/12, 0);
if (i<0.1)
this.opacity(0.1);
else if (i>=0.4 && i<0.5)
this.opacity(0.5);
else if (i>=0.7 && i<0.8)
this.opacity(0.3)
else if (i>=0.9)
this.opacity(0.6);
else
this.opacity(0);
});
shadow[1].back()
.fill(shadowColors[1])
.animate(speed*6).loop()
.during(function(i) {
if (i<0.1)
this.move(a/4, 0);
else if (i>=0.8)
this.move(-a/12, 0);
if (i<0.1)
this.opacity(0.1);
else if (i>=0.4 && i<0.5)
this.opacity(0.5);
else if (i>=0.7 && i<0.8)
this.opacity(0.3)
else if (i>=0.9)
this.opacity(0.6);
else
this.opacity(0);
});
var counter = 0;
setInterval(function() {
// animate position
for (var l=0, i=groups.length; l<i; l++) {if (window.CP.shouldStopExecution(3)){break;}
if (Math.random()<0.5) {
groups[l].x(Math.round(Math.random()*a/5));
}
}
window.CP.exitedLoop(3);
// animate colors
for (var l=0, i=objects.length; l<i; l++) {if (window.CP.shouldStopExecution(5)){break;}
for (var c=0, j=objects[l].length; c<j; c++) {if (window.CP.shouldStopExecution(4)){break;}
if (!objects[l][c]) {
continue;
}
var cid = objects[l][c].data('i') + counter;
cid-= Math.floor(cid/nb_colors)*nb_colors;
objects[l][c].style('fill:'+colors[cid]);
}
window.CP.exitedLoop(4);
}
window.CP.exitedLoop(5);
counter++;
if (counter == nb_colors) {
counter = 0;
}
}, speed);
}
//# sourceURL=pen.js
</script>
</body></html>
