Animated Lag Radar With JavaScript And SVG – lag-radar

Preview:

Description:

lag-radar is an ES6 JavaScript library that renders a dynamic, animated, and SVG based performance radar to visualize slow downs on the web app.

How to use it:

Install the lag-radar.

# NPM
$ npm install lag-radar --save

Import the lag-radar into your module.

import lagRadar from 'lag-radar';

Create a new instance and config the lag radar.

const myRadar = lagRadar({
      // number of frames to draw
      frames: 50,    
      // sweep speed
      speed: 0.0017, 
      // in px
      size: 300,
      // in pix
      inset: 3,
      // where to attatch the radar to
      parent: document.body, 
      
});

Render the lag radar in the document.

myRadar()