How to use snapsvg - 10 common examples

To help you get started, we’ve selected a few snapsvg examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github CodeForPhilly / philly-ward-leaders / src / components / baseball-card / svg.js View on Github external
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
github fralonra / lottery-wheel / src / index.js View on Github external
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]()
  }
github javallone / regexper-static / src / js / parser / javascript.js View on Github external
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(() => {
github CodeForPhilly / philly-ward-leaders / src / components / baseball-card / svg.js View on Github external
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
github javallone / regexper-static / src / js / parser / javascript.js View on Github external
.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.
github microsoft / PowerBI-visuals-ClusterMap / lib / @uncharted / personas / src / personas.persona.js View on Github external
Persona.prototype.merge = function(target) {
    /* unregister all events */
    this.invalidate();
    /* unhighlight the target */
    target.unhiglightForMerge();
    /* animate the merge */
    var matrix = Snap.matrix();
    matrix.e = target.position.x;
    matrix.f = target.position.y;
    matrix.scale(0);
    this.animate({transform: matrix}, this.mAnimationDurationBase * 2, mina.easein, function() {
        /* since a persona handles its own container, remove it from the DOM */
        this.remove();
        /* if the parent of this persona is set and it has an objects array, remove this persona from it */
        var parent = this.parentNode;
        if (parent && parent.removeObject) {
            parent.removeObject(this);
        }
        /* remove this graphical persona from the data */
        this.mData.graphicalPersona = null;
        /* trigger the merged event */
        this.mEventCenter.publish(Events.merged, this, target);
    }.bind(this));
github saschwarz / react-svgpathplayer / src / svgpathplayer.jsx View on Github external
play(){
        let start = this.state.position;
        if (start >= this.state.length){
            start = 0; // at the end and pressed play so restart
        }
        let remainingLength = this.state.length - start;
        let remainingTime = this.props.time * remainingLength / this.state.length;
        this._segmentToPath();
        this.setState({mode: 'playing'});
        this.path.attr({'stroke-dasharray': this.state.length + ' ' + this.state.length});
        this.path.attr({display: 'block'});
        this.snapAnimate = Snap.animate(remainingLength, 0,
                                        (val) => { // incremental callback
                                            let newPos = this.state.length - val;
                                            this.path.attr({'stroke-dashoffset': val});
                                            if (this.marker) {
                                                this._positionMarker(this.path,
                                                                    newPos,
                                                                    this.state.length);
                                            }
                                            this.setState({position: newPos,
                                                           step: this._segmentFromPosition(newPos)});
                                        },
                                        remainingTime,
                                        mina.linear,
                                        () => { // end callback
                                            this.setState({mode: 'path',
                                                           position: 0});
github microsoft / PowerBI-visuals-ClusterMap / lib / @uncharted / personas / src / personas.persona.gauge.js View on Github external
var separatorWidth = this.mOptions.config.gaugeSeparatorWidth;

            if (animated) {
                /* compute the color difference */
                var colorDifference = {
                    r: newColor.r - currentColor.r,
                    g: newColor.g - currentColor.g,
                    b: newColor.b - currentColor.b,
                    a: newColor.a - currentColor.a,
                };

                /* save the current value and compute the value change */
                var currentValue = barInfo.currentValue;
                var valueChange = (progress + progressOffset) - currentValue;

                barInfo.animation = Snap.animate(0, 1,
                    function (delta) {
                        var animatedColor = 'rgba(' +
                                            (currentColor.r + (colorDifference.r * delta)) + ',' +
                                            (currentColor.g + (colorDifference.g * delta)) + ',' +
                                            (currentColor.b + (colorDifference.b * delta)) + ',' +
                                            (currentColor.a + (colorDifference.a * delta)) + ')';
                        var value = currentValue + (valueChange * delta);
                        barInfo.currentValue = value;
                        bar.attr({'stroke-dasharray': this.mCircumference * value + ' ' + this.mCircumference * (1.0 - value), 'stroke': animatedColor});
                        if (separator) {
                            value += value > 0 ? separatorWidth : 0;
                            separator.attr({'stroke-dasharray': (this.mCircumference * value) + ' ' + this.mCircumference * (1.0 - value)});
                        }
                    }.bind(this),
                    this.mOptions.config.transitionsDuration, mina.linear, function () {
                        barInfo.animation = null;
github saschwarz / react-svgpathplayer / src / svgpathplayer.jsx View on Github external
_positionMarker(path, location, end){
        if (this.marker) {
            let point = Snap.path.getPointAtLength(path, location);
            let now = point;
            if (end && end - location < 1) {
                // Snap.svg at very end of path returns rotation as 90 degrees
                while (point.alpha === 90) {
                    location -= 1;
                    point = Snap.path.getPointAtLength(path, location);
                }
            }
            this.marker.transform('translate(' + now.x + ',' + now.y + ') rotate('+ (point.alpha - 90)+')');
        }
    }
github fralonra / lottery-wheel / src / index.js View on Github external
let textSum = 0 // a-z0-9 为 1,其他为 2
      for (let i = 0; i < d.text.length; ++i) {
        if (d.text[i].match(/\w/)) {
          textSum += 1
        } else textSum += 2
      }
      if (!opt.fontSize && !d.fontSize) {
        fontSize = fontSize * textSum / 2 > dLen * opt.textBottomPercentage ? dLen * opt.textBottomPercentage / textSum * 2 : fontSize
      }
      const text = svg.text(opt.center[0], opt.pos[1] + opt.radius - (r * opt.textBottomPercentage * Snap.cos(self[deg] / 2)) - fontSize, d.text)
      text.attr({
        fill: d.fontColor ? d.fontColor : opt.color.prizeFont,
        fontSize: opt.fontSize ? opt.fontSize : fontSize
      })
      const box = text.node.getBoundingClientRect()
      text.transform(new Snap.Matrix().translate(-Math.round(box.width / 2), 2))

      const g = svg.g(pie, text).transform(new Snap.Matrix().rotate(self[deg] * Number(i), opt.center[0], opt.center[1]))
      self[turntable].add(g)
    }
  }

snapsvg

JavaScript Vector Library

Apache-2.0
Latest version published 7 years ago

Package Health Score

58 / 100
Full package analysis

Similar packages