A javascript library to generate (per-) versions of the Luxeria logo as a scalable vector graphics. The library (luxlogo.js) generates SVG/XML code, which can be used in HTML files. The XML output can be serialized and exported to a file to get a printable/cuttable .svg-file.
The library is written in pure javascript and does not require any external libraries other than libraries available in modern browsers. The idea originated from the challenge to implement the Luxeria logo in OpenSCAD.
A demo site utilizing all parameters of the library can be found here.
Include the luxlogo.js file in your HTML page:
<script src="https://luxeria.ch/luxlogo.js/js/luxlogo.js"></script>
Then instantiate the LuxLogo class with the id of the container and manipulate the variables. Finally call the generate() method which fills the SVG/XML code into the container.
<script>
const logo = new LuxLogo("logo-container");
logo.rotation = 20;
logo.color1 = "#ff0000";
logo.numArrows = 3;
logo.generate();
</script>
<div id="logo-container"><!-- SVG goes here --></div>
All rel-variables are relative to the size-variable.
| Variable | Description | Default |
|---|---|---|
| size | Size of the logo in pixels | 512 |
| color1 | Primary color of the logo | “#000000” |
| color2 | Primary color of the logo | “#ffffff” |
| rotation | Rotation angle in degrees | 0 |
| numArrows | Number of arrows in the logo | 3 |
| relBorderThickness | ‰ Relative border thickness | 0 |
| relSpacing | ‰ Relative spacing between arrows | 4 |
| relInnerCircleDiameter | % Relative diameter of the inner circle | 24 |
| relArcDiameter | % Relative diameter of the arcs | 84 |
| relArcThickness | % Relative thickness of the arcs | 12 |
| relArrowTipWidth | % Relative width of the arrow tip | 24 |
| relArrowTipStart | % Relative start of the arrow tip from center | 20 |
| relArrowTipEnd | % Relative end of the arrow tip from center | 50 |
| relArrowNotchOffset | ‰ Relative offset of the arrow notch | 2.4 |
| relArrowBaseWidth | % Relative width of the arrow base | 12 |