Create badges using node.js

Create badges using node.js

Hey everyone, Lately, I encountered an problem and the solution was to create the badge of my own. Since I was using node.js and I searched for it. Finally, swig was the answer to me. So here is the source of code that will help you to create badges of your own without any hassles.

node js
node js

So, first of all, you need to create a badge svg template. Below is the content of the file that you might want to save it in a file called “badge.svg”

{% set leftWidth = left.length * 10 %}
{% set rightWidth = right.length * 13.5 %}
{% set totalWidth = leftWidth + rightWidth - 10 %}
<svg xmlns="" width="{{ totalWidth }}" height="18">
  <linearGradient id="smooth" x2="0" y2="100%">
    <stop offset="0"  stop-color="#fff" stop-opacity=".7"/>
    <stop offset=".1" stop-color="#aaa" stop-opacity=".1"/>
    <stop offset=".9" stop-color="#000" stop-opacity=".3"/>
    <stop offset="1"  stop-color="#000" stop-opacity=".5"/>

  <mask id="round">
    <rect width="{{ totalWidth }}" height="18" rx="4" fill="#fff"/>

  <g mask="url(#round)">
    <rect width="{{ leftWidth }}" height="18" fill="#555"/>
    <rect x="{{ leftWidth }}" width="{{ rightWidth }}" height="18" fill="{{ color }}"/>
    <rect width="{{ totalWidth }}" height="18" fill="url(#smooth)"/>

  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="12">
    <text x="{{ leftWidth /2+1 }}" y="14" fill="#010101" fill-opacity=".3">{{ left }}</text>
    <text x="{{ leftWidth /2+1 }}" y="13">{{ left }}</text>
    <text x="{{ leftWidth + rightWidth /2.5-1 }}" y="14" fill="#010101" fill-opacity=".3">{{ right }}</text>
    <text x="{{ leftWidth + rightWidth /2.5-1 }}" y="13">{{ right }}</text>

And secondly, create a js file with the dependency of “swig“. So I installed it in my node application using

npm install swig

And finally, created a js file and added this and ran this js file to create a badge file.

var swig = require("swig");
var badgeValue = {
    left: "Left",
    right: "Right";
    color: "Red";
var badge = swig.renderFile("./badge.svg", badgeValue);

const fs = require("fs");
const file = fs.createWriteStream("file-badge.svg");

And there you go, you have a new file created.

Leave a Reply

Your email address will not be published. Required fields are marked *

How to whitelist website on AdBlocker?

How to whitelist website on AdBlocker?

  1. 1 Click on the AdBlock Plus icon on the top right corner of your browser
  2. 2 Click on "Enabled on this site" from the AdBlock Plus option
  3. 3 Refresh the page and start browsing the site
%d bloggers like this: