OakEngine Logo

A JavaScript library for creating and animating the OakEngine logo.

Live demo on CodePen

Installation

npm install oakengine-logo

composer require oakengine/logo

Usage

In Browser

<scriptsrc="node_modules/oakengine-logo/src/js/oakenginelogo.js"></script><script>// Create a logo instanceconstlogo=newOakEngineLogo('#logo-container',{colors: ["#0066cc","#0077e6","#0088ff","#3399ff","#66b3ff","#99ccff","#4d4d4d","#fff"],outerSpeed: 0.3,innerSpeed: -0.15,size: 250});</script>

In Node.js

constOakEngineLogo=require('oakengine-logo');// Note: The library uses browser-specific APIs for rendering// In Node.js, you can only access the class and its configurationconstlogo=newOakEngineLogo();console.log(logo.colors);

Configuration Options

• colors: Array of 8 colors for the logo layers (default: ["#000", "#fff", "#000", "#fff", "#000", "#fff", "#4F4F4F", "#fff"])
• outerSpeed: Rotation speed of the outer rings (default: -0.3)
• innerSpeed: Rotation speed of the inner gear (default: 0.2)
• size: Size of the logo in pixels (default: 200)

Methods

• pause(): Pause the animation
• play(): Resume the animation
• toggleAnimation(): Toggle between play and pause
• updateColors(colors): Update the colors of the logo
• updateSpeeds(outerSpeed, innerSpeed): Update the rotation speeds
• reverse(): Reverse the rotation direction
• reset(): Reset the rotation to the initial position

License

MIT