Updates
This commit is contained in:
Joshua Seigler
parent
378ffd22df
commit
49092fb0df
380 changed files with 100 additions and 13608 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 218 KiB |
|
|
@ -1,155 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<title>Cloudscape</title>
|
||||
<style>
|
||||
*,
|
||||
:before,
|
||||
:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #859cc4;
|
||||
background-image: linear-gradient(to bottom, #4379ef, #859cc4);
|
||||
background-size: 100% 80vh;
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
--cloudyHeaderBottom: max(35vh, 10rem);
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0 auto;
|
||||
max-width: 80rem;
|
||||
}
|
||||
|
||||
:root {
|
||||
padding: 40vh 1rem 1rem;
|
||||
font-size: 1.2em;
|
||||
font-family: Inter, sans-serif;
|
||||
--scrollLengthPx: 0;
|
||||
}
|
||||
|
||||
.scene {
|
||||
--durationSeconds: 120;
|
||||
--duration: calc(var(--durationSeconds) * 1s);
|
||||
--viewPointDelta: var(--cloudyHeaderBottom);
|
||||
--travelDistance: 200vh;
|
||||
z-index: -2;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100lvh;
|
||||
overflow: hidden;
|
||||
perspective: calc(0.25 * var(--cloudyHeaderBottom) + 0.75 * 35vmax);
|
||||
perspective-origin: 50vw 80vh;
|
||||
}
|
||||
|
||||
.sky {
|
||||
transform-style: preserve-3d;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
--duration: 240s;
|
||||
}
|
||||
|
||||
.cloud {
|
||||
--height: 90vh;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: -205vw;
|
||||
right: -205vw;
|
||||
top: calc(8vh - var(--viewPointDelta));
|
||||
height: var(--height);
|
||||
background-image: url("cloud.png");
|
||||
background-size: auto 100%;
|
||||
background-repeat: repeat-x;
|
||||
background-position: calc(50% + cos(230 * var(--n)) * var(--height)) 50%;
|
||||
animation-name: zoom;
|
||||
animation-duration: var(--duration);
|
||||
animation-timing-function: linear;
|
||||
animation-delay: calc(-0.1 * var(--duration) * var(--n));
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
#brand {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: calc(-35vh + var(--viewPointDelta));
|
||||
font-family: Inter, sans-serif;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: min(8vmax, 15vw, 7.7rem);
|
||||
} */
|
||||
|
||||
@keyframes zoom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(
|
||||
0,
|
||||
calc(4 * var(--viewPointDelta)),
|
||||
calc(-1 * var(--travelDistance))
|
||||
);
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(
|
||||
0,
|
||||
calc(-1 * var(--viewPointDelta) + calc(var(--cloudyHeaderBottom) - 35vh)),
|
||||
calc(0.33333 * var(--travelDistance))
|
||||
);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="scene">
|
||||
<div class="sky">
|
||||
<div class="cloud" will-change style="--n: 0"></div>
|
||||
<div class="cloud" will-change style="--n: 1"></div>
|
||||
<div class="cloud" will-change style="--n: 2"></div>
|
||||
<div class="cloud" will-change style="--n: 3"></div>
|
||||
<div class="cloud" will-change style="--n: 4"></div>
|
||||
<div class="cloud" will-change style="--n: 5"></div>
|
||||
<div class="cloud" will-change style="--n: 6"></div>
|
||||
<div class="cloud" will-change style="--n: 7"></div>
|
||||
<div class="cloud" will-change style="--n: 8"></div>
|
||||
<div class="cloud" will-change style="--n: 9"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Rothko Generator</title>
|
||||
<style>
|
||||
body { background: black; }
|
||||
svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 300 400"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<filter id="paint" x="0" y="0">
|
||||
<feTurbulence
|
||||
id="turbSpread"
|
||||
result="turbulenceFine"
|
||||
type="fractalNoise"
|
||||
baseFrequency="4"
|
||||
numOctaves="1"
|
||||
/>
|
||||
<feTurbulence
|
||||
id="turbDistortion"
|
||||
seed="0"
|
||||
result="turbulenceFat"
|
||||
type="fractalNoise"
|
||||
baseFrequency="0.005"
|
||||
numOctaves="5"
|
||||
/>
|
||||
<feDisplacementMap
|
||||
in="SourceGraphic"
|
||||
in2="turbulenceFat"
|
||||
result="sloppy"
|
||||
scale="4"
|
||||
/>
|
||||
<feGaussianBlur in="sloppy" result="blurred" stdDeviation="3" />
|
||||
<feDisplacementMap
|
||||
in="blurred"
|
||||
in2="turbulenceFine"
|
||||
result="final"
|
||||
scale="5"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
<svg
|
||||
viewBox="0 0 300 400"
|
||||
x="0"
|
||||
y="0"
|
||||
width="300"
|
||||
height="400"
|
||||
id="rects"
|
||||
filter="url(#paint)"
|
||||
></svg>
|
||||
<script type="text/javascript">
|
||||
<![CDATA[
|
||||
function randomHsl() {
|
||||
return 'hsl(' + (Math.random() * 360) + ', ' + (Math.pow(Math.random(), 4) * 90 + 10) + '%, '+ (Math.random() * 85 + 5) +'%)';
|
||||
}
|
||||
let stripes = Math.max(1, Math.floor(Math.random() * 4 + 1.7));
|
||||
let gap = Math.pow(Math.random(), 1.5) * 8 + 4;
|
||||
let mainWidth = 300 - gap + Math.random() * 60 - 60;
|
||||
let mainHeight = 400 - gap + Math.random() * 60 - 60;
|
||||
let shapes = Array(stripes);
|
||||
let seed = Math.floor(Math.random() * 100000);
|
||||
document.getElementById('turbSpread').setAttributeNS(null, 'seed', seed);
|
||||
document.getElementById('turbDistortion').setAttributeNS(null, 'seed', seed);
|
||||
for (let i=0; i < stripes; i++) {
|
||||
shapes[i] = {
|
||||
color: randomHsl(),
|
||||
height: Math.random(),
|
||||
width: mainWidth + (Math.random() < 0.2 ? Math.random() * 100 - 50 : 0),
|
||||
opacity: 1 - Math.pow(Math.random(), 5),
|
||||
x: null,
|
||||
y: null
|
||||
};
|
||||
}
|
||||
let totalHeight = 0;
|
||||
for (let i=0; i < stripes; i++) { totalHeight += shapes[i].height; }
|
||||
let heightScale = (mainHeight - (gap * (stripes - 1))) / totalHeight;
|
||||
let cumY = (400 - mainHeight) / 2;
|
||||
for (let i=0; i < stripes; i++) {
|
||||
shapes[i].x = 150 - shapes[i].width / 2;
|
||||
shapes[i].y = cumY;
|
||||
shapes[i].height *= heightScale;
|
||||
cumY += shapes[i].height + gap;
|
||||
}
|
||||
shapes.unshift({
|
||||
color: randomHsl(),
|
||||
height: 500,
|
||||
width: 400,
|
||||
x: -50,
|
||||
y: -50
|
||||
});
|
||||
let domRects = document.getElementById('rects');
|
||||
let xmlns = "http://www.w3.org/2000/svg";
|
||||
for (let i=0; i < shapes.length; i++) {
|
||||
let newRect = document.createElementNS(xmlns, 'rect');
|
||||
newRect.setAttributeNS(null, 'x', shapes[i].x);
|
||||
newRect.setAttributeNS(null, 'y', shapes[i].y);
|
||||
newRect.setAttributeNS(null, 'height', shapes[i].height);
|
||||
newRect.setAttributeNS(null, 'width', shapes[i].width);
|
||||
newRect.setAttributeNS(null, 'fill', shapes[i].color);
|
||||
newRect.setAttributeNS(null, 'opacity', shapes[i].opacity);
|
||||
domRects.appendChild(newRect);
|
||||
}
|
||||
]]>
|
||||
</script>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue