Gooey Gif Art by HarryStevens

index.html

<html>
  <head>
    <style>
    body {
      margin: 0;
      background: #3a403d;
    }
    .circle {
      fill: #fff;
    }
    </style>
  </head>
  <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
    var r = 50,
      countingUp = -1,
      rot = 18.59,
      g = [],
      circle = [];

    var svg = d3.select("body").append("svg")
        .style("filter", "url(#gooey)");

    var defs = svg.append("defs");

    var filter = defs.append("filter").attr("id", "gooey");
    filter.append("feGaussianBlur")
        .attr("in", "SourceGraphic")
        .attr("stdDeviation", "10")
        .attr("result", "blur");
    filter.append("feColorMatrix")
        .attr("in", "blur")
        .attr("mode", "matrix")
        .attr("values", "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7")
        .attr("result", "gooey");
    filter.append("feComposite")
        .attr("in", "SourceGraphic")
        .attr("in2", "gooey")
        .attr("operator", "atop");

    var width = window.innerWidth, height = window.innerHeight;

    svg
        .attr("width", width)
        .attr("height", height)

    var square = width > height ? height : width,
      translate = square == height ? "translate(" + (width - square) / 2 + ", 0)" : "translate(0, " + (height - square) / 2 + ")";

    for (var i = 0; i <= 1; i++){
      g[i] = svg.append("g")
          .attr("transform", translate)
          .attr("width", square)
          .attr("height", square);
    }

    draw(r);

    d3.timer(function(elapsed){

      r += (1 * countingUp);
      if (r == 50 || r == 25) {
          countingUp *= -1;
      }
      draw(r);

      g[0].attr("transform", translate + " rotate(" + elapsed / rot + " " + square / 2 + " " + square / 2 + ")"); // rotate clockwise
      g[1].attr("transform", translate + " rotate(" + elapsed / -rot + " " + square / 2 + " " + square / 2 + ")"); // rotate counter-clockwise

    });

    function draw(radius){

      var locs = [
        {
          x: square / 2,
          y: radius
        },
        {
          x: square - radius,
          y: square / 2
        },
        {
          x: square / 2,
          y: square - radius
        },
        {
          x: radius,
          y: square / 2
        }
      ];

      for (var i = 0; i < g.length; i++){
        //JOIN
        circle[i] = g[i].selectAll(".circle")
            .data(locs);

        //EXIT
        circle[i].exit().remove();

        //UPDATE
        circle[i]
            .attr("r", radius)
            .attr("cx", function(d){ return d.x; })
            .attr("cy", function(d){ return d.y; });

        //ENTER
        circle[i].enter().append("circle")
            .attr("class", "circle")
            .attr("r", radius)
            .attr("cx", function(d){ return d.x; })
            .attr("cy", function(d){ return d.y; });
      }

    }
    </script>
  </body>
</html>