https://github.com/manufosela/animation-solarsystem

Web-component to draw the solar system with a svg animated image
https://github.com/manufosela/animation-solarsystem

Last synced: 3 days ago
JSON representation

Web-component to draw the solar system with a svg animated image

• Host: GitHub
• URL: https://github.com/manufosela/animation-solarsystem
• Owner: manufosela
• License: mit
• Created: 2022-01-23T18:19:03.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-01-23T19:00:24.000Z (almost 3 years ago)
• Last Synced: 2024-11-10T19:24:32.527Z (2 months ago)
• Language: JavaScript
• Size: 494 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# \

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash

npm i animation-solarsystem

```

## Usage

```html

  import 'animation-solarsystem/animation-solarsystem.js';

```

## Styling

- **--animation-solarsystem-bg-stars-image**: Background image for the stars. By default use a `linear-gradient(to top, #000033, #222255);`

## Atributes

- **radio-base**: oribit radio base from earth. To show all planets use 18, to show inter planets use 350

- **width**: width of the svg

- **height**: height of the svg

- **radio-plantet-base**: radio base from earth. If you show all planets use 4, to show inter planets use 10

- **period-plantet-base**: period base from earth. Seconds to do a rotation.

- **show-stars-bg**: show background stars if true

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash

npm run lint

```

To automatically fix linting and formatting errors, run

```bash

npm run format

```

## Testing with Web Test Runner

To execute a single test run:

```bash

npm run test

```

To run the tests in interactive watch mode run:

```bash

npm run test:watch

```

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash

npm run storybook

```

To build a production version of Storybook, run

```bash

npm run storybook:build

```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash

npm start

```

To run a local development server that serves the basic demo located in `demo/index.html`