Forem: Ksenia Kondrashova

Coding an Interactive (and Damn Satisfying) Cursor: 7 Simple Steps + 2kb of Code

Ksenia Kondrashova — Thu, 28 Sep 2023 08:44:59 +0000

I made this cursor animation recently, and people seem to like it :)

It is a nice-looking piece, but it's also quite simple and takes only 2KB of JS. Plus, the approach is quite universal and it can be used as a template for other beauties.

So it deserves a step-by-step guide!

Let's go

Step #1: Setup

We're drawing on the <canvas> element and we need the <canvas> to take the a full screen.

canvas {
    position: fixed;
    top: 0;
    left: 0;
}

<canvas></canvas>

setupCanvas();
window.addEventListener("resize", setupCanvas);

function setupCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

And, for sure, we need to track the cursor position.

const pointer = {
    x: .5 * window.innerWidth,
    y: .5 * window.innerHeight,
}

window.addEventListener("click", e => {
    updateMousePosition(e.pageX, e.pageY);
});
window.addEventListener("mousemove", e => {
    updateMousePosition(e.pageX, e.pageY);
});
window.addEventListener("touchmove", e => {
    updateMousePosition(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
});

function updateMousePosition(eX, eY) {
    pointer.x = eX;
    pointer.y = eY;
}

Step #2: Animation loop

To see the simplest mouse-following animation, we only need to redraw canvas in a loop using the window.requestAnimationFrame() method, and draw the circle centered as pointer coordinates on each step.

const p = {x: 0, y: 0}; // coordinate to draw

update(0);

function update(t) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // copy cursor position
    p.x = poiner.x;
    p.y = poiner.y;
    // draw a dot
    ctx.beginPath();
    ctx.arc(p.x, p.y, 5, 0, 2 * Math.PI);
    ctx.fill();

    window.requestAnimationFrame(update);
}

With the code above, we have a black circle following the mouse.

Step #3: Adding the delay

Now, the circle is following the cursor as fast as it can. Let's add a delay so the dot catches up with the target position in a somewhat elastic way.

const params = {
    // ...
    spring: .4
};
// p.x = poiner.x;
// p.y = poiner.y;
p.x += (pointer.x - p.x) * params.spring;
p.y += (pointer.y - p.y) * params.spring;

ctx.beginPath();
ctx.arc(p.x, p.y, 5, 0, 2 * Math.PI);
ctx.fill();

The spring parameter is used to determine how fast the dot will catch up with cursor position. A small value like .1 will make it follow very slowly, while spring = 1 means no delay.

Step #3: Creating mouse trail

Let's create a trail - array of points' data, with each point holding the x/y coordinates and dx/dy deltas which we use to calculate delay.

const params = {
    // ...
    pointsNumber: 30
};

// const p = {x: 0, y: 0};

const trail = new Array(params.pointsNumber);
for (let i = 0; i < params.pointsNumber; i++) {
    trail[i] = {
        x: poiner.x,
        y: poiner.y,
        dx: 0,
        dy: 0,
    }
}

Instead of a single dot, we draw now the whole trail where each dot is trying to catch up with the previous one. The first dot catches up with cursor coordinate (pointer) and delay of this first point is longer - simply because it looks better for me :)


function update(t) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    trail.forEach((p, pIdx) => {
        const prev = pIdx === 0 ? pointer : trail[pIdx - 1];
        const spring = pIdx === 0 ? .4 * params.spring : params.spring;

        p.dx = (prev.x - p.x) * spring;
        p.dy = (prev.y - p.y) * spring;

        p.x += p.dx;
        p.y += p.dy;

        ctx.beginPath();
        ctx.arc(p.x, p.y, 5, 0, 2 * Math.PI);
        ctx.fill();
    });

    window.requestAnimationFrame(update);
}

Step #4: Turning dots to the line

It's easy to draw a polyline instead of dots.

trail.forEach((p, pIdx) => {
    const prev = pIdx === 0 ? pointer : trail[pIdx - 1];

    p.dx = (prev.x - p.x) * params.spring;
    p.dy = (prev.y - p.y) * params.spring;

    p.x += p.dx;
    p.y += p.dy;

    // ctx.beginPath();
    // ctx.arc(p.x, p.y, 5, 0, 2 * Math.PI);
    // ctx.fill();

    if (pIdx === 0) {
        // start the line on the first point
        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
    } else {
        // continue with new line segment to the following one
        ctx.lineTo(p.x, p.y);
    }
});

// draw the thing
ctx.stroke();

Step #5: Accumulating the speed

What makes the cursor animation really nice looking is accumulating the deltas. Let's use dx/dy not only for the distance to the neighbour position but accumulate this distance.

To prevent the delta values getting super big super fast, we're also multiplying dx/dy with new friction parameter on each step.

