This is just a small snippet that generates a github badge with supported version of love2d that you can use for your game projects.
It makes use of MoonXML to make generate the actual SVG (XML) code and a string buffer to save the result, which wouldn't be needed in most production situations.
| height = 20 | |
| width = 100 | |
| split = 6/10 | |
| tag = (number, color='#ea316e') -> | |
| buf = require'strbuffer'! | |
| generator = require'moonxml'.xml -> | |
| svg { | |
| xmlns: 'http://www.w3.org/2000/svg' | |
| :width | |
| :height | |
| viewBox: "0 0 #{width} #{height}" | |
| fill: 'white' | |
| ['font-family']: 'sans-serif' | |
| }, -> | |
| linearGradient {id:'gradient', x2: '0', y2: '100%'}, -> | |
| stop offset: 0, ['stop-color']: '#bbb', ['stop-opacity']: .1 | |
| stop offset: 1, ['stop-opacity']: .1 | |
| clipPath {id: 'clip'}, -> | |
| rect | |
| :width | |
| :height | |
| rx: 3 | |
| g {['clip-path']: "url('#clip')"}, -> | |
| rect | |
| fill: '#555' | |
| :height | |
| :width | |
| rect | |
| fill: color | |
| :height | |
| width: width*(1-split) | |
| x: width*split | |
| rect | |
| fill: 'url(#gradient)' | |
| :height | |
| :width | |
| text 'Löve ♥', | |
| ['text-anchor']: 'middle' | |
| ['alignment-baseline']: 'central' | |
| x: width*split / 2 | |
| y: height/2 | |
| text number, | |
| ['text-anchor']: 'middle' | |
| ['alignment-baseline']: 'central' | |
| x: width*split + width*(1-split) / 2 | |
| y: height/2 | |
| generator buf\append | |
| buf | |
| print tag '11.1' |
| <svg xmlns="http://www.w3.org/2000/svg" font-family="sans-serif" height="80" width="400" fill="white" viewBox="0 0 100 20"><linearGradient y2="100%" id="gradient" x2="0"><stop stop-color="#bbb" offset="0" stop-opacity="0.1"/><stop stop-opacity="0.1" offset="1"/></linearGradient><clipPath id="clip"><rect rx="3" height="20" width="100"/></clipPath><g clip-path="url('#clip')"><rect height="20" fill="#555" width="100"/><rect x="60.0" height="20" fill="#ea316e" width="40.0"/><rect height="20" fill="url(#gradient)" width="100"/><text y="10.0" x="30.0" text-anchor="middle" alignment-baseline="central">Löve ♥</text><text y="10.0" x="80.0" text-anchor="middle" alignment-baseline="central">11.1</text></g></svg> |
