IbeVanmeenen

function ChromaFilter() {
    const vertexShader = null;
    const fragmentShader = [
        "varying vec2 vTextureCoord;",

        "uniform float thresholdSensitivity;",
        "uniform float smoothing;",
        "uniform vec3 colorToReplace;",
        "uniform sampler2D uSampler;",

IbeVanmeenen

const appScroll = () => {
    let latestKnownScrollY = 0,
        ticking = false;

    const _onScroll = () => {
        latestKnownScrollY = window.pageYOffset;
        _requestTick();
    };

    const _requestTick = () => {

IbeVanmeenen

const docStyles = document.documentElement.style;
const hasSupport = (('flexWrap' in docStyles) || ('WebkitFlexWrap' in docStyles) || ('msFlexWrap' in docStyles));

if (!hasSupport) {
    document.body.classList.add('no-flexwrap');
}

IbeVanmeenen

// Epochs
const epochs = [
    ['year', 31536000],
    ['month', 2592000],
    ['day', 86400],
    ['hour', 3600],
    ['minute', 60],
    ['second', 1]
];

IbeVanmeenen

.anata-path--a-1, .anata-path--n-1 {
    stroke-dasharray: 2600;
    stroke-dashoffset: 2600;
    stroke-width: 40;
    animation: letter-animation 1.5s linear forwards;
}

.anata-path--n-1 {
    animation-delay: .8s;
}

IbeVanmeenen

<svg id="anata" x="0px" y="0px" viewBox="-362.9 1435.6 580.6 391.4" xml:space="preserve">
    <defs>
        <clipPath id="clip-a-1">
            <path d="M-205,1734c-3,11.8-6.4,23.4-9.8,35.1c-1,3.3-2,6.6-4.2,9.2s-6,4.1-9.1,2.8c-2.3-1-3.7-3.4-4.2-5.8s-0.2-5,0.2-7.4c2.3-15.6,7.3-30.6,11.3-45.8c0.2-0.9,0.3-1.9,0.3-1.9c-4.9-5.4-10.7-11.9-15.7-17.3c-1.2-1.3-2.4-2.6-3.6-3.9c-1-1.1-3.8-4-5.5-5.7c0,0-3.2,4.4-4.5,6c-7,8.6-15.5,16.1-25.2,21.5c-10.3,5.8-21.8,9.1-33.6,9.1c-5.6,0-11.3-0.7-16.7-2.3c-13.6-4-25.8-13.5-31.9-26.4c-4.4-8.8-5.8-18.6-5.7-28.3c0-9.7,1.5-19.6,5.6-28.4c5.2-11.3,14.6-20.3,25.4-26.5c6.7-3.8,14.6-5.6,22.2-6.9c11.5-1.8,22.4-0.8,33.7,3.9c5.8,2.4,11.1,5.9,16,9.9c2.5,2,5,4.1,7.3,6.3c3.7,3.5,5.7,5.7,6.1,6c0.6-1.4,1-2.2,1.7-3.6c4.8-11.1,10-22.1,14.5-33.4c8.1-20.4,16.2-40.8,23.7-61.4c5.8-15.9,11.1-32,16-48.2c3.6-12,6.7-24.2,8.7-36.5c1-5.8,5.2-7,8.6-8.3c12.3-5,24.7-9.9,38.3-10.2c2,0,4.5,0.2,6,1.3c1.2,0.9,2,3.4,1.7,5c-1.6,7.7-3.5,15.3-5.5,22.8c-3.2,11.8-6.8,23.5-10.1,35.3c-4.1,14.7-8.1,29.4-12,44.1c-3.4,13-6.5

IbeVanmeenen

<g clip-path="url(#clip-a-1)" stroke-width="40">
    <path class="anata-path anata-path--a-1" fill="none" stroke="#fff" stroke-miterlimit="10" d="M-218,1662.6 -192,1584.6 -175.3,1509.3 -132.7,1330.6 -145.3,1321.3 -161.5,1343.3 -192.7,1451.6 -238.7,1549.8 -263.3,1580.6 -295.3,1588.6 -324.7,1580.6 -339.3,1553.3 -334.7,1527.3 -305.3,1498.6 -272.7,1501.9 -249.2,1513.9 -214,1549.8 -170,1598.6 -122,1637.3 -54.7,1662.6 24.7,1681.3 102,1673.9 171.3,1652.6 218.7,1625.9 207.3,1613.7 178,1599.3 "/>
</g>

IbeVanmeenen

<polyline points="-218,1662.6 -192,1584.6 -175.3,1509.3 -132.7,1330.6 -145.3,1321.3 -161.5,1343.3 -192.7,1451.6 -238.7,1549.8 -263.3,1580.6 -295.3,1588.6 -324.7,1580.6 -339.3,1553.3 -334.7,1527.3 -305.3,1498.6 -272.7,1501.9 -249.2,1513.9 -214,1549.8 -170,1598.6 -122,1637.3 -54.7,1662.6 24.7,1681.3 102,1673.9 171.3,1652.6 218.7,1625.9 207.3,1613.7 178,1599.3 "/>

<path d="M-218,1662.6 -192,1584.6 -175.3,1509.3 -132.7,1330.6 -145.3,1321.3 -161.5,1343.3 -192.7,1451.6 -238.7,1549.8 -263.3,1580.6 -295.3,1588.6 -324.7,1580.6 -339.3,1553.3 -334.7,1527.3 -305.3,1498.6 -272.7,1501.9 -249.2,1513.9 -214,1549.8 -170,1598.6 -122,1637.3 -54.7,1662.6 24.7,1681.3 102,1673.9 171.3,1652.6 218.7,1625.9 207.3,1613.7 178,1599.3 "/>

IbeVanmeenen

<svg id="anata" x="0px" y="0px" viewBox="-362.9 1435.6 580.6 391.4" xml:space="preserve">
    <defs>
        <clipPath id="clip-a-1">
            <path d="M-205,1734c-3,11.8-6.4,23.4-9.8,35.1c-1,3.3-2,6.6-4.2,9.2s-6,4.1-9.1,2.8c-2.3-1-3.7-3.4-4.2-5.8s-0.2-5,0.2-7.4c2.3-15.6,7.3-30.6,11.3-45.8c0.2-0.9,0.3-1.9,0.3-1.9c-4.9-5.4-10.7-11.9-15.7-17.3c-1.2-1.3-2.4-2.6-3.6-3.9c-1-1.1-3.8-4-5.5-5.7c0,0-3.2,4.4-4.5,6c-7,8.6-15.5,16.1-25.2,21.5c-10.3,5.8-21.8,9.1-33.6,9.1c-5.6,0-11.3-0.7-16.7-2.3c-13.6-4-25.8-13.5-31.9-26.4c-4.4-8.8-5.8-18.6-5.7-28.3c0-9.7,1.5-19.6,5.6-28.4c5.2-11.3,14.6-20.3,25.4-26.5c6.7-3.8,14.6-5.6,22.2-6.9c11.5-1.8,22.4-0.8,33.7,3.9c5.8,2.4,11.1,5.9,16,9.9c2.5,2,5,4.1,7.3,6.3c3.7,3.5,5.7,5.7,6.1,6c0.6-1.4,1-2.2,1.7-3.6c4.8-11.1,10-22.1,14.5-33.4c8.1-20.4,16.2-40.8,23.7-61.4c5.8-15.9,11.1-32,16-48.2c3.6-12,6.7-24.2,8.7-36.5c1-5.8,5.2-7,8.6-8.3c12.3-5,24.7-9.9,38.3-10.2c2,0,4.5,0.2,6,1.3c1.2,0.9,2,3.4,1.7,5c-1.6,7.7-3.5,15.3-5.5,22.8c-3.2,11.8-6.8,23.5-10.1,35.3c-4.1,14.7-8.1,29.4-12,44.1c-3.4,13-6.5

IbeVanmeenen

<svg id="anata" x="0px" y="0px" viewBox="-362.9 1435.6 580.6 391.4" xml:space="preserve">
    <path id="a-1" d="M-205,1734c-3,11.8-6.4,23.4-9.8,35.1c-1,3.3-2,6.6-4.2,9.2s-6,4.1-9.1,2.8c-2.3-1-3.7-3.4-4.2-5.8s-0.2-5,0.2-7.4c2.3-15.6,7.3-30.6,11.3-45.8c0.2-0.9,0.3-1.9,0.3-1.9c-4.9-5.4-10.7-11.9-15.7-17.3c-1.2-1.3-2.4-2.6-3.6-3.9c-1-1.1-3.8-4-5.5-5.7c0,0-3.2,4.4-4.5,6c-7,8.6-15.5,16.1-25.2,21.5c-10.3,5.8-21.8,9.1-33.6,9.1c-5.6,0-11.3-0.7-16.7-2.3c-13.6-4-25.8-13.5-31.9-26.4c-4.4-8.8-5.8-18.6-5.7-28.3c0-9.7,1.5-19.6,5.6-28.4c5.2-11.3,14.6-20.3,25.4-26.5c6.7-3.8,14.6-5.6,22.2-6.9c11.5-1.8,22.4-0.8,33.7,3.9c5.8,2.4,11.1,5.9,16,9.9c2.5,2,5,4.1,7.3,6.3c3.7,3.5,5.7,5.7,6.1,6c0.6-1.4,1-2.2,1.7-3.6c4.8-11.1,10-22.1,14.5-33.4c8.1-20.4,16.2-40.8,23.7-61.4c5.8-15.9,11.1-32,16-48.2c3.6-12,6.7-24.2,8.7-36.5c1-5.8,5.2-7,8.6-8.3c12.3-5,24.7-9.9,38.3-10.2c2,0,4.5,0.2,6,1.3c1.2,0.9,2,3.4,1.7,5c-1.6,7.7-3.5,15.3-5.5,22.8c-3.2,11.8-6.8,23.5-10.1,35.3c-4.1,14.7-8.1,29.4-12,44.1c-3.4,13-6.5,26.2-9.8,39.2c-3.6,14.3-7.3,28.5-11.2,42.7