Interactive sunny-side pattern (WebGL + GSAP)

HTML

              
                <div class="page-title">
    <h1>Breakfast</h1>
    <p>&#47;&#712;br&#x025B;kf&#x0259;st&#47;</p>
    <p class="sub-title">noun</p>
    <p>a meal eaten in the morning, the first of the day.</p>
</div>

<canvas id="eggs"></canvas>

<script type="x-shader/x-fragment" id="vertShader">
    precision mediump float;

    varying vec2 vUv;
    attribute vec2 a_position;

    void main() {
        vUv = .5 * (a_position + 1.);
        gl_Position = vec4(a_position, 0.0, 1.0);
    }
</script>

<script type="x-shader/x-fragment" id="fragShader">
    precision mediump float;

    varying vec2 vUv;
    uniform float u_time;
    uniform float u_ratio;
    uniform float u_resolution_scale;
    uniform sampler2D u_click_data_texture;

    #define TWO_PI 6.28318530718

    float rand(float n){ return fract(sin(n) * 43758.5453123); }

    vec3 mod289(vec3 x) { return x - floor(x * (1. / 289.)) * 289.; }
    vec2 mod289(vec2 x) { return x - floor(x * (1. / 289.)) * 289.; }
    vec3 permute(vec3 x) { return mod289(((x*34.)+1.)*x); }
    float snoise(vec2 v) {
        const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
        vec2 i = floor(v + dot(v, C.yy));
        vec2 x0 = v - i + dot(i, C.xx);
        vec2 i1;
        i1 = (x0.x > x0.y) ? vec2(1., 0.) : vec2(0., 1.);
        vec4 x12 = x0.xyxy + C.xxzz;
        x12.xy -= i1;
        i = mod289(i);
        vec3 p = permute(permute(i.y + vec3(0., i1.y, 1.)) + i.x + vec3(0., i1.x, 1.));
        vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.);
        m = m*m;
        m = m*m;
        vec3 x = 2. * fract(p * C.www) - 1.;
        vec3 h = abs(x) - 0.5;
        vec3 ox = floor(x + 0.5);
        vec3 a0 = x - ox;
        m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
        vec3 g;
        g.x = a0.x * x0.x + h.x * x0.y;
        g.yz = a0.yz * x12.xz + h.yz * x12.yw;
        return 130. * dot(m, g);
    }

    vec2 hash(vec2 p) {
        p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
        return fract(sin(p)*18.5453);
    }

    vec2 rotateUV(vec2 uv, float angle) {
        float s = sin(angle), c = cos(angle);
        return mat2(c, -s, s, c) * uv;
    }

    float get_cell_sectors(float angle, vec2 radomizer, float t) {
        float sectors = .5 * (1. + sin((2. + floor(radomizer.y * 2.)) * angle));
        sectors *= (.7 + .5 * sin(angle - 2. * t + radomizer.x));
        sectors *= (.5 + .5 * cos(angle + t));
        return sectors;
    }

    float get_area_around_yellow(float old_area_around_yellow, float dist, float angle, float sectors) {
        float area_around_yellow = max(old_area_around_yellow, .3 * dist * (1. + sin(angle - .6)));
        area_around_yellow += .1 * smoothstep(.0, .3, dist * (1. + 10. * sectors));
        return area_around_yellow;
    }

    float get_yellow(float dist, float radomizer) {
        return (.8 + .6 * radomizer) * dist;
    }

    float get_yellow_hit_area(float old_yellow_hit_area, float dist, float scale) {
        float yellow_hit_area = max(old_yellow_hit_area, dist);
        yellow_hit_area -= .12 * scale * dist;
        return yellow_hit_area;
    }

    float get_yellow_light(float dist, float angle, float radius, float radomizer) {
        float side_arc_light = dist;
        side_arc_light *= (.5 * (1. + sin(angle - .6)));
        side_arc_light *= (1. - smoothstep(.999, 1., radius));
        return radomizer * side_arc_light;
    }

    float get_blick(float old_yellow_blick, float dist, float angle, float radius) {
        float side_arc_blick = dist;
        side_arc_blick *= (.5 * (1. + sin(angle + 3.)));
        side_arc_blick *= (1. - smoothstep(.9994, 1., radius));
        return max(old_yellow_blick, side_arc_blick);
    }

    void main() {

        vec2 uv = vUv;
        uv *= u_resolution_scale;
        uv.y = 1. - uv.y;

        float white = 0.;
        float white_shadow = 0.;
        float area_around_yellow = 0.;
        float yellow = 0.;
        float yellow_hit_area = 0.;
        float yellow_light = 0.;
        float yellow_blick = 0.;

        uv.x *= u_ratio;
        uv.x *= .9;

        float t = u_time;

        for (int i = 0; i < 4; i++) {

            vec2 layer_randomizer = hash(vec2(10. * float(i), 200. * float(i)));
            vec2 layer_offset = hash(vec2(-100. * float(i), 2. * float(i))) - .5;
            float layer_scale = 1.1 - .1 * layer_randomizer.x;

            vec2 layer_uv = rotateUV(uv, layer_randomizer.y * TWO_PI);
            layer_uv += layer_offset;
            layer_uv *= layer_scale;

            vec2 i_uv = floor(layer_uv);
            vec2 f_uv = fract(layer_uv);

            vec2 cell_randomizer = vec2(0.);
            float cell_radius = 1.;
            float cell_angle_local = 0.;

            for (int y = -1; y <= 1; y++) {
                for (int x = -1; x <= 1; x++) {
                    vec2 tile_offset = vec2(float(x), float(y));
                    vec2 o = hash(i_uv + tile_offset);

                    tile_offset += (.5 + .3 * sin(.4 * t + TWO_PI * o)) - f_uv;

                    float dist = dot(tile_offset, tile_offset);
                    if (dist < cell_radius) {
                        cell_radius = dist;
                        cell_angle_local = atan(tile_offset.x, tile_offset.y);
                        cell_randomizer = o;
                    }
                }
            }

            cell_radius = 1. - cell_radius;
            float sectors = get_cell_sectors(cell_angle_local, cell_randomizer, t);
            float cell_angle_global = cell_angle_local - layer_randomizer.y * TWO_PI;
            float wavy_cell_distance = cell_radius + .015 * sectors;
            wavy_cell_distance = pow(wavy_cell_distance, 50. + 100. * cell_randomizer.x);
            float round_cell_distance = cell_radius;
            round_cell_distance = pow(round_cell_distance, 600. - 200. * layer_scale);
            white_shadow += (smoothstep(.0, 1.5, wavy_cell_distance + round_cell_distance));
            white += wavy_cell_distance;
            yellow_hit_area = get_yellow_hit_area(yellow_hit_area, round_cell_distance, layer_scale);
            yellow += get_yellow(round_cell_distance, cell_randomizer.y);
            yellow_light += get_yellow_light(round_cell_distance, cell_angle_global, cell_radius, cell_randomizer.x);
            yellow_blick = get_blick(yellow_blick, round_cell_distance, cell_angle_global, cell_radius);
            area_around_yellow = get_area_around_yellow(area_around_yellow, round_cell_distance, cell_angle_global, sectors);
        }


        for (int i = 0; i < 20; i++) {

            float row = floor(float(i) / 10.) / 2.;
            float col = (float(i) - 10. * floor(float(i) / 10.)) / 10.;
            vec4 data = texture2D(u_click_data_texture, vec2(col, row));

            float x = data[0];
            float y = data[1];
            float pos_offset = data[2];
            float scale = data[3];

            vec2 center = vec2(x, y);

            vec2 layer_uv = vUv - center;
            layer_uv *= (.9 + .4 * rand(center.x));
            layer_uv.x *= u_ratio;
            layer_uv.x *= .9;

            vec2 layer_offset = hash(data.rg * 100.) - .5;
            layer_uv += .25 * pos_offset * sin(.2 * t + 10. * layer_offset);

            float cell_angle = atan(layer_uv.x, layer_uv.y) - .4 * TWO_PI;

            vec2 cell_randomizer = hash(data.rg);
            float cell_radius = 1. - clamp(0., 1., dot(layer_uv, layer_uv));

            float sectors = get_cell_sectors(cell_angle, cell_randomizer, t);
            float wavy_cell_distance = cell_radius + .015 * sectors * scale;
            wavy_cell_distance = pow(wavy_cell_distance, 50. + 100. * cell_randomizer.x);
            wavy_cell_distance *= pow(scale, .4);

            float round_cell_distance = cell_radius;
            round_cell_distance = pow(round_cell_distance, 400.);
            round_cell_distance *= pow(min(1., 2. * scale), .8);

            white_shadow += (smoothstep(.0, 1.5, wavy_cell_distance + round_cell_distance));
            white += wavy_cell_distance;
            yellow_hit_area = get_yellow_hit_area(yellow_hit_area, round_cell_distance, 1.);
            yellow += get_yellow(round_cell_distance, cell_randomizer.y);
            yellow_light += get_yellow_light(round_cell_distance, cell_angle, cell_radius, cell_randomizer.x);
            yellow_blick = get_blick(yellow_blick, round_cell_distance, cell_angle, cell_radius);
            area_around_yellow = get_area_around_yellow(area_around_yellow, round_cell_distance, cell_angle, sectors);
        }

        white = pow(white, 1.1);

        float base_shape = smoothstep(.28, .3, white);

        white_shadow *= (1. + snoise(3. * uv) + 2. * area_around_yellow);
        float white_color_shape = (1. - smoothstep(.3, 1., white_shadow));
        white_color_shape = 2. * pow(white_color_shape, 6.);
        white_color_shape *= smoothstep(.35, .7, white);

        float hit_area = yellow - yellow_hit_area;

        float white_central_shape = area_around_yellow;
        white_central_shape *= (1. - hit_area);
        white_central_shape *= .6;

        yellow -= 1.2 * hit_area;

        float yellow_shape = smoothstep(.49, .5, yellow);

        yellow_blick *= 1.05;
        yellow_blick -= .3 * hit_area;
        yellow_blick = step(.7, yellow_blick);

        vec3 color = vec3(.0);
        color = mix(color, .98 * vec3(1., .98, .99), base_shape);
        color = mix(color, vec3(1.), white_color_shape);
        color = mix(color, vec3(0., 0., .3), white_central_shape);
        color = mix(color, vec3(1., .6, 0.), yellow_shape);
        color += .2 * yellow_light;
        color = mix(color, vec3(1.), yellow_blick);

        float opacity = smoothstep(.25, .34, white);
        opacity += .05 * smoothstep(.15, .2, white);
        opacity -= 1.5 * white_central_shape;
        opacity += yellow_shape;

        gl_FragColor = vec4(color, opacity);
    }
