Instantly share code, notes, and snippets.

@steren /README.md
Last active Jul 17, 2016

Embed
What would you like to do?
Generate tags from a list of names

Creates an SVG image from an array of names.

Example result:

tags

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.
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment