Updated dynamic animated gradient vector logo created for and by Max Ludden.

maxlogo.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
    <defs>
        <linearGradient id='a' gradientUnits='objectBoundingBox' x1='0' y1='0' x2='1' y2='1'>
            <stop offset='0' stop-color='#ff00ff'>
                <animate attributeName="stop-color"
                    values="#ff00ff;#af00ff;#5f00ff;#0090ff;#00ffff;#00ff00;#99ff00;#ffff00;#ff8800;#ff0000;#ff00ff;"
                    dur="20s" repeatCount="indefinite">
                </animate>
            </stop>
            <stop offset='10' stop-color='#af00ff'>
                <animate attributeName="stop-color"
                    values="#af00ff;#5f00ff;#0088ff;#00ffff;#00ff00;#99ff00;#ffff00;#ff8800;#ff0000;#ff00ff;#af00ff;"
                    dur="20s" repeatCount="indefinite">
                </animate>
            </stop>
            <stop offset='20' stop-color='#5f00ff'>
                <animate attributeName="stop-color"
                    values="#5f00ff;#0090ff;#00ffff;#00ff00;#99ff00;#ffff00;#ff8800;#ff0000;#ff00ff;#af00ff;#5f00ff;"
                    dur="20s" repeatCount="indefinite">
                </animate>
            </stop>
            <animateTransform attributeName="gradientTransform" type="rotate" from="0 .5 .5"
                to="360 .5 .5"
                dur="20s" repeatCount="indefinite" />
        </linearGradient>
        <linearGradient id='b' gradientUnits='objectBoundingBox' x1='0' y1='1' x2='1' y2='1'>
            <stop offset='0' stop-color='#ff00ff'>
                <animate attributeName="stop-color"
                    values="#ff00ff;#af00ff;#5f00ff;#0090ff;#00ffff;#00ff00;#99ff00;#ffff00;#ff8800;#ff0000;#ff00ff;"
                    dur="20s" repeatCount="indefinite">
                </animate>
            </stop>
            <stop offset='20' stop-color='#af00ff' stop-opacity="10">
                <animate attributeName="stop-color"
                    values="#af00ff;#5f00ff;#0088ff;#00ffff;#00ff00;#99ff00;#ffff00;#ff8800;#ff0000;#ff00ff;#af00ff;"
                    dur="20s" repeatCount="indefinite">
                </animate>
            </stop>
            <animateTransform attributeName="gradientTransform" type="rotate"
                values="360 .5 .5;0 .5 .5" class="ignore"
                dur="20s" repeatCount="indefinite" />
        </linearGradient>
        <style>
            :root {
            color-scheme: light dark;
            --logo-max-width: 900px;
            --logo-padding: 24px;
            --contrast-fill: #231f20;
            }

            @media (prefers-color-scheme: dark) {
            :root {
            --contrast-fill: #efefef;
            --m-left-fill: url(#b);
            }
            }

            * {
            box-sizing: border-box;
            }

            html,
            body {
            height: 100%;
            }

            body {
            margin: 0;
            background: transparent;
            display: grid;
            place-items: center;
            padding: var(--logo-padding);
            }

            .stage {
            width: 100%;
            display: grid;
            place-items: center;
            }

            .logo {
            width: min(var(--logo-max-width), 92vw);
            height: auto;
            display: block;
            }

            .stroke {
            stroke: #bcbec0;
            stroke-miterlimit: 10;
            }

            .a {
            fill: url(#a);
            }

            .b {
            fill: url(#b);
            }

            .black {
            fill: #231f20;
            }

            .white {
            fill: ;
            stroke: url(#a);
            }

            .contrast-fill {
            fill: var(--contrast-fill);
            stroke: url(#a);
            }

        </style>
    </defs>
    <path class="contrast-fill"
        d="M113.4,406.1h11.4v10.8h-25.1v-41.2h13.7v30.4ZM166.2,401.4c0,1.4-.3,2.5-.9,3.3-.6.8-1.6,1.1-3,1.1s-2.4-.4-3-1.1c-.6-.8-.9-1.9-.9-3.3v-25.7h-13.2v26.2c0,2.7.4,5.1,1.2,7.1.8,2,1.9,3.7,3.4,5,1.5,1.3,3.3,2.3,5.4,3,2.1.7,4.5,1,7,1s4.9-.3,7-1c2.1-.7,3.9-1.6,5.4-3,1.5-1.3,2.7-3,3.5-5s1.2-4.4,1.2-7.1v-26.2h-13.2v25.7ZM236.4,387.4c1.1,2.6,1.6,5.6,1.6,8.9s-.5,6.4-1.6,8.9c-1.1,2.6-2.7,4.7-4.8,6.5-2.1,1.7-4.6,3-7.7,3.9-3,.9-6.5,1.3-10.4,1.3h-11.4v-41.2h11.4c3.9,0,7.3.4,10.4,1.3,3,.9,5.6,2.2,7.7,3.9,2.1,1.7,3.7,3.9,4.8,6.5ZM225,396.3c0-3-.8-5.2-2.5-6.7-1.7-1.4-4.1-2.2-7.2-2.2v17.7c3.1,0,5.5-.7,7.2-2.2,1.7-1.5,2.5-3.7,2.5-6.7ZM294.1,387.4c1.1,2.6,1.6,5.6,1.6,8.9s-.5,6.4-1.6,8.9c-1.1,2.6-2.7,4.7-4.8,6.5-2.1,1.7-4.6,3-7.7,3.9-3,.9-6.5,1.3-10.4,1.3h-11.4v-41.2h11.4c3.9,0,7.3.4,10.4,1.3,3,.9,5.6,2.2,7.7,3.9s3.7,3.9,4.8,6.5ZM282.8,396.3c0-3-.8-5.2-2.5-6.7-1.7-1.4-4.1-2.2-7.2-2.2v17.7c3.1,0,5.5-.7,7.2-2.2,1.7-1.5,2.5-3.7,2.5-6.7ZM330.9,401.4h10.9v-10.3h-10.9v-4.6h11.1v-10.8h-24.3v41.2h24.7v-10.8h-11.6v-4.8ZM386.9,375.7v15.9l-11.4-15.9h-10.8v41.2h12.9v-15.8l11.3,15.8h10.9v-41.2h-12.9Z" />
    <path class="contrast-fill"
        d="M206.9,319.6l-19.5,27.2h62.4l-19.6-27.2h-23.3ZM99.1,49.2v317h54.4v-153l76.7,106.4h62.5v27.2h-42.9l13.9,19.4h62.3L99.1,49.2Z" />

    <!-- Right Side - Responsive Animated Dynamic Gradient-->
    <path class="a"
        d="M173.5,366.1h62.3l13.9-19.4h-62.4l19-26.5-32.8,45.9h0ZM206.9,319.6l-.5.7.5-.7ZM269.3,319.6l-19.6,27.2h42.9v-27.2h-23.2ZM400.4,49.2l-193.5,270.4h62.5l76.6-106.4v153h54.4V49.2h0Z" />
    <path class="b"
        d="M173.5,366.1h62.3l13.9-19.4h-62.4l19-26.5-32.8,45.9h0ZM206.9,319.6l-.5.7.5-.7ZM269.3,319.6l-19.6,27.2h42.9v-27.2h-23.2ZM400.4,49.2l-193.5,270.4h62.5l76.6-106.4v153h54.4V49.2h0Z" />

    <!--Surname
    Paths (LUDDEN)-->
    <path class="contrast-fill"
        d="M113.4,406.1h11.4v10.8h-25.1v-41.2h13.7v30.4ZM166.2,401.4c0,1.4-.3,2.5-.9,3.3-.6.8-1.6,1.1-3,1.1s-2.4-.4-3-1.1c-.6-.8-.9-1.9-.9-3.3v-25.7h-13.2v26.2c0,2.7.4,5.1,1.2,7.1.8,2,1.9,3.7,3.4,5,1.5,1.3,3.3,2.3,5.4,3,2.1.7,4.5,1,7,1s4.9-.3,7-1c2.1-.7,3.9-1.6,5.4-3,1.5-1.3,2.7-3,3.5-5s1.2-4.4,1.2-7.1v-26.2h-13.2v25.7ZM236.4,387.4c1.1,2.6,1.6,5.6,1.6,8.9s-.5,6.4-1.6,8.9c-1.1,2.6-2.7,4.7-4.8,6.5-2.1,1.7-4.6,3-7.7,3.9-3,.9-6.5,1.3-10.4,1.3h-11.4v-41.2h11.4c3.9,0,7.3.4,10.4,1.3,3,.9,5.6,2.2,7.7,3.9,2.1,1.7,3.7,3.9,4.8,6.5ZM225,396.3c0-3-.8-5.2-2.5-6.7-1.7-1.4-4.1-2.2-7.2-2.2v17.7c3.1,0,5.5-.7,7.2-2.2,1.7-1.5,2.5-3.7,2.5-6.7ZM294.1,387.4c1.1,2.6,1.6,5.6,1.6,8.9s-.5,6.4-1.6,8.9c-1.1,2.6-2.7,4.7-4.8,6.5-2.1,1.7-4.6,3-7.7,3.9-3,.9-6.5,1.3-10.4,1.3h-11.4v-41.2h11.4c3.9,0,7.3.4,10.4,1.3,3,.9,5.6,2.2,7.7,3.9s3.7,3.9,4.8,6.5ZM282.8,396.3c0-3-.8-5.2-2.5-6.7-1.7-1.4-4.1-2.2-7.2-2.2v17.7c3.1,0,5.5-.7,7.2-2.2,1.7-1.5,2.5-3.7,2.5-6.7ZM330.9,401.4h10.9v-10.3h-10.9v-4.6h11.1v-10.8h-24.3v41.2h24.7v-10.8h-11.6v-4.8ZM386.9,375.7v15.9l-11.4-15.9h-10.8v41.2h12.9v-15.8l11.3,15.8h10.9v-41.2h-12.9Z" />
</svg>