polyline

Uploaded from codepen.io/monfera/pen/oLoRgX with blockbuilder.org

This bl.ock shows

rendering of 500 points with just one <polyline> and a <marker> (to switch off line and haze, set <polyline> fill-opacity and stroke-width to zero)
styling of the marker with CSS
SVG attribute update without going through string serialization / parsing (due to a probable bug in Safari, it's much slower there than the string-based equivalent)
pseudo 3D transformation
proof that SVG rendering, unlike HTML element rendering, isn't GPU accelerated for transform: open Dev Tools, Rendering -> Paint Flashing shows green rectangles

forked from monfera's block: 500 points with one polyline

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

svg * {
      stroke: black; 
    }
    
    #point line {
      stroke-width: 2;
    }

polyline {
      fill-opacity: 0.01;
      stroke-width: 0.05;
    }
    
  </style>
</head>

<body>

var n = 1000
var i

function rand() {
    return (
      Math.random() + 
      Math.random() + 
      Math.random() + 
      Math.random() + 
      Math.random() + 
      Math.random()) / 3 - 1
}

var rot = -Math.PI / 179

var X = [], Y = [], Z = []
for(i = 0; i < n; i++) {
  X.push(400 * rand())
  Y.push(200 * rand())
  Z.push(600 * rand())
}

var origPoints = [], points = []
for(i = 0; i < n; i++) {
  origPoints.push([
    480 + X[i] * Math.cos(rot) - Y[i] * Math.sin(rot), 
    240 + Y[i] * Math.cos(rot) + X[i] * Math.sin(rot) 
  ])
}

// first we have to populate `points` via an attrib string
// because one can't unfortunately create an SVGPoint
p.setAttribute('points', origPoints.join(' '))

var svgPoints = []
for(i = 0; i < n; i++) {
  svgPoints.push(p.points.getItem(i))
}

// we no longer set attributes to string values in the
// critical rAF loop
window.requestAnimationFrame(function render(t) {
    
//   rot = t / 1000
//   var cos = Math.cos(rot)
//   var sin = Math.sin(rot)
//   for(i = 0; i < n; i++) {
//     svgPoints[i].x = 480 + X[i] * cos - Z[i] * sin
//   }
  window.requestAnimationFrame(render)
})

</script>
</body>