const params = {
    // ...
    friction: .5
};

...

// ...

// p.dx = (prev.x - p.x) * spring;
// p.dy = (prev.y - p.y) * spring;
p.dx += (prev.x - p.x) * spring;
p.dy += (prev.y - p.y) * spring;
p.dx *= params.friction;
p.dy *= params.friction;

// as before
p.x += p.dx;
p.y += p.dy;

// ...

Step #6: Smooth line

The motion is done! Let's make the stroke look better and replace each line segment with Bézier curve.

trail.forEach((p, pIdx) => {
    // calc p.x and p.y

    if (pIdx === 0) {
        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
    // } else {
    //     ctx.lineTo(p.x, p.y);
    }
});

for (let i = 1; i < trail.length - 1; i++) {
    const xc = .5 * (trail[i].x + trail[i + 1].x);
    const yc = .5 * (trail[i].y + trail[i + 1].y);
    ctx.quadraticCurveTo(trail[i].x, trail[i].y, xc, yc);
}

ctx.stroke();

Smooth!

Step #7: Play with line width

For this demo, the last step is replacing the default lineWidth which is 1px to the dynamic value that gets smaller for the each segment.

const params = {
    baseWidth: .9,
};
... 

for (let i = 1; i < trail.length - 1; i++) {
    // ...
    ctx.quadraticCurveTo(trail[i].x, trail[i].y, xc, yc);
    ctx.lineWidth = params.baseWidth * (params.pointsNumber - i);
}

See the source code on codepen.

Gradient Along SVG Path with GSAP

Ksenia Kondrashova — Tue, 30 May 2023 11:04:24 +0000

If you've ever come across, you know what I'm talking about. It's really annoying to deal with this type of gradient in SVG.

Check out the final codepen or follow the step-by-step process.

Native SVG methods

SVG <path>, as well as other SVG strokes like <polygon> and <polyline>, can only be colored using linearGradient and radialGradient.

<!-- Here and below we're using the same pre-defined path -->
<svg width="0" height="0" viewBox="0 0 250 250">
    <defs>
        <path id="gradient-path" d="M36.5,91.2C-7.5,185.5,99.3,224.4,170,203.1c55-16.6,57.8-87.4,1.6-104C71,69.5,9.4,207.7,46,228.6c62.7,35.8,189.7-116,133-211"/>
    </defs>
</svg>

<!-- Coloring the path with native SVG gradient -->
<svg id="demo" viewBox="0 0 500 250">
    <defs>
        <linearGradient id="linear-grad">
            <stop offset="0" stop-color="#f7ff00"/>
            <stop offset="1" stop-color="#db36a4"/>
        </linearGradient>
        <radialGradient id="radial-grad">
            <stop offset="0" stop-color="#f7ff00"/>
            <stop offset="1" stop-color="#db36a4"/>
        </radialGradient>
    </defs>
    <use xlink:href="#gradient-path" stroke="url(#linear-grad)" fill="none" stroke-width="15"/>
    <use xlink:href="#gradient-path" stroke="url(#radial-grad)" x="250" fill="none" stroke-width="15"/>
</svg>

While both gradient types have lots of settings, the color distribution always follows a straight line.

If we want the color to change along the curve, we'll need a help from CSS or JavaScript. It’s a common problem and we have some solutions. Mike Bostock, the creator of d3.js library, has shared this approach. Patrick Cason created a small library based on Mike solution but without d3.js dependency. Other folks have covered more specific cases. For example, Amit Sheen posted about a CSS-only trick to build and animate the gradient along a circular path.

Creating a Gradient with GSAP

As a ~~big fan~~ frequent user of GSAP, I’d also like to contribute.

We'll use GSAP and their MotionPathPlugin to distribute <circle> elements along the given <path> and color those circles to compose the gradient.

After defining a reference <path> and adding both GSAP files, we create elements, position them along the path, and apply gradient color to them.

<svg viewBox="0 0 250 250">
    <defs>
        <path id="gradient-path" d="M36.5,91.2C-7.5,185.5,99.3,224.4,170,203.1c55-16.6,57.8-87.4,1.6-104C71,69.5,9.4,207.7,46,228.6c62.7,35.8,189.7-116,133-211"/>
    </defs>
    <g class="dots">
        // to hold all the circles
    </g>
</svg>

const strokeWidth = 15;
const colors = ["#f7ff00", "#db36a4"];
const gradientPath = document.querySelector("#gradient-path");
// const numberOfDots = Math.ceil(gradientPath.getTotalLength() / strokeWidth); // for circles to be placed back-to-back
const dotsDensity = .5 * strokeWidth;
const numberOfDots = Math.ceil(dotsDensity * gradientPath.getTotalLength() / strokeWidth);

