https://github.com/ccjmne/orca-logo

Vanilla JS animated logo for NCLS Development's Orca solution, as a Web Component
https://github.com/ccjmne/orca-logo

animated customelements logo ncls orca svg usetheplatform vanilla-js webcomponents

Last synced: 9 days ago
JSON representation

Vanilla JS animated logo for NCLS Development's Orca solution, as a Web Component

• Host: GitHub
• URL: https://github.com/ccjmne/orca-logo
• Owner: ccjmne
• License: gpl-3.0
• Created: 2019-03-14T22:59:39.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2025-04-29T02:13:05.000Z (6 months ago)
• Last Synced: 2025-10-11T09:12:51.507Z (14 days ago)
• Topics: animated, customelements, logo, ncls, orca, svg, usetheplatform, vanilla-js, webcomponents
• Language: HTML
• Homepage: https://ccjmne.github.io/orca-logo
• Size: 719 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# orca-logo

Vanilla JS animated logo for NCLS Development's Orca solution, as a Web Component.  

See the [live demo](https://ccjmne.github.io/orca-logo).

[![size](https://img.badgesize.io/ccjmne/orca-logo/master/dist/orca-logo.min.js?compression=gzip)](https://github.com/ccjmne/orca-logo/blob/master/dist/orca-logo.min.js)

## Usage

Basic usage:

```html

```

Displays the logo. Hover (or tap) it to have it 'shine'.

## Alternate forms

1.  `animated`

    ```html

    

    ```

    When the logo enters the viewport, have it appear by 'drawing' its outline, then fade its fill in and shine.  

    Hover (or tap) it to have it 'shine'.

2.  `animated="spinner"`

    ```html

    

    ```

    Runs a looping 'spinner'-like animation conveying a busy state.  

    No mouse/finger interaction.

## Custom styling

Style its primary colour via the CSS variable `--primary-colour`.

## Dependencies

-   None

## Compatibility

-   See [caniuse Custom Elements v1](https://caniuse.com/#feat=custom-elementsv1)

-   See [caniuse IntersectionObserver](https://caniuse.com/#feat=intersectionobserver)

## Installation

Install through `npm`:

```shell

npm install orca-logo

```

## Licensing

**GNU General Public License v3.0**

Permissions of this strong copyleft license are conditioned on making available complete source code of licensed works and modifications, which include larger works using a licensed work, under the same license.  

Copyright and license notices must be preserved.  

Contributors provide an express grant of patent rights.

## Note to the maintainers

Redeploy to [GitHub Pages](https://pages.github.com/) with:

```shell

npm run deploy

```