SVG.js is fast.

by Fuzzy

HTML

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0.9/dist/svg.min.js"></script>
<div id="drawing"></div>

CSS

@import url('https://fonts.googleapis.com/css?family=Inconsolata');

JavaScript

// prepare data
var max = 5500

var data = {
  svgjs: {
    rects: '138ms', fill: '194ms', gradient: '868ms' 
  }
, snapsvg: {
    rects: '692ms', fill: '848ms', gradient: '3446ms' 
  }
, vanilla: {
    rects: '22ms', fill: '26ms', gradient: '101ms' 
  }
}

var colors = {
  svgjs:   '#ff0066'
, snapsvg: '#05bba6'
, vanilla: '#999999'
}

// build graphics
var draw = SVG().addTo('body').size('100%', 240)

// helpers
function bar(lib, version, y) {
  var width = new SVG.Number(data[lib][version]).divide(max).convert('%')
  draw.rect(width, 15).y(y).fill(colors[lib])
  draw.text(function(add) {
  		add.tspan(data[lib][version])
      add.tspan(version).dx(5).fill('#999').attr('font-size', 12)
    })
  	.move(width.plus('1%'), y - 1)
  	.font({ family: 'Inconsolata', size: 14 })
    .fill('#666')
}

function lib(name, y, color) {
  draw.text(name)
  	.move(0, y + 1)
  	.font({ family: 'Inconsolata', size: 16 })
    .fill(color)
}

lib('Vanilla js', 0, colors.vanilla)
bar('vanilla', 'rects', 20)
bar('vanilla', 'fill', 40)
bar('vanilla', 'gradient', 60)

lib('SVG.js', 80, colors.svgjs)
bar('svgjs', 'rects', 100)
bar('svgjs', 'fill', 120)
bar('svgjs', 'gradient', 140)

lib('Snap.svg', 160, colors.snapsvg)
bar('snapsvg', 'rects', 180)
bar('snapsvg', 'fill', 200)
bar('snapsvg', 'gradient', 220)