Generate tags from a list of names

README.md

Creates an SVG image from an array of names.

Example result:

How to use:

• Add your background images into a ‘background folder’
• Copy the code in an .html file next to this folder, and start a web server here.
• Convert your list of names into a JavaScript array (you have many ways to do this, for me, I copied my list from a sheet into the Atom text editor and then use the multi-line editing to add the necessary characters).
• Change parameters to make it yours.

tags.html

<!-- gist: https://gist.github.com/steren/08e7b343dabe7ea93550c9e10fa64e75 -->

<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.0/svg.js"></script>
<script src="https://rawgit.com/wout/svg.filter.js/2.0.2/dist/svg.filter.js"></script>

<div id="drawing"></div>

<style>
  body { margin: 0; }

  #drawing {
    width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
</style>

<script type="text/javascript">
  var saveSVG = (function () {
      var a = document.createElement("a");
      document.body.appendChild(a);
      a.style = "display: none";
      return function (data, fileName) {
          var blob = new Blob([data], {type: "image/svg+xml"}),
              url = window.URL.createObjectURL(blob);
          a.href = url;
          a.download = fileName;
          a.click();
          window.URL.revokeObjectURL(url);
      };
  }());
</script>

<script type="text/javascript">
  let names = ["Your","List","Of","Names","As","A","JavaScript","Array"]

  /** nb of different background image */
  let nbBackgrounds = 11;
  let nbLabelsX = 3;
  let nbLabelsY = 8;
  let sheet = 0;
  let startIndex = sheet * nbLabelsX * nbLabelsY;
  let imgX = 650;
  let imgY = 319;

  // names prints side with names, anythign else prints the backside
  let side = 'names';
  //side = 'a&s';


  // total width on the page
  let totalWidth = 680;
  let margin = 20;
  // size of the item on screen, to be adjusted to fit on a page
  let itemWidth = (totalWidth - (nbLabelsX + 1 ) * margin) / nbLabelsX;
  let itemHeight = itemWidth * imgY / imgX;
  // y position of the hole
  let holeX = 10;
  let holeMarginX = holeX + 20;

  // STYLES
  let colors = {
    lightBlue : '#a8c5cf',
    black : '#252A2B',
    lightSand: '#f7f6f5',
    white: '#FFFFFF',
  };

  let font = { 
    'family': 'Poiret One', 
    'size': 25, 
    'fill': colors.black, 
    'stroke': colors.black, 
    'stroke-width': '1px',
  };
  let dropShadow = function(add) {
    var blur = add.offset(0, 0).in(add.sourceAlpha).gaussianBlur(2)
    add.blend(add.source, blur)
  }
  let fontName = Object.assign({}, font);
  fontName.size = 31;
  let fontNameSmall = Object.assign({}, font);
  fontNameSmall.size = 23;



  // DRAW
  let draw = SVG('drawing')
  .size((itemWidth + margin) * nbLabelsX + margin, (itemHeight + margin) * nbLabelsY + margin);
  
  // background
  draw.rect((itemWidth + margin) * nbLabelsX + margin, (itemHeight + margin) * nbLabelsY + margin)
      .fill(colors.white);

  for(let i = 0; i < nbLabelsX * nbLabelsY; i++) {

    let group = draw.group();
    group.x( margin + (i % nbLabelsX) * (itemWidth + margin) );
    group.y( margin + Math.floor(i / nbLabelsX) * (itemHeight + margin) );

    // image
    group.image('background/download (' + i % nbBackgrounds + ').png')
              .size(itemWidth, itemHeight)
              .filter(dropShadow);

    let holeMark = group.rect(5, 5)
            .fill(colors.white);
    if(side == 'names') {
      holeMark.center(holeX, itemHeight / 2);
    } else {
      holeMark.center(itemWidth - holeX, itemHeight / 2);
    }

    // name
    if(side == 'names') {
      let nameText = '';
      if( i + startIndex < names.length) {
        nameText = names[i + startIndex];
      }
      let name = group.text(nameText).font(fontName);
      // if too large, reduce font size
      if(name.node.getBBox().width > (itemWidth - 2 * margin)) {
        console.log('long name: ', names[i]);
        name.font(fontNameSmall);
      } 
      name.center((itemWidth - holeMarginX) / 2 + holeMarginX, itemHeight / 2);

    } else {
      group.text('Anne & Steren').font(font)
                               .center((itemWidth - holeMarginX) / 2, itemHeight / 2)
    }
  
  }

  // EXPORT
  //saveSVG(draw.svg(), 'labels.svg');
</script>