D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
micahstubbs
Full window
Github gist
animating a badge with svg group transitions
<!DOCTYPE html> <html> <body> <svg width="600" height="600"> <g class="badge otherBadge"> <circle r="45" transform="translate(100,100)" style="fill: #023474"></circle> <circle r="20" transform="translate(100,100)" style="stroke: #9C824A; stroke-width: 15px; fill: #EF0107"></circle> </g> </svg> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> d3.selectAll(".badge") .transition("down") .delay(600) .duration(600) .attr("transform","translate(100,200)") .style('opacity', 0.5) .each('end', function() { d3.select(this) .transition("up") .delay(600) .duration(600) .attr("transform","translate(400,100)") .style('opacity', 1) }); </script> </body> </html>
https://d3js.org/d3.v3.min.js