How to use the @pluginjs/utils.SvgElement function in @pluginjs/utils

createTrack(width, height, barsize, attributes) {
    const w = width
    const h = width / 2
    const d = barsize / 2
    const c = w / 2 - d

    return new SvgElement('path', {
      d: `M ${w},${h} m ${-2 * c},0 a ${c},${c} 0 1 1 ${w - 2 * d},0`,
      ...attributes
    })
  }
}

preserveAspectRatio: 'xMinYMin meet',
      viewBox: `0 0 ${this.options.svgSize} ${this.options.svgSize}`
    })

    this.samples[type].track = this.createTrack(
      this.options.svgSize,
      this.options.svgSize,
      this.options.svgBarsize,
      {
        stroke: this.options.svgTrackcolor,
        fill: 'none',
        'stroke-width': this.options.svgBarsize
      }
    )

    this.samples[type].bar = new SvgElement('path', {
      fill: 'none',
      'stroke-width': this.options.svgBarsize,
      stroke: this.options.svgFillcolor,
      'stroke-linejoin': 'round',
      'stroke-linecap': 'round'
    })

    append(this.samples[type].track, this.samples[type].svg)
    append(this.samples[type].bar, this.samples[type].svg)
    append(this.samples[type].svg, this.samples[type].ring)

    this.drawBar(100, type)
    this.updateBar(
      Math.floor((this.times[type] / this.maximums[index]) * 1000) / 10,
      100,
      type

buildSvg() {
    this.$svg = new SvgElement('svg', {
      version: '1.1',
      preserveAspectRatio: 'xMinYMin meet',
      viewBox: `0 0 ${this.width} ${this.height}`
    })
  }

createTrack(width, height, barsize, attributes) {
    const cx = width / 2
    const cy = height / 2
    const d = barsize / 2

    return new SvgElement('circle', {
      r: cx - d,
      cx,
      cy,
      ...attributes
    })
  }

createTrack(width, height, barsize, attributes) {
    const d = barsize / 2
    const w = width - d
    const h = height - d

    return new SvgElement('path', {
      d: `M${w / 2} ${d} L${w} ${d} L${w} ${h} L${d} ${h} L${d} ${d} L${w /
        2} ${d} Z`,
      style: 'stroke-linecap: round;stroke-linejoin: round;',
      ...attributes
    })
  }
}

buildBar() {
    this.$bar = new SvgElement('path', {
      fill: 'none',
      'stroke-width': this.options.barsize,
      stroke: this.options.barcolor,
      'stroke-linejoin': 'round',
      'stroke-linecap': 'round'
    })
    this.$svg.appendChild(this.$bar)
  }

createTrack(width, height, barsize, attributes) {
    const d = barsize / 2
    const x = (width - d) / 2
    const y = (height - d) / 2

    return new SvgElement('path', {
      d: `M${x} ${d} 
        L${x + x * Math.cos(Math.PI / 10)} ${y - y * Math.sin(Math.PI / 10)}
        L${x + x * Math.cos((Math.PI * 3) / 10)} ${y +
        y * Math.sin((Math.PI * 3) / 10)}
        L${x - x * Math.cos((Math.PI * 3) / 10)} ${y +
        y * Math.sin((Math.PI * 3) / 10)}
        L${x - x * Math.cos(Math.PI / 10)} ${y - y * Math.sin(Math.PI / 10)}
        L${x} ${d} Z`,
      style: 'stroke-linecap: round;stroke-linejoin: round;',
      ...attributes
    })
  }
}