SVG circle shape morphing

Question

How to make an circle SVG with shape morphing ?

I am trying to make circle with organic movement.

But as you can see pixels seem glitchy.

Any ideas on how to make it better looking? It is even the right way I am using to do it? I am not an expert in svg nor in shape morphing.

class App extends React.Component {
  render() {
    return (
      
       
      
    );
  }
}

// Render it
ReactDOM.render(
  ,
  document.getElementById("app")
);

svg {
    stroke-width: 1;
    stroke: #293133;
    stroke-linecap: round;
    fill: white;
}

user_1679849 · Answer

I think the glitching effect is happening because the feTurbulence filter outputs 8-bit integer values in the R, G and B channels. This quantization makes it hard to achieve smooth variation in the displacement mapping.

Anyway, you'll get better results with an animated vector curve. Here's an example that animates a polygon with 50 vertices. You could reduce the number of points by using quadratic or cubic Bézier curves instead of straight-line segments, but this should at least get you started:

window.onload = function() {
    var radius = 60, npoints = 50, nwaves = 8;
    var min_amp = 0.5, max_amp = 2.0;       // Spatial amplitude
    var min_freq = 0.1, max_freq = 0.2;     // Spatial frequency
    var min_speed = 0.05, max_speed = 0.1;  // Temporal speed
    var time_step = 0.2;
    
    // Create path data for initial circle
    var base_coords = [];
    for (var i=0; i<=npoints; i++) {
        var x = Math.sin(i * 2 * Math.PI / npoints) * radius;
        var y = Math.cos(i * 2 * Math.PI / npoints) * radius;
        base_coords.push([x,y]);
    }
    
    // Create wave data for distortion
    var wave_data = [];
    for (var i=0; i

user_7394871 · Answer

Any ideas on how to make it better looking ?

It is possible to implement morphing of circle borders by changing the d attribute of the patch

Implementation of morphing step by step:

Loading the circle into the vector editor
Add additional anchor points. Save the file in SVG format. This will be the starting path for morphing

Move the node points. We save the file. This will be the final path for morphing.

We write an animation command to change the d attribute. The values of this attribute change to

values="path Start; path Finish; path Start"

Note: that the Start and Finish paths are separated by semicolons.

Below is the complete code. Animation will start after clicking

Another example of morphing from a circle to a triangle, then to a rectangle and back to a circle

The paths of all shapes are drawn in a vector editor. For the animation to be smooth, without jerking, two conditions must be met when creating the path:

The number of anchor points must be the same in all shapes
The type of anchor points with the same location from the beginning, must be the same in all shapes

user_271353 · Answer

Well, you can play around with additional filter primitives to try to smooth things out - but it's not perfect. Here is a valiant attempt.

The additional blur + gooey colormatrix will smooth out the jagged edges, but some of the displacement is quite jaggy which results in part of the circle disappearing. So I increased the strokewidth of the original circle and then use a feMorphology/erode to thin it again - which, as you can see, is not perfect. (I also had to get rid of the original white fill because of the way that the gooey feColorMatrix works.)

class App extends React.Component {
  render() {
    return (
      
       
      
    );
  }
}

// Render it
ReactDOM.render(
  ,
  document.getElementById("app")
);

svg {
    stroke-width: 3;
    stroke: #293133;
    stroke-linecap: round;
    fill: none;
}

SVG circle shape morphing

How to make an circle SVG with shape morphing ?

3 Answers