Logo Magnet

Magnet logo made in canvas. Classed based and configurable.

To start, create an instance of the logo class "MagnetLogo". You can choose multiple settings, but by default the render method renders the full image.

var logo = new MagnetLogo(document.getElementById('logo'));
logo.render();

You can choose to render only the mantaray

var logoManta = new MagnetLogo(document.getElementById('logo-manta'));
logoManta.render({ backgroundEnabled: false, textEnabled: false });

Or only the text.

var logoText = new MagnetLogo(document.getElementById('logo-text'));
logoText.render({ mantaEnabled: false, backgroundEnabled: false });

To render an horizontal layout, use horizontal: true

var logoHorizontal = new MagnetLogo(document.getElementById('logo-horizontal'));
logoHorizontal.render({ horizontal: true });

Name Used in RGB HEX
Primary Manta ray and it's border, Selected items rgb(0, 131, 186) #0083BA
Secondary Main titles, covers and icons rgb(0, 59, 84) #003B54
Highlight Highlight items rgb(235, 154, 14) #EB9A0E
White Manta eyes rgb(255, 255, 255) #FFFFFF

Name Used in RGB HEX  
Light Table borders, lines, etc. rgb(242, 249, 252) #F2F9FC
Gray Backgrounds, used sparingly rgb(206, 212, 218) #CED4DA
Text Text rgb(102, 102, 102) #666666
Dark Alternative text color rgb(33, 37, 41) #212529

Total height Total width
Font Awesome icon