# geckosvg

> A tool for dynamically creating SVG graphics

Latest version **0.0.5** (published 2022-04-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install geckosvg
pnpm add geckosvg
yarn add geckosvg
bun add geckosvg
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2022-04-26 |
| First published | 2022-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 103.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Nils Ramstöck |
| Maintainers | nasram |

## Links

- npm: https://www.npmjs.com/package/geckosvg
- Repository: https://github.com/NilsRamstoeck/GeckoSVG
- Homepage: https://github.com/NilsRamstoeck/GeckoSVG#readme
- Issues: https://github.com/NilsRamstoeck/GeckoSVG/issues
- npm.io page: https://npm.io/package/geckosvg

## Recent versions

- 0.0.5 (latest) — 2022-04-26
- 0.0.4 — 2022-04-19
- 0.0.3 — 2022-04-19
- 0.0.2 — 2022-04-12

## README

# GeckoSVG

GeckoSVG is a library to create and modify SVG graphics

Install:
```
npm i --save geckosvg
```

Usage:

```
import {GeckoSVG} from 'geckosvg'

const gecko = GeckoSVG.create();
document.body.appendChild(gecko);


gecko.width = 500;
gecko.height = 500;

gecko.ellipse(250, 250, 90)
  .fill('hsl(350, 100%, 88%)')
  .stroke('#000')
  .strokeWidth(7);

//Mouth
gecko
  .path('M 200,260 L 300,260 C 280,320 220,320 200,260 z')
  .fill('red')
  .stroke('#000')
  .strokeWidth(3);

//teeth

gecko
  .rect(225, 260, 20, 20)
  .fill('#fff')
  .stroke('#000')
  .strokeWidth(3);

gecko
  .rect(255, 260, 20, 20)
  .fill('#fff')
  .stroke('#000')
  .strokeWidth(3);

//Eyes that follow mouse
const eyePositions = [[220, 220], [280, 220]];
const eyeSize = 20;
const pupilSize = 5;

for (const pos of eyePositions) {
  const eye = gecko.ellipse(pos[0], pos[1], eyeSize)
    .fill('#fff')
    .stroke('#000')
    .strokeWidth(3);

  //pupil
  const pupil = gecko.ellipse(pos[0], pos[1], pupilSize)
    .fill('#000');

  document.addEventListener('mousemove', (e) => {
    //get client bounds
    const clientBounds = eye.$el.getBoundingClientRect();
    //get position of pupil
    const bounds = {
      x: pos[0],
      y: pos[1]
    }

    //get position of mouse in svg space
    const mouse = {
      x: e.clientX - clientBounds.x - eyeSize + bounds.x,
      y: e.clientY - clientBounds.y - eyeSize + bounds.y,
    }

    //get angle of mouse in relation to pupil
    const angle = Math.atan2(mouse.y - bounds.y, mouse.x - bounds.x,);

    //get distance between pupil origin and mouse and constrain so pupil stays inside eye
    const radius = Math.min(Math.sqrt(
      ((mouse.x - bounds.x) * (mouse.x - bounds.x)) +
      (mouse.y - bounds.y) * (mouse.y - bounds.y)
    ), eyeSize * 0.65);

    //get new pupil pos
    const point = {
      x: bounds.x + Math.cos(angle) * radius,
      y: bounds.y + Math.sin(angle) * radius
    }

    //move pupil towards mouse
    pupil.pos(point.x, point.y);
  });
}

```

---
_Source: https://npm.io/package/geckosvg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._