To find out the number of circles we can use getTotalLength(). This native JS method retrieves the total length of the path. If we take gradientPath.getTotalLength() / strokeWidth as a number of dots, they stay back to back. By increasing the dotsDensity we can get a smooth line:

We create the circles using the native JS appendChild method, and define the circle's position with the motionPath plugin.

const dotsGroup = document.querySelector(".dots");
createBasicGradient(dotsGroup);

function createBasicGradient(g) {
    for (let idx = 0; idx < numberOfDots; idx++) {
        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        g.appendChild(circle);

        gsap.set(circle, {
            motionPath:
                path: gradientPath, // the target path
                start: idx / numberOfDots, // the position on target path
                end: idx / numberOfDots,
            },
            attr: {
                cx: 0, // the position is defined by transform attribute, so we keep circle center on (0, 0) point
                cy: 0,
                r: .5 * strokeWidth, // to compose strokeWidth
                fill: gsap.utils.interpolate(colors, (idx / numberOfDots)) // linear interpolation between 2 (or more!) given colors
            }
        });
    }
}

✏️ Tip #1
I use simple linear interpolation between two colors with the GSAP interpolate utility. You can easily add more colors to the colors array, or build a custom function to calculate the color from (idx / numberOfDots) value.

We might need to fix the stroke tips, unless we're good with round linecap.

There're different ways to do so. For example, we can mask the dots with the original path.

<path id="gradient-path" d="M36.5,91.2C-7.5,185.5,99.3,224.4,170,203.1c55-16.6,57.8-87.4,1.6-104C71,69.5,9.4,207.7,46,228.6c62.7,35.8,189.7-116,133-211"/>
<mask id="gradient-path-clip">
    <use xlink:href="#gradient-path" stroke-width="15" fill="none" stroke="white"/>
</mask>
...
<g mask="url(#gradient-path-clip)" class="dots">
</g>

The basic gradient along the stroke is done! 😎

✏️ Tip #2
You can easily replace <circle> with another shape and compose a gradient with rectangles or something else. If doing so, you additionally align the particles along the path:
    motionPath: {
        ...
        align: gradientPath,
        alignOrigin: [.5, .5],
        ...
    }
✏️ Tip #3
If you're masking the circles with the original path and the path doesn't intersect itself, you can increase the dot radius and decrease the dots density. It's much better for performance.

Advanced techniques

Handling stroke intersections

Let's say we want our path to look like a proper knot with the stroke going "under" itself at the bottom.
We can reorder the dots and append the "back" dots before others. Then we apply the color and position using remapped index instead the original order.

for (let idx = 0; idx < numberOfDots; idx++) {
    // append circles in normal order
    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    g.appendChild(circle);

    // remap the index to move the some of the back dots to the middle of stroke length
    let idxRemapped = idx;
    if (idx < .1 * numberOfDots) {
        idxRemapped += Math.ceil(.7 * numberOfDots); // [ .0 .. .1 ] to [ .7 .. .8 ]
    } else {
        if (idx < .8 * numberOfDots) {
            idxRemapped -= Math.ceil(.1 * numberOfDots); // [ .1 .. .8 ] to [ .0 .. .7 ]
        }
    }

    // apply position and color using idxRemapped
    gsap.set(circle, {
        // ...
    });
}

The index remapping is specific for particular path but you hopefully got the idea :)

Varying Stroke Width

Building dynamic path width is pretty straightforward, we just need to change the dot size according to the index.

gsap.set(circle, {
    attr: {
        // ...
        r: .5 * strokeWidth + .02 * idx,
    }
})

And, of course, we can use more fancy function to calculate the dot size.

Animate the gradient

GSAP is an animation platform, and the MotionPathPlugin was designed to move things along a path. So, rather than setting the dot position, we can easily animate it.

for (let idx = 0; idx < numberOfDots; idx++) {
    // create dot and set static attributes like before
    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    g.appendChild(circle);
    gsap.set(circle, {
        // motionPath: {
        //     path: gradientPath,
        //     start: idxRemapped / numberOfDots,
        //     end: idxRemapped / numberOfDots,
        // },
        attr: {
            cx: 0,
            cy: 0,
            r: .5 * strokeWidth,
            fill: gsap.utils.interpolate(colors, (idxRemapped / numberOfDots))
        }
    });

    // add position-on-path animation
    gsap.to(circle, {
        motionPath: {
            path: gradientPath // position along the path
        },
        duration: 2, // the time each dot takes to travel the whole path
        ease: "none",
        repeat: -1 // loop the animation
    }).progress(idx / numberOfDots); // each dot start moving from their own position
}

It's easy to combine gradient animation with other effects. For some cases you may want to increase the dots density or add masking.

