<div id="btnContainer">
    <button id="btnUpdateText">UPDATE TEXT</button>
</div>
<a href="https://superplug.in/supermarquee"
   target="_blank">
    <div id="badge">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 517.85 603.34" style="background-color:#8089ff"><defs><style>.cls-1{fill:#fff;fill-rule:evenodd;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{fill:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" x1="9.85" y1="222.09" x2="337.68" y2="222.09" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#d9d9d9"/></linearGradient><linearGradient id="linear-gradient-2" x1="9.85" y1="440.61" x2="337.68" y2="440.61" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="9.85" y1="310.78" x2="337.68" y2="310.78" xlink:href="#linear-gradient"/></defs><title>S2</title><path class="cls-1" d="M524.53,143.94l-.54-32.5-31-9.76C422.13,79.39,352.39,52.89,286,19.38L265.71,9.11V39.42l8.13,4.1c67.66,34.18,138.77,61.23,211,84l12.4,3.9.22,13c2.73,165.28-47.45,381.67-226.35,438l-5.42,1.71v28.36l13.54-4.26C470.9,547.85,527.47,322.34,524.53,143.94Zm-159,171.32c-36.82-13.69-69.81-27.56-99.81-41.59V386.18c17.82,8,36.68,16,56.73,23.9A194.48,194.48,0,0,1,297.61,439a158.68,158.68,0,0,1-31.9,23.61V563.56c53.46-16.83,94.57-49.06,125.78-90.06a325.86,325.86,0,0,0,20.9-31.14c17.67-29.84,31.21-62.86,41.35-97.11C422,335.37,392.72,325.37,365.52,315.26ZM479.45,143.07C392,115.54,323.18,87,265.71,58V161.4C304.42,179.16,344,195,384.09,209.35a604.1,604.1,0,0,1-10,70.66Q418,296.5,462.83,310.36C475.81,253.28,480.3,194.67,479.45,143.07ZM365.52,315.26c-36.82-13.69-69.81-27.56-99.81-41.59V386.18c17.82,8,36.68,16,56.73,23.9A194.48,194.48,0,0,1,297.61,439a158.68,158.68,0,0,1-31.9,23.61V563.56c53.46-16.83,94.57-49.06,125.78-90.06a325.86,325.86,0,0,0,20.9-31.14c17.67-29.84,31.21-62.86,41.35-97.11C422,335.37,392.72,325.37,365.52,315.26ZM479.45,143.07C392,115.54,323.18,87,265.71,58V161.4C304.42,179.16,344,195,384.09,209.35a604.1,604.1,0,0,1-10,70.66Q418,296.5,462.83,310.36C475.81,253.28,480.3,194.67,479.45,143.07ZM365.52,315.26c-36.82-13.69-69.81-27.56-99.81-41.59V386.18c17.82,8,36.68,16,56.73,23.9A194.48,194.48,0,0,1,297.61,439a158.68,158.68,0,0,1-31.9,23.61V563.56c53.46-16.83,94.57-49.06,125.78-90.06a325.86,325.86,0,0,0,20.9-31.14c17.67-29.84,31.21-62.86,41.35-97.11C422,335.37,392.72,325.37,365.52,315.26ZM479.45,143.07C392,115.54,323.18,87,265.71,58V161.4C304.42,179.16,344,195,384.09,209.35a604.1,604.1,0,0,1-10,70.66Q418,296.5,462.83,310.36C475.81,253.28,480.3,194.67,479.45,143.07Z" transform="translate(-6.78 -9.11)"/><path class="cls-2" d="M93.48,129.47q-20,6.83-41.51,13.6c0,.27,0,.55,0,.83a737,737,0,0,0,8.32,122.74c34.16,24.44,70.58,48.9,113.4,73.09,27.64,15.62,57.95,31.13,92,46.46V273.67a1092.66,1092.66,0,0,1-118.37-64.28.08.08,0,0,0,0,0q21.61-7.72,43-16.06,38.13-14.88,75.37-31.89h0V58h0C217.66,82.27,161.66,106.19,93.48,129.47Z" transform="translate(-6.78 -9.11)"/><path class="cls-3" d="M265.71,563.56h0V462.63h0C237.62,447,215.65,422.84,198.62,394q-6.3-3.21-12.58-6.5A1169.86,1169.86,0,0,1,72.93,319.46l-2.63-1.79C96.52,426.57,154.31,528.49,265.71,563.56Z" transform="translate(-6.78 -9.11)"/><path class="cls-4" d="M265.71,584.08h0l-5.41-1.71C81.39,526.06,31.21,309.67,33.94,144.39l.22-13,12.4-3.9c72.25-22.74,143.36-49.79,211-84l8.13-4.1h0V9.11h0L245.38,19.38c-66.35,33.51-136.09,60-206.94,82.3l-31,9.76-.54,32.5C4,322.34,60.52,547.85,252.17,608.19l13.54,4.26h0Z" transform="translate(-6.78 -9.11)"/></svg>
    </div>
</a>

<div id="overlay"></div>

<div id="marqueewiggle-container">
    <div id="marqueewiggle"></div>

*, body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: black;
    color: lightyellow;
    background: white;
}

#overlay {
    position: absolute;
    z-index: 10;
    background: linear-gradient(-45deg, rgba(238, 119, 82, 0.6), rgba(231, 60, 126, 0.6),rgba(35, 166, 213, 0.6), rgba(35, 213, 171, 0.6));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    width: 100vw;
    height: 100vh;
}

#btnContainer {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 30;
    width: 96px;
    height: 24px;
    border: 2px solid black;
    border-radius: 10%;
    background: transparent;
}
#btnUpdateText {
    width: 100%;
    font-size: 14px;
    line-height: 24px;
    height: 24px;
    border: none;
    background: rgba( 255, 255, 255, 0.9 );
    color: #2e2e2e;
    cursor: pointer;
}

#badge {
    position: absolute;
    z-index: 20;
    background-color: #8089ff;
    bottom: 12px;
    border-radius: 10%;
    right: 12px;
    width: 42px;
    height: 42px;
    padding: 6px;
}

#marqueewiggle-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
#marqueewiggle {
    width: 100%;
    height: 100%;
    font-size: 58vh;
    color: #4f4faf;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

// Powered by SuperMarquee library
// https://www.superplug.in/supermarquee

let lastTime = (new Date()).getTime(), currentText = "Hello <b>Codepen</b>".toUpperCase(),
    currentTime = 0, sin = 0, delta = 0;

const myScroller =  new SuperMarquee(
    document.getElementById( "marqueewiggle" ), {
        "content" : currentText,
        "speed" : "superfast",
        "type" : "horizontal"
});

document.getElementById( 'btnUpdateText' ).onclick = () => {
    let newText = prompt( "Update scroll text", currentText );
    if ( !newText ) return;

    currentText = newText.toUpperCase();
    myScroller.setScrollContent( currentText );
    lastTime = Date.now();
};

function loop() {
    window.requestAnimationFrame( loop );
    currentTime = ( new Date() ).getTime();
    delta = ( currentTime - lastTime ) / 2000;
    sin = Math.sin( delta );
    myScroller.setPerspective( `{ "rotateX" : ${ 25 * sin },  "rotateY" : ${ 60 * sin }, "rotateZ" : ${ 40 * sin } , "z" : 200}` );
}

loop();