</script>

CSS

              
                body, html {
    margin: 0;
    padding: 0;
    background-color: #bfd1e5;
    font-family: "Georgia", serif;
}

canvas#eggs {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    pointer-events: none;
}

.page-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    pointer-events: none;
    width: 95%;
    max-width: 700px;
    opacity: .7;
}

.page-title > * {
    font-size: 6vh;
    padding: 0;
    margin: 0;
}

.page-title h1 {
    font-size: 14vh;
}

.page-title .sub-title {
    font-size: 4vh;
    font-style: italic;
}

JS

              
                const canvasEl = document.querySelector("#eggs");
const devicePixelRatio = Math.min(window.devicePixelRatio, 2);

const textureEl = document.createElement("canvas");
const textureCtx = textureEl.getContext("2d");

let uniforms, clicksDataTexture, activeClickIdx = 0;
const clicksDataTextureSize = [10, 2], clicksNumber = 15; // to match the shader
const scaledData = new Uint8Array(clicksDataTextureSize[0] * clicksDataTextureSize[1] * 4).fill(0);
const gl = initShader();

const clicks = Array.from({length: clicksNumber}, () => ({
    coordinate: {x: 0, y: 0},
    radius: 0,
    clickDistance: 0
}));

window.addEventListener("resize", resizeCanvas);
resizeCanvas();
updateClickDataTexture();
gsap.ticker.add(render);

