JSFiddle - React, Tailwind, and code Playground

by Robin Edwards

HTML

<div id="container">
  <div id="d3div" class="logoElement"></div>
  <div id="imagediv" class="logoElement"></div>
</div>

CSS

.img {-webkit-backface-visibility: hidden;}

#container .logoElement{
  display: inline-block;
  *display: inline;
  zoom: 1;
  width: 180px;
  height: 110px;
  white-space: nowrap;
}

JavaScript

// right-side (static) image element
d3.select("#imagediv").append("img")
      .attr("src", "https://cdn.tutsplus.com/mobile/uploads/legacy/Free-App-Marketing-Tips/city-landscape.png")
      .style("max-width", "200px")
      .attr("class", "logoElement");

// left-side  (dynamic) d3 element
var g = d3.select("#d3div").append("svg")
    .attr("class", "logoElement")
    .style("height", 110)
    .style("width", 180)
    .append("g")
      .attr("transform", "scale(1.1)");

// I THINK BELOW CAN BE IGNORED

  var start = Date.now(),
  speed = .02;
  
// initialise dynamic animation elements
var big = g.append("image")
  .attr("xlink:href", "http://www.cs.cmu.edu/~junggon/tools/gear.png")
  .attr("class", "img")
  .attr("width", 100).attr("height", 100)
  .attr("x", -50).attr("y", -50);

var small = g.append("image")
  .attr("xlink:href", "http://www.cs.cmu.edu/~junggon/tools/gear.png")
  .attr("class", "img")
  .attr("width", 50).attr("height", 50)
  .attr("x", -25).attr("y", -25);

// animate
d3.timer(function() {
  var angle = (Date.now() - start) * speed,
      transform = function(d) { return "translate(50,50)," + "rotate(" + angle/2 + ")"; };
  big.selectAll("frame").attr("transform", transform);
  big.attr("transform", transform);
});

d3.timer(function() {
  var angle = (Date.now() - start) * speed,
      transform = function(d) { return "translate(124,50)," + "rotate(" + -angle + ")"; };
  small.selectAll("frame").attr("transform", transform);
  small.attr("transform", transform);
});