[Two.js 320] Dashed Strokes

by jonobr1

HTML

<script src="https://cdn.jsdelivr.net/npm/two.js/build/two.js"></script>

JavaScript

var two = new Two({
	fullscreen: true,
  autostart: true
}).appendTo(document.body);

var circle = two.makeCircle(two.width * 0.5, two.height * 0.5, 50);
circle.dashes = [4, 1];
circle.linewidth = 3;

two.bind('update', function(frameCount) {

	var osc = Math.sin(frameCount / 60);
  var t = 0.5 * (osc + 1);
  var gapSize = 10;
  circle.dashes[1] =  gapSize * t;

});