Designing Leggings With Code: Bombsheller LookLab

Hello blog readers old and new! I’m leggers, Über-Wizard/Guru Technologist at Bombsheller. Basically that means I write code. I’m excited to announce an open-source tool I made that enables a new method of leggings design: writing code.

Shells, tights, code, computer, CAD, sporty

Designs made using JavaScript by leggers

You use JavaScript (JS) to create Scalable Vector Graphics (SVG) in your browser. My colleague, ninja-rockstar-WebQueen Arielle, named it LookLab. You don’t have to install any software to start messing around. If you can’t wait to get hacking, go download the code! Have design ideas but don’t want to code? Download our Illustrator template.

As most of you know, Bombsheller makes rad pants for gals and guys. You create a design and we manufacture it, paying you per purchase. I built this tool in the hope that it will a) allow procedural artists to get their work on a new canvas and b) help people “afraid of code” get their feet wet and make cool things.

“What is SVG? What is JS?” you might be asking. Intrepid reader, your questions will be answered! Scalable Vector Graphics (SVG) is a format for specifying 2D images. Think Adobe Illustrator-style graphics, but in your browser. Yes, it’s that powerful. View some examples here and here if you don’t believe me. Any of those examples can be put on leggings! Except the moving stuff, of course. The wearer supplies the animation. 😉

Leggings, Crossfit, fitness, exercise, tights, mens, men's

leggers working out in his code-designed leggings

JavaScript (JS) is a programming language your browser understands. It’s used and abused everywhere on the Internet. For LookLab, it serves as the “logic behind the graphics.” Instead of hand-writing an SVG, you use JS to generate it. It’s like copy-paste on steroids. Seriously, you can say something like “draw 500 rectangles” in JavaScript and they’ll appear in your design! JS allows you to describe a shape once and pattern it all over your legs, like in these designs.

Shells, tights, code, computer, CAD, sporty

If you’ve read this far and know literally nothing about JavaScript or SVG, I applaud you. Here are some resources to get you started: Mozilla has a great explainer, Learn JS has a nice interactive introduction and Codecademy’s tutorial is supposed to be great. Don’t be afraid to use Google or ask your friends for recommendations!

Please leave feedback on your experience with Look Lab on GitHub. We’re always looking for ways to improve it!

We look forward to seeing your blinged-out designs.


Shells, tights, code, computer, CAD, sporty