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);
});
}

``