window.addEventListener("click", handleClick);
window.addEventListener("touchstart", handleClick);

function handleClick(e) {
	 let x, y;
    if (e.type === "touchstart") {
        const touch = e.targetTouches[0];
        x = touch.pageX;
        y = touch.pageY;
    } else {
        x = e.pageX;
        y = e.pageY;
    }
	
    clicks[activeClickIdx].coordinate.x = x / window.innerWidth + .03 * Math.random();
    clicks[activeClickIdx].coordinate.y = 1. - y / window.innerHeight;
    gsap.timeline({})
        .fromTo(clicks[activeClickIdx], {
            clickDistance: 0
        }, {
            duration: 2,
            clickDistance: 1,
        }, 0)
        .to(clicks[activeClickIdx], {
            duration: .7,
            radius: 1,
            ease: "none"
        }, 0)

    const nextIdx = (activeClickIdx + 1) % clicksNumber;
    gsap.to(clicks[nextIdx], {
        duration: 1,
        radius: 0,
    })

    activeClickIdx = (activeClickIdx + 1) % clicksNumber;
}

function initShader() {
    const vsSource = document.getElementById("vertShader").innerHTML;
    const fsSource = document.getElementById("fragShader").innerHTML;

    const gl = canvasEl.getContext("webgl") || canvasEl.getContext("experimental-webgl");

    if (!gl) {
        alert("WebGL is not supported by your browser.");
    }

    function createShader(gl, sourceCode, type) {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, sourceCode);
        gl.compileShader(shader);

        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            console.error("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
            return null;
        }

        return shader;
    }

    const vertexShader = createShader(gl, vsSource, gl.VERTEX_SHADER);
    const fragmentShader = createShader(gl, fsSource, gl.FRAGMENT_SHADER);

    function createShaderProgram(gl, vertexShader, fragmentShader) {
        const program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);

        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            console.error("Unable to initialize the shader program: " + gl.getProgramInfoLog(program));
            return null;
        }

        return program;
    }

    const shaderProgram = createShaderProgram(gl, vertexShader, fragmentShader);
    uniforms = getUniforms(shaderProgram);

    function getUniforms(program) {
        let uniforms = [];
        let uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
        for (let i = 0; i < uniformCount; i++) {
            let uniformName = gl.getActiveUniform(program, i).name;
            uniforms[uniformName] = gl.getUniformLocation(program, uniformName);
        }
        return uniforms;
    }

    const vertices = new Float32Array([-1., -1., 1., -1., -1., 1., 1., 1.]);

    const vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    gl.useProgram(shaderProgram);

    const positionLocation = gl.getAttribLocation(shaderProgram, "a_position");
    gl.enableVertexAttribArray(positionLocation);

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    clicksDataTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, clicksDataTexture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);


    return gl;
}

