Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


    <p>Find a product in your house and enter the full UPC (the 12 digit number under the barcode),</br>or enter 652810119337 if you are to lazy to find something in your house.</br>Press the <span style="font-weight:bold;">Generate Barcode</span> button.</br>To test, scan the barcode with a barcode scanner app on your phone.</p>
        <P><span style="font-weight:bold;">Enter UPC-A:</span> 
            <INPUT TYPE="TEXT" id="upcnumber" value="652810119337">
            <INPUT TYPE="Button" Value="Generate Barcode" id="clear" onClick="generateBarcode();">

<div id="container" style="margin:30px,0,0,0;">
<svg id="upcCode"></svg>
<button value="" onclick="download()">Save as SVG</button><br><br>


                body {
.chart rect {
  fill: black;



                function generateBarcode() {
    // Reterive the entered barcode
    var u = document.getElementById('upcnumber').value;
    // Split it into an array
    var upc = u.split('');
    // Break up the barcode. Used for writing the numbers underneath the bar code.
    var ns = u.substring(0, 1); //Number System
    var mc = u.substring(1, 6); //Manufactures Code
    var pc = u.substring(6, 11); //Product Code
    var cd = u.substring(11, 12); //Check Digit

    // Modules for barcodes
    var sg = ["101"]; //Start and End Guards are 3 modules
    var mg = ["01010"]; //Middle Guard is 5 modules
    // Each number, 0 through 9, is 7 modules.
    // Left side of the Middle Guard (manufactures code) is odd parity
    var op = ["0001101", "0011001", "0010011", "0111101", "0100011", "0110001", "0101111", "0111011", "0110111", "0001011"];
    // Right side of Middle Guard (product code) is even parity
    var ep = ["1110010", "1100110", "1101100", "1000010", "1011100", "1001110", "1010000", "1000100", "1001000", "1110100"];

    // Loop through the first 6 digits of the barcode and find their corresponding modules in the odd parity array
    upcOP = "";
    var i = 0;
    while (i <= 5) {
        upcOP += op[upc[i]];

    // Loop through the last 6 digits of the barcode and find their corresponding modules in the even parity array
    upcEP = "";
    var i = 6;
    while (i <= 11) {
        upcEP += ep[upc[i]];

    // Create a string of all the modules including the guards
    var data = sg + upcOP + mg + upcEP + sg;

    // Set height and width of the barcode modules
    var height = 100,
        barWidth = 2;

    // Sets scale range for barcode
    var x = d3.scale.linear()
        .domain([0, d3.max(data)]) // length
    .range([0, height]); // height"#upcCode").remove(); //Clear the SVG container if a new upc code has been entered

    // Select container div and create new holder for the upc
    var chart ="#container")
        .attr("id", "upcCode")

    // Set the size of the upc holder
    var chart ="#upcCode")
        .attr("height", "130px")
        .attr("width", barWidth * data.length + 40);

    // Draw the barcode
    var bar = chart.selectAll("g")
        .attr("transform", function (d, i) {
        return "translate(" + i * barWidth + ")";

        .attr("height",function(d, i) { 
          // Adjusts the height of the guard bars by looking at their index
          if (i==0||i==2||i==46||i==48||i==92||i==94){return (d*100)} else {return(d*80)};
        .attr("width", barWidth);

    // Write human readable numbers under the barcode
        .attr("x", "1px")
        .attr("y", "100px")
        .style("font-size", "24px")
        .style("font-family", "sans-serif")

        .attr("x", "38px")
        .attr("y", "100px")
        .style("font-size", "24px")
        .style("font-family", "sans-serif")

        .attr("x", "128px")
        .attr("y", "100px")
        .style("font-size", "24px")
        .style("font-family", "sans-serif")

        .attr("x", "215px")
        .attr("y", "100px")
        .style("font-size", "24px")
        .style("font-family", "sans-serif")

function download(){
	var svg = document.getElementsByTagName("svg")[0];
	var svg_xml = (new XMLSerializer).serializeToString(svg);
	var blob = new Blob([svg_xml]);
	var url = window.URL || window.webkitURL;
	var blobURL = url.createObjectURL(blob);
	var a = document.createElement('a'); = "Barcode.svg";
	a.href = blobURL;