And there you have it! 🎉
I gathered all the examples on the single codepen, subscribe for updates!

Making Background Blob Animation in Just 1.5KB: Step-by-Step Guide

Ksenia Kondrashova — Thu, 09 Mar 2023 21:09:21 +0000

Today we'll show you how to create this background animation

It gives the illusion of blobs morphing randomly. But in fact, we're just rotating four static SVG shapes with CSS.

Step 1: Create shapes

First, we draw shapes. I'm using Illustrator but any vector editor with SVG export support works.

Start by creating a square canvas. I have it 100 x 100px, but since we're making an SVG image, it scales for any screen size without losing quality. Therefore, pixel size doesn't matter.

You'll need two pairs of roundish shapes. The number of shapes doesn't matter much; they just need to be circular and well cropped by the viewport.

Additionally, add circles to the central points. They won't stay in the final image; they're just an easy way to get the coordinates of origin points for shapes rotation.

We don't care about styles and colors at this point. We need to gather only the shapes from Illustrator. So let's export the whole image as .svg file.

Step 2: Prepare SVG code

Here is the svg code exported from Illustrator:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
  <path d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
  <path d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
  <path d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
  <circle cx="13.2" cy="25.6" r="1.6" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
  <circle cx="84.7" cy="93.3" r="1.7" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
</svg>

The code may look different depending on the graphic editor you use and export settings. Anyway, we need to clean it up by removing all the styles inherited from the graphic editor. The only elements that should stay are:

the viewBox attribute for <svg>
4 <path> elements for blobs and their d attribute
2 additional <circle> elements

Once we have a minimal code, we can embed it in the HTML page and set the image to full-screen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Ksenia Kondrashova">
    <style>
        svg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z"/>
    <path d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z"/>
    <path d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z"/>
    <path d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z"/>
    <circle cx="13.2" cy="25.6" r="1.6" />
    <circle cx="84.7" cy="93.3" r="1.7" />
</svg>

</body>
</html>

Next thing is to add colors and class names to elements. Cheers to coolors.co for nice random palettes btw.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path fill="#9b5de5" class="out-top" d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z"/>
    <path fill="#f15bb5" class="in-top" d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z"/>
    <path fill="#00bbf9" class="out-bottom" d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z"/>
    <path fill="#00f5d4" class="in-bottom" d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z"/>
</svg>

I keep the <svg> background transparent so it's possible to set the page background to yellow. Alternatively, we can set background-color for svg or include yellow back to the image. We're really flexible with how to handle the colors.

body {
    background-color: #fee440;
}

Step 3: Animate shapes

The next step is to animate the <path> elements using CSS. This can be done either by adding regular CSS code outside the <svg> tag or by inserting a <style> section directly into the SVG code. I insert the CSS to keep the code structure more clean, and because this allows the animation to be saved as a separate .svg file.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <defs>
        <style>

        </style>
    </defs>
    ...
</svg>

Each of four shapes will be rotated in the same direction in an endless loop. So we need only a single keyframes for rotation from 0 to 360 degrees.

All 4 are moving quite slow but with different speed. So for each blob, we vary only animation duration and origin point.

For origin points we use the circles' coordinates (specifically, cx and cy attributes). Once it's done, we can delete the circles.

<style>
    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    .out-top {
        animation: rotate 20s linear infinite;
        transform-origin: 13px 25px;
    }
    .in-top {
        animation: rotate 10s linear infinite;
        transform-origin: 13px 25px;
    }
    .out-bottom {
        animation: rotate 25s linear infinite;
        transform-origin: 84px 93px;
    }
    .in-bottom {
        animation: rotate 15s linear infinite;
        transform-origin: 84px 93px;
    }
</style>

...

// turns to transform-origin: 13px 25px
<circle cx="13.2" cy="25.6" r="1.6" />
// turns to transform-origin: 84px 93px
<circle cx="84.7" cy="93.3" r="1.7" />

Setting the origin point in pixels can be confusing. In fact these values are not related to screen pixels, but rather to the SVG internal coordinate system, which is a 100 x 100 px size canvas we created in Illustrator. Again, SVG is scales to any screen size so having pixels for origin point is simply a matter of CSS syntax.

The animation is finished!

Step 4: Setup responsiveness

Let's open the page in the browser and try it for different screen ratios. By default, SVG keeps the whole viewBox always visible by adding extra space on the sides. This way, we can clearly see the circular rotating shapes.

Instead, we want to crop the image so the blobs are only partly visible. It can be done easily with preserveAspectRatio="xMidYMid slice" attribute.

That's it! The animation can be used as inline or being saved in the external blob.svg file. Even without minimifying, the file size is around 1.5kb which is pretty cool 😎

Play with code on codepen or check out the video version of this tutorial!