animate a div with D3

Built with blockbuilder.org

docs

https://devdocs.io/d3~5/#easings-d3-ease

credit

https://iros.github.io/patternfills/sample_d3.html

https://www.the-art-of-web.com/javascript/animate-curved-path/

http://tutorials.jenkov.com/svg/mask.html

inspiration

https://twitter.com/altosadventure/status/1240002083710959618

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://d3js.org/d3-ease.v1.min.js">
  </script>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

</pattern>
  </defs>
      </svg>
   	</div>
  </div>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    
    const duration = 500;
 
    function animate(id, x, y, deg){
      
      const pattern = `url("#transformedPattern${id}")`;
      const el = d3.select(`#${id}`);
      
      console.log("pattern: ", pattern);
      
      el
      .select("path")
      .style("fill", pattern)
        .attr("x", x)
        .attr("y", y)
      .style("top",x)
       .style("left",y);
      
      el
        .transition()
    		.duration(duration)
    		.style("top",`${x + 250}px`)
        .style("left",`${y + 250}px`)
     .transition()
    		.duration(duration)
    		.style("width", `${x + 250}px`)
      .transition()
    		.style("transform", "rotate(" + deg + "deg)")
      	.style("width", `${x + 250}px`)
        .style("height", `${y + 250}px`)
    		.style("top", `${x + 250}px`)
        .style("left",`${x + 250}px`);
    }
    
   animate("Archer", 25, 75, 25);
   animate("Cleric", -15, -105, 125);
    
  </script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel" src="Avatar.js"></script>
</body>

https://d3js.org/d3.v5.min.js

https://d3js.org/d3-ease.v1.min.js

https://unpkg.com/react@16/umd/react.production.min.js

https://unpkg.com/react-dom@16/umd/react-dom.production.min.js

https://unpkg.com/babel-standalone@6/babel.min.js