SOURCE

console 命令行工具 X clear

                    
>
console
var svg = d3.select('svg')
  .attr('width', 600)
  .attr('height', 600)

var p = d3.path();

var path = svg.append('path')
  .style('stroke', 'red')
  .style('fill', 'none')
  .style('display', 'none')

var sampleNum = 20000;
var m = 37;
var n = 50;

for (var t = 0; t <= sampleNum; t += 1) {
  var theta = t / sampleNum * 2 * Math.PI;
  var x = Math.sin(m * theta) * 250 + 300;
  var y = Math.sin(n * theta) * 250 + 300;
  if (t === 0) {
    p.moveTo(x, y)
  } else {
    p.lineTo(x, y)
  }
}

path.attr('d', p.toString())

var pathLen = document.querySelector('path').getTotalLength();

path.style('stroke-dasharray', pathLen)
  .style('stroke-dashoffset', pathLen)
  .style('display', 'inline')
  .transition().duration(pathLen / 2).ease(d3.easeLinear)
  .style('stroke-dashoffset', 0)
<svg>
</svg>

本项目引用的自定义外部资源