An animated logo shrinks and moves upwards as the page scrolls.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Logo Animation Test</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Logo Wrapper containing the SVG -->
    <div class="logo-wrapper">
        <svg xmlns="http://www.w3.org/2000/svg" width="655" height="340" viewBox="0 0 655 340">
            <path d="M126.569 0H191.786L317.598 333.786H254.435L224.138 249.57H93.7041L64.4336 333.786H0.757446L126.569 0ZM207.705 203.404L157.894 65.2681L109.623 203.404H207.705Z M326.43 265.026C326.43 230.621 353.133 201.864 393.701 194.161L474.837 178.242C482.54 177.215 487.675 171.566 487.675 164.891C487.675 138.701 468.675 119.701 441.972 119.701C415.269 119.701 392.674 139.215 390.62 168.485L335.16 155.134C343.376 105.836 386.512 70.9168 439.404 70.9168C498.972 70.9168 541.594 110.971 541.594 166.431V282.486L542.621 333.838H499.999L490.756 298.919C474.837 324.081 445.566 340 410.647 340C360.323 340 326.43 309.702 326.43 265.026ZM423.999 288.648C459.945 288.648 487.675 262.459 487.675 223.945V212.134C482.54 213.161 476.891 214.702 471.242 215.729L415.269 225.999C396.269 229.594 384.458 241.918 384.458 257.837C384.458 276.324 399.35 288.648 423.999 288.648Z M579.286 136.647C579.286 114.052 595.206 98.1332 616.773 98.1332C638.341 98.1332 654.26 114.052 654.26 136.647C654.26 159.242 638.854 175.161 616.773 175.161C594.692 175.161 579.286 158.728 579.286 136.647ZM579.286 299.432C579.286 276.837 595.206 260.918 616.773 260.918C638.341 260.918 654.26 276.837 654.26 299.432C654.26 322.027 638.854 337.946 616.773 337.946C594.692 337.946 579.286 321.513 579.286 299.432Z" fill="white"/>
        </svg>
    </div>

    <!-- Space to make the page scrollable -->
    <div class="scroll-spacer"></div>

    <!-- Main content of the page -->
    <div class="content">
        <h1>Scroll Down to Test the Animation</h1>
        <p>Scroll down to see the logo...

CSS

body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
}

/* Fixed logo wrapper at the top center */
.logo-wrapper {
    position: fixed;
    top: 20px; /* Slightly below the top of the page */
    left: 10px;
    z-index: 9999;
    transition: transform 0.2s;
}

/* Add space below the fixed logo for scrolling */
.scroll-spacer {
    height: 1500px; /* Make the page long enough to scroll */
}

/* Content section with padding and a long height to test scroll */
.content {
    padding: 20px;
    height: 2000px; /* Make the page long enough for scrolling */
    background-color: black;
    color: white;
}

/* Initial size of SVG logo */
svg {
    width: 200px;
    height: auto;
    transition: width 0.2s, height 0.2s;
}

/* Class when scrolled, shrinking the logo */
.scrolled svg {
    width: 50px;
    height: auto;
}

JavaScript

// Event listener for scrolling
window.addEventListener('scroll', function() {
    const logoWrapper = document.querySelector('.logo-wrapper');
    const scrollPosition = window.scrollY;

    // When scrolling past 100px, apply the 'scrolled' class to shrink and move the logo
    if (scrollPosition > 20) {
        logoWrapper.classList.add('scrolled');
    } else {
        logoWrapper.classList.remove('scrolled');
    }
});