| license: mit |
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
| 'use strict'; | |
| const e = React.createElement; | |
| class LikeButton extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { liked: false }; | |
| } | |
| render() { | |
| if (this.state.liked) { | |
| return 'You liked this.'; | |
| } | |
| return e( | |
| 'button', | |
| { onClick: () => this.setState({ liked: true }) }, | |
| 'Like' | |
| ); | |
| } | |
| } | |
| const domContainer = document.querySelector('#camp'); | |
| ReactDOM.render(e(LikeButton), domContainer); |
| function animateComplex(el){ | |
| el | |
| .transition() | |
| .duration(duration) | |
| .style("top","200px") | |
| .style("left","200px") | |
| .transition() | |
| .duration(duration) | |
| .style("width", "260px") | |
| .transition() | |
| .style("transform", "rotate(45deg)") | |
| .style("top","100px") | |
| .style("left","200px") | |
| .transition() | |
| .duration(duration) | |
| .style("width", "240px") | |
| .transition() | |
| .duration(duration) | |
| .style("transform", "translateX(25px) translateY(50px) rotate(-45deg)") | |
| .on("start", function repeat() { | |
| d3.active(this) | |
| .transition() | |
| .style("transform", "rotate(45deg)") | |
| .style("top","100px") | |
| .style("left","200px") | |
| .transition() | |
| .duration(duration) | |
| .style("width", "240px") | |
| .transition() | |
| .duration(duration) | |
| .style("transform", "translateX(25px) translateY(50px) rotate(-45deg)") | |
| .transition() | |
| .duration(duration) | |
| .style("transform", "translateX(25px) translateY(50px) rotate(-5deg)") | |
| .transition() | |
| .on("start", repeat); | |
| }); | |
| } |
| <!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="http://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> |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; | |
| } | |
| .archer { | |
| color: rebeccapurple; | |
| display: block; | |
| position: absolute; | |
| width: auto; | |
| height: auto; | |
| background-color: transparent; | |
| } | |
| .cleric { | |
| color: pink; | |
| display: block; | |
| position: absolute; | |
| width: auto; | |
| height: auto; | |
| background-color: transparent; | |
| } | |
| /* | |
| .wizard { | |
| color: grey; | |
| display: block; | |
| position: absolute; | |
| width: auto; | |
| height: auto; | |
| background-color: transparent; | |
| } | |
| .cleric { | |
| color: pink; | |
| display: block; | |
| position: absolute; | |
| width: auto; | |
| height: auto; | |
| background-color: transparent; | |
| } | |
| .barbarian { | |
| color: red; | |
| display: block; | |
| position: absolute; | |
| width: auto; | |
| height: auto; | |
| background-color: transparent; | |
| }*/ |