SVG

extensively modified from peter collingridge khan academy

by Bob Cook

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
"

JavaScript

//Copyright 2017 Robert Cook except for Peter's part
//bobcook47@hotmail.com
//extensively modified from peter collingridge, khan academy
//Free to use and modify as long as this notice remains in the code
//
var pg;

function setup() {
  createCanvas(640, 480);
  pg = createGraphics(640, 480);
  test5();
}

// Converts a string of digits to an array of floats
var svgDigits = function(digitString) {
  var reDigits = /[-+]?[\d.]+/g;
  var digits = [];
  var digit = reDigits.exec(digitString);
  while (digit) {
    digits.push(parseFloat(digit[0]));
    var i = digit[0].indexOf(".");
    if (i >= 0) {
      var j = digit[0].lastIndexOf(".");
      if (i != j) //3.4.5 case is 3.4 .5
        digits.push(parseFloat(digit[0].substr(j)));
    }
    digit = reDigits.exec(digitString);
  }
  return digits;
}

var svgPath = function(pg, s) {
  var reCommands = /([ACHLMQSTVZ])([-\+\d\.\s,e]*)/gi;
  var commands, path = [];
  for (var i = 0; i < s.length; i++) {
    var z = s[i].substr(0, 1);
    if (z === "d") {
      var d = s[i].substr(3); //text(d,4,20);
      var commands = reCommands.exec(d);
      while (commands) {
        var letter = commands[1];
        var digits = svgDigits(commands[2]);
        path.push([letter].concat(digits));
        commands = reCommands.exec(d);
      }
    }
  }
  svgDrawPath(pg, path); //text(path[10],4,40);
}

var svgDrawPath = function(pg, path) {
  var mm = 20; //noStroke();fill(0);text(path,4,mm); mm+=20;
  var x2 = 0,
    y2 = 0,
    fx = 0,
    fy = 0,
    x = 0,
    y = 0;
  for (var i = 0; i < path.length; i++) {
    var command = path[i];
    switch (command[0]) {
      case 'A':
        for (var j = 1; j < command.length; j++) {
          var w = command[j++];
          var h = command[j++];
          var theta = command[j++];
          var arc = command[j++];
          var sweep = command[j++];
          var p = svgArcTo(x, y, w, h, theta, arc, sweep, x = command[j++], y = command[j]);
          for (var k = 0; k < p.length;...