Default
JS Code Required
// The most basic usage creating a character with the default values.
new cre8bit().create('space invader');
Options
JS Code Required
// Customise with some options.
new cre8bit().create('space invader', {
size: 12,
colour: 'slateblue'
});
Helper methods
JS Code Required
// Using helper methods after creation.
const ufo = new cre8bit().create('ufo');
ufo.setSize(12).setColour('#ff6461');
Animate
JS Code Required
// Animate option available on some characters
new cre8bit().create('space invader', {
size: 12,
colour: '#333',
animate: true
});
Outline
JS Code Required
// Outline option useful when character is same colour as background
new cre8bit().create('poke ball', {
size: 12,
outline: true
});
Wrapper
JS Code Required
// Add a wrapping div with the class name provided for you to apply your own styles.
- CSS file -
.svg-wrapper {
background: black;
padding: 30px;
width: fit-content;
}
- JS file -
new cre8bit().create('pacman', {
size: 9,
wrapperClass: 'svg-wrapper'
});
Parent
JS Code Required
// Add to an existing DOM element and use the flip option.
- HTML file -
<div class="svg-container"></div>
- CSS file -
.svg-container {
align-items: baseline;
background: black;
display: flex;
justify-content: center;
padding-block: 30px;
width: 100%;
}
.svg-container svg + svg {
margin-left: 30px;
}
- JS file -
new cre8bit().create('pacman', {
size: 8,
flip: true,
parentClass: 'svg-container'
});
new cre8bit().create('ghost', {
size: 8,
flip: true,
parentClass: 'svg-container'
});