How to use the snapsvg function in snapsvg

export function createBack (el, contentsEl, data) {
  const isRepublican = (data.party === 'republican')
  const config = {
    cardWidth: 250,
    cardHeight: 375,
    cardBorderWidth: 15,
    cardBorderColor: isRepublican ? '#a12222' : '#2284a1',
    cardInsideColor: '#CDD8DB'
  }

  const svg = Snap(el)
  svg.attr({
    viewBox: [0, 0, config.cardWidth, config.cardHeight]
  })

  // Card
  svg.rect(5, 5, config.cardWidth - 10, config.cardHeight - 10, 2)
    .attr({
      fill: config.cardBorderColor,
      stroke: config.cardBorderColor,
      strokeWidth: 10
    })

  // Inside
  const insideX = config.cardBorderWidth
  const insideY = config.cardBorderWidth
  const insideWidth = config.cardWidth - config.cardBorderWidth * 2

draw () {
    const self = this
    const opt = self.option
    if (!opt.el) throw new Error('el is undefined in Wheel')
    if (!opt.data) throw new Error('data is undefined in Wheel')

    const center = opt.pos.map(p => p + opt.radius)
    opt.center = center

    const svg = Snap(opt.el)
    svg.node.style.width = String(opt.radius * 2) + 'px'
    svg.node.style.height = String(opt.radius * 2) + 'px'

    self[deg] = 360 / opt.data.length

    // image resource provided?
    if (opt.image) self[drawResource](svg)
    else self[drawDefault](svg)

    self[animeFunc]()
  }

render() {
    let svg = Snap(this.container.querySelector('svg'));

    return this.parsed.render(svg.group())
      // Once rendering is complete, the rendered expression is positioned and
      // the SVG resized to create some padding around the image contents.
      .then(result => {
        let box = result.getBBox();

        result.transform(Snap.matrix()
          .translate(10 - box.x, 10 - box.y));
        svg.attr({
          width: box.width + 20,
          height: box.height + 20
        });
      })
      // Stop and remove loading indicator after render is totally complete.
      .then(() => {

export function createFront (el, data) {
  const isRepublican = (data.party === 'republican')
  const config = {
    cardWidth: 300,
    cardHeight: 450,
    cardBorderWidth: 15,
    cardBorderColor: isRepublican ? '#a12222' : '#2284a1',
    topLeftCut: 65,
    bottomRightCut: 95
  }

  const svg = Snap(el)
  svg.attr({
    viewBox: [0, 0, config.cardWidth, config.cardHeight]
  })

  // Card
  svg.rect(5, 5, config.cardWidth - 10, config.cardHeight - 10, 2)
    .attr({
      fill: config.cardBorderColor,
      stroke: config.cardBorderColor,
      strokeWidth: 10
    })

  const photoX = 0
  const photoY = config.cardBorderWidth
  const photoWidth = config.cardWidth - config.cardBorderWidth // + data.photoOffset
  const photoHeight = config.cardHeight - config.cardBorderWidth

beforeEach(function() {
      var parser = new javascript.Parser('a');
      this.node = parser.__consume__terminal();
      this.node.state = {};

      this.svg = Snap(document.createElement('svg'));
      this.node.container = this.svg.group();
      spyOn(this.node, 'renderLabel').and.callThrough();
    });

beforeEach(function() {
      var parser = new javascript.Parser('\\b');
      this.node = parser.__consume__terminal();
      this.node.state = {};

      this.svg = Snap(document.createElement('svg'));
      this.node.container = this.svg.group();
      spyOn(this.node, 'renderLabel').and.callThrough();
    });

constructor(element, graph, width, height) {
    super(element, graph, width, height)
    this.canvas = new SnapSvg(this.width, this.height, element)
    this.lineStyle = {
      stroke: '#abcdef',
      'stroke-width': '2px',
    }
  }

beforeEach(function() {
      var svg = Snap(document.createElement('svg'));

      this.text = svg.text();
      this.rect = svg.rect();
      this.content = svg.rect();

      this.node.container = jasmine.createSpyObj('container', ['addClass', 'text', 'rect', 'prepend']);
      this.node.container.text.and.returnValue(this.text);
      this.node.container.rect.and.returnValue(this.rect);

      this.node.type = 'example-type';
    });

_updateSvgMorphOnOpenChange() {
        const svgMorphPathSnap = new Snap(this._svgMorphEl).select('path');

        this._resetSvgMorphPathTimeout && clearTimeout(this._resetSvgMorphPathTimeout);

        if (this.props.isOpen) {
            this._resetSvgMorphPathTimeout = null;
            svgMorphPathSnap.animate({ path: svgMorphPaths.open }, svgMorphDurations.open, window.mina.easeinout);
        } else {
            this._resetSvgMorphPathTimeout = setTimeout(() => {
                this._resetSvgMorphPathTimeout = null;
                svgMorphPathSnap.attr({ path: svgMorphPaths.closed });
            }, svgMorphDurations.closed);
        }
    }