D3 Examples - animate a div with D3

animate a div with D3
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
xxxxxxxxxx
 
<!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>
​
  <link rel="stylesheet" type="text/css" href="party.css"></link>
</head>
​
<body>
  
  <div id="camp"></div>
    
    
  
  <div id="party">
​
    <div id="Archer" class="archer">
       <svg id="archerSkin" class="icon" style="fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="https://www.w3.org/2000/svg"><path d="M736.465 849.121l-223.927-132.956-223.928 132.956v-647.563h447.855z"  /><path d="M288.611 118.816h447.855v61.967h-447.855v-61.967z"  />
  <defs> <pattern style="fill: currentColor" id="diagonal-stripe-3" patternUnits="userSpaceOnUse" width="175" height="175">
    <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzMnLz4KPC9zdmc+" x="0" y="0" width="175" height="175"> </image> </pattern> 
    <pattern id="transformedPatternArcher"
         x="10" y="10" width="20" height="20"
         patternUnits="userSpaceOnUse"
         patternTransform="rotate(35)"
        >
​
    <circle cx="10" cy="10" r="10" style="stroke: none; fill: currentColor" />
​
  </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>
​
    