function updateClickDataTexture() {

    clicks.forEach((click, i) => {
        scaledData[i * 4] = click.coordinate.x * 255;
        scaledData[i * 4 + 1] = click.coordinate.y * 255;
        scaledData[i * 4 + 2] = click.clickDistance * 255;
        scaledData[i * 4 + 3] = click.radius * 255;
    });

    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, clicksDataTextureSize[0], clicksDataTextureSize[1], 0, gl.RGBA, gl.UNSIGNED_BYTE, scaledData);

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, clicksDataTexture);
    gl.uniform1i(uniforms.u_click_data_texture, 0);
}

function render() {
    gl.uniform1f(uniforms.u_time, 10 + gsap.globalTimeline.time());
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    updateClickDataTexture();
}

function resizeCanvas() {
    canvasEl.width = textureEl.width = window.innerWidth * devicePixelRatio;
    canvasEl.height = textureEl.height = window.innerHeight * devicePixelRatio;
    gl.viewport(0, 0, canvasEl.width, canvasEl.height);
    gl.uniform1f(uniforms.u_ratio, canvasEl.width / canvasEl.height);
	 gl.uniform1f(uniforms.u_resolution_scale, canvasEl.width > canvasEl.height ? 1 : (canvasEl.height / canvasEl.width));
}

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions