Akari Icon as a Code

Akari's logo icon as a code.

screenrecording_x2.mp4

This repository include Logo Generator Controls, SVG exporter and Logo class in vanilla javascript.

With which you can check a logo mark's shape and color variants, export it as SVG, or use the javascript class with animations options on UI.

The original logo and mark

This is our currnet full logo.

This is small version of logo mark. Used for icon.

Testing the desgin / Exporting SVG

After cloning the repository, start using yarn under node.js >= 18.

git clone https://github.com/akariinc/icon-as-a-code.git
cd icon-as-a-code
yarn install
yarn dev

Frontend Usage

Add the following line to package.json. Choose build by commit hash for now.

"@akariinc/icon-as-a-code": "github:akariinc/icon-as-a-code-builds#master-0e0475d",

Attaching the logo.

import { AkariLogo } from "@akariinc/icon-as-a-code";

window.onload = () => {
  const akariLogo = new AkariLogo("paint", {
    innerRadius: 7.8313809,
    outerRadius: 13,
  });

  const parentElement = document.getElementById("logo-parent");
  parentElement?.appendChild(akariLogo.el);
};

Update the attached logo.

// update properties
akariLogo.update({
  drawProgress: 1,
  opacityStart: 1,
  opacityEnd: 1,
  rgbStart: "#999999",
  size: 72,
});