<!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->

<style>
html,
body,
canvas {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


<canvas></canvas>
<script>
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");

const text = "Javascript Free Code";

const multiplier = 1000;
const amplitude = 30;

function frame(t) {

    const colors = [
        "#f77194",
        "#ebf771",
        "#90f771",
        "#71f7eb",
        "#7187f7",
        "#f7187f",
        "#e071f7"];

    const m = 0.005;
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.save();
    context.translate(canvas.width >> 1, canvas.height >> 1);
    context.font = "36px monospace";
    context.textAlign = "center";
    context.textBaseline = "middle";
    const { width } = context.measureText(text);
    for (let i = 0; i < text.length; i++) {
        const character = text.charAt(i);
        const { width: x } = context.measureText(text.substr(0, i));
        const { width: cw } = context.measureText(character);
        const p = t + i * multiplier;
        const y = Math.sin(p * m) * amplitude;
        context.save();
        context.translate(x - (width >> 1) + (cw >> 1), y);
        context.rotate(Math.cos(p * m) * 0.5);
        //context.fillText(character, -x, 0); // I LOVE THIS
        context.fillStyle = colors[i % colors.length];
        context.fillText(character, 0, 0); // I LOVE THIS
        context.restore();
    }

    context.beginPath();

    for (let i = 0; i < text.length; i++) {
        const p = t + i * multiplier;
        const pn = t + (i + 1) * multiplier;
        const y = Math.sin(p * m) * amplitude;
        const yn = Math.sin(pn * m) * amplitude;
        const character = text.charAt(i);
        const { width: x } = context.measureText(text.substr(0, i));
        const { width: cw } = context.measureText(character);
        if (i === 0) {
            context.moveTo(
                x - (width >> 1) + (cw >> 1),
                y + 64);

        } else {
            context.quadraticCurveTo(
                x - (width >> 1) + (cw >> 1),
                y + 64,
                x - (width >> 1) + cw,
                y + (yn - y) * 0.5 + 64);

        }
    }
    context.lineWidth = 5;
    context.strokeStyle = "#71f7eb";
    context.stroke();

    context.beginPath();
    for (let i = 0; i < text.length; i++) {
        const p = t + i * multiplier;
        const pn = t + (i + 1) * multiplier;
        const y = Math.sin(p * m) * amplitude;
        const yn = Math.sin(pn * m) * amplitude;
        const character = text.charAt(i);
        const { width: x } = context.measureText(text.substr(0, i));
        const { width: cw } = context.measureText(character);
        if (i === 0) {
            context.moveTo(
                x - (width >> 1) + (cw >> 1),
                y + 80);

        } else {
            context.quadraticCurveTo(
                x - (width >> 1) + (cw >> 1),
                y + 80,
                x - (width >> 1) + cw,
                y + (yn - y) * 0.5 + 80);

        }
    }
    context.lineWidth = 5;
    context.strokeStyle = "#71f7eb";
    context.stroke();

    context.beginPath();
    for (let i = 0; i < text.length; i++) {
        const p = t + i * multiplier;
        const pn = t + (i + 1) * multiplier;
        const y = Math.sin(p * m) * amplitude;
        const yn = Math.sin(pn * m) * amplitude;
        const character = text.charAt(i);
        const { width: x } = context.measureText(text.substr(0, i));
        const { width: cw } = context.measureText(character);
        if (i === 0) {
            context.moveTo(
                x - (width >> 1) + (cw >> 1),
                y + 96);

        } else {
            context.quadraticCurveTo(
                x - (width >> 1) + (cw >> 1),
                y + 96,
                x - (width >> 1) + cw,
                y + (yn - y) * 0.5 + 96);

        }
    }
    context.lineWidth = 5;
    context.strokeStyle = "#71f7eb";
    context.stroke();

    context.restore();

    requestAnimationFrame(frame);
}

function resize() {
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
}

function start() {
    addEventListener("resize", resize);
    dispatchEvent(new Event("resize"));
    requestAnimationFrame(frame);
}

start();
</script><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>