Cre8bitJS

(/kree-ayt-bit jay-es/) The lightweight Javascript library for adding 8-bit style retro video game characters to your page.

An easy to use api, which can be as simple as passing the name of the character you want to add, using all the default options.

As the svgs are created dynamically, you can customise them before and after creation. You can pass an object of options when creating the svg or use helper methods if you want to modify the svg after it's on your page.

See the documentation for the available charactes, options and methods

script.js

import cre8bit from 'cre8bitjs';
new cre8bit().create('ghost');
new cre8bit().create('ghost', {
    size: 12,
    colour: 'pink'
});
const blinky = new cre8bit().create('ghost');
blinky.setSize(10).setColour('red');

*New* Reflections

reflection: true

New to version 2.1.0, use this option to produce a nice reflection of the svg character to let you reminisce about a time when this was a go to design effect.

This is a feature that would be very hard to achieve with CSS alone.

Changing colours

default

colour: 'green'

Each character has one default colour that can be changed, allowing you to create different versions of the same svg. Depending on the character, this will change the colour of all the svg or part of it.

Animating

animate: true

Only some of the characters are eligible for the animate option. If you try to use it on a character than doesn't animate, the svg will switch between visible and unvisible.

There is a stop method, to cancel an animating svg after creation.

See the docs for information on which characters you can animate.

api

Characters

  • ghost
  • kirby
  • mario
  • mushroom
  • pacman
  • pikachu
  • poke ball
  • space invader
  • ufo

Options

  • animate
  • colour
  • flip
  • outline
  • parentClass
  • reflection
  • responsive
  • size
  • wrapperClass

Methods

  • setColour
  • setFlip
  • setSize
  • stop