UNPKG

boleto-barcode-svg

Version:

Generate brazilian boleto barcode in SVG

237 lines (233 loc) 15.3 kB
import { boletoBarcodeSvg } from "./index.js" const number = "34195.00008 01233.203189 64221.470004 5 84410000002000" const svg = boletoBarcodeSvg(number) const expected = `<svg viewBox="0 0 1264 100"> <rect y="0" height="100%" fill="#000" width="4" x="0"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="4"></rect> <rect y="0" height="100%" fill="#000" width="4" x="8"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="12"></rect> <rect y="0" height="100%" fill="#000" width="8" x="16"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="24"></rect> <rect y="0" height="100%" fill="#000" width="8" x="28"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="36"></rect> <rect y="0" height="100%" fill="#000" width="4" x="40"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="44"></rect> <rect y="0" height="100%" fill="#000" width="4" x="52"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="56"></rect> <rect y="0" height="100%" fill="#000" width="4" x="60"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="64"></rect> <rect y="0" height="100%" fill="#000" width="8" x="72"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="80"></rect> <rect y="0" height="100%" fill="#000" width="4" x="84"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="88"></rect> <rect y="0" height="100%" fill="#000" width="4" x="96"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="100"></rect> <rect y="0" height="100%" fill="#000" width="4" x="104"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="108"></rect> <rect y="0" height="100%" fill="#000" width="8" x="116"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="124"></rect> <rect y="0" height="100%" fill="#000" width="8" x="128"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="136"></rect> <rect y="0" height="100%" fill="#000" width="4" x="144"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="148"></rect> <rect y="0" height="100%" fill="#000" width="8" x="152"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="160"></rect> <rect y="0" height="100%" fill="#000" width="4" x="164"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="168"></rect> <rect y="0" height="100%" fill="#000" width="4" x="176"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="180"></rect> <rect y="0" height="100%" fill="#000" width="4" x="184"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="188"></rect> <rect y="0" height="100%" fill="#000" width="4" x="192"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="196"></rect> <rect y="0" height="100%" fill="#000" width="8" x="200"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="208"></rect> <rect y="0" height="100%" fill="#000" width="4" x="216"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="220"></rect> <rect y="0" height="100%" fill="#000" width="8" x="224"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="232"></rect> <rect y="0" height="100%" fill="#000" width="8" x="240"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="248"></rect> <rect y="0" height="100%" fill="#000" width="4" x="252"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="256"></rect> <rect y="0" height="100%" fill="#000" width="4" x="260"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="264"></rect> <rect y="0" height="100%" fill="#000" width="4" x="272"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="276"></rect> <rect y="0" height="100%" fill="#000" width="8" x="284"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="292"></rect> <rect y="0" height="100%" fill="#000" width="4" x="296"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="300"></rect> <rect y="0" height="100%" fill="#000" width="4" x="304"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="308"></rect> <rect y="0" height="100%" fill="#000" width="8" x="312"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="320"></rect> <rect y="0" height="100%" fill="#000" width="8" x="328"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="336"></rect> <rect y="0" height="100%" fill="#000" width="4" x="344"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="348"></rect> <rect y="0" height="100%" fill="#000" width="4" x="352"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="356"></rect> <rect y="0" height="100%" fill="#000" width="4" x="360"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="364"></rect> <rect y="0" height="100%" fill="#000" width="8" x="368"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="376"></rect> <rect y="0" height="100%" fill="#000" width="8" x="384"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="392"></rect> <rect y="0" height="100%" fill="#000" width="4" x="400"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="404"></rect> <rect y="0" height="100%" fill="#000" width="4" x="408"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="412"></rect> <rect y="0" height="100%" fill="#000" width="4" x="416"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="420"></rect> <rect y="0" height="100%" fill="#000" width="8" x="428"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="436"></rect> <rect y="0" height="100%" fill="#000" width="8" x="440"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="448"></rect> <rect y="0" height="100%" fill="#000" width="4" x="452"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="456"></rect> <rect y="0" height="100%" fill="#000" width="4" x="464"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="468"></rect> <rect y="0" height="100%" fill="#000" width="4" x="472"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="476"></rect> <rect y="0" height="100%" fill="#000" width="8" x="480"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="488"></rect> <rect y="0" height="100%" fill="#000" width="8" x="496"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="504"></rect> <rect y="0" height="100%" fill="#000" width="4" x="512"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="516"></rect> <rect y="0" height="100%" fill="#000" width="4" x="520"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="524"></rect> <rect y="0" height="100%" fill="#000" width="4" x="532"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="536"></rect> <rect y="0" height="100%" fill="#000" width="8" x="540"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="548"></rect> <rect y="0" height="100%" fill="#000" width="8" x="556"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="564"></rect> <rect y="0" height="100%" fill="#000" width="4" x="568"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="572"></rect> <rect y="0" height="100%" fill="#000" width="4" x="576"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="580"></rect> <rect y="0" height="100%" fill="#000" width="4" x="584"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="588"></rect> <rect y="0" height="100%" fill="#000" width="8" x="592"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="600"></rect> <rect y="0" height="100%" fill="#000" width="8" x="608"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="616"></rect> <rect y="0" height="100%" fill="#000" width="4" x="624"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="628"></rect> <rect y="0" height="100%" fill="#000" width="4" x="632"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="636"></rect> <rect y="0" height="100%" fill="#000" width="4" x="640"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="644"></rect> <rect y="0" height="100%" fill="#000" width="8" x="648"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="656"></rect> <rect y="0" height="100%" fill="#000" width="8" x="664"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="672"></rect> <rect y="0" height="100%" fill="#000" width="4" x="680"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="684"></rect> <rect y="0" height="100%" fill="#000" width="4" x="688"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="692"></rect> <rect y="0" height="100%" fill="#000" width="4" x="700"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="704"></rect> <rect y="0" height="100%" fill="#000" width="8" x="708"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="716"></rect> <rect y="0" height="100%" fill="#000" width="8" x="720"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="728"></rect> <rect y="0" height="100%" fill="#000" width="4" x="732"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="736"></rect> <rect y="0" height="100%" fill="#000" width="4" x="744"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="748"></rect> <rect y="0" height="100%" fill="#000" width="8" x="756"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="764"></rect> <rect y="0" height="100%" fill="#000" width="4" x="772"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="776"></rect> <rect y="0" height="100%" fill="#000" width="4" x="780"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="784"></rect> <rect y="0" height="100%" fill="#000" width="8" x="788"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="796"></rect> <rect y="0" height="100%" fill="#000" width="8" x="800"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="808"></rect> <rect y="0" height="100%" fill="#000" width="8" x="812"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="820"></rect> <rect y="0" height="100%" fill="#000" width="4" x="828"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="832"></rect> <rect y="0" height="100%" fill="#000" width="4" x="836"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="840"></rect> <rect y="0" height="100%" fill="#000" width="4" x="844"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="848"></rect> <rect y="0" height="100%" fill="#000" width="4" x="856"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="860"></rect> <rect y="0" height="100%" fill="#000" width="4" x="868"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="872"></rect> <rect y="0" height="100%" fill="#000" width="8" x="880"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="888"></rect> <rect y="0" height="100%" fill="#000" width="8" x="892"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="900"></rect> <rect y="0" height="100%" fill="#000" width="4" x="904"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="908"></rect> <rect y="0" height="100%" fill="#000" width="8" x="912"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="920"></rect> <rect y="0" height="100%" fill="#000" width="4" x="928"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="932"></rect> <rect y="0" height="100%" fill="#000" width="4" x="936"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="940"></rect> <rect y="0" height="100%" fill="#000" width="4" x="944"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="948"></rect> <rect y="0" height="100%" fill="#000" width="8" x="956"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="964"></rect> <rect y="0" height="100%" fill="#000" width="4" x="968"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="972"></rect> <rect y="0" height="100%" fill="#000" width="8" x="976"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="984"></rect> <rect y="0" height="100%" fill="#000" width="8" x="988"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="996"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1004"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1008"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1012"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="1016"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1024"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1028"></rect> <rect y="0" height="100%" fill="#000" width="8" x="1032"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="1040"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1048"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1052"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1056"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1060"></rect> <rect y="0" height="100%" fill="#000" width="8" x="1064"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="1072"></rect> <rect y="0" height="100%" fill="#000" width="8" x="1080"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1088"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1092"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1096"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1100"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="1104"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1112"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1116"></rect> <rect y="0" height="100%" fill="#000" width="8" x="1120"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="1128"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1136"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1140"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1144"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1148"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1152"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="1156"></rect> <rect y="0" height="100%" fill="#000" width="8" x="1164"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="1172"></rect> <rect y="0" height="100%" fill="#000" width="8" x="1180"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1188"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1192"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1196"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1200"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1204"></rect> <rect y="0" height="100%" fill="#000" width="8" x="1208"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="1216"></rect> <rect y="0" height="100%" fill="#000" width="8" x="1224"></rect> <rect y="0" height="100%" fill="#fff" width="8" x="1232"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1240"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1244"></rect> <rect y="0" height="100%" fill="#000" width="8" x="1248"></rect> <rect y="0" height="100%" fill="#fff" width="4" x="1256"></rect> <rect y="0" height="100%" fill="#000" width="4" x="1260"></rect> </svg>` console.assert(svg === expected, "wrong barcode!")