### Start Development Server for Demos

Source: https://github.com/elchininet/isometric/blob/master/README.md

Run this script to launch a development server with live reloading for demo examples using webpack-dev-server.

```bash
npm run demo
```

--------------------------------

### Importing Isometric Types

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/types.md

Example of how to import various types from the isometric library.

```typescript
import {
    PlaneView,
    Axis,
    LineCap,
    LineJoin,
    IsometricPlaneView,
    IsometricAxis,
    StrokeLinecap,
    StrokeLinejoin,
    Position,
    Texture,
    Rotation,
    Point,
    Bounds,
    Boundaries,
    SVGAnimation,
    SVGRectangleAnimation,
    SVGCircleAnimation,
    SVGPentagramAnimation,
    SVGStarPolygonAnimation,
    SVGPathAnimation,
    SVGTextAnimation,
    IsometricCanvasProps,
    IsometricGroupProps,
    IsometricGraphicProps,
    IsometricShapeProps,
    IsometricRectangleProps,
    IsometricCircleProps,
    IsometricPathProps,
    IsometricStarPolygonProps,
    IsometricPentagramProps,
    IsometricTextProps,
    Drag,
    IsometricDraggableProps,
    SVGProperties,
    SVGPathProperties,
    SVGPositionableProperties
} from '@elchininet/isometric';
```

--------------------------------

### Create Canvas and Add Elements

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/README.md

Provides an example of initializing an IsometricCanvas with specific properties and adding an IsometricRectangle to it.

```javascript
// Create canvas
const canvas = new IsometricCanvas({
    backgroundColor: '#f5f5f5',
    scale: 1.5,
    width: 800,
    height: 600
});

// Create and add elements
const rect = new IsometricRectangle({
    width: 100,
    height: 100,
    planeView: 'TOP',
    fillColor: '#3498db'
});

canvas.addChild(rect);
```

--------------------------------

### Method Chaining Example

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/README.md

Shows how most methods return the instance, enabling method chaining for a more concise API usage.

```typescript
canvas.addChild(rect)
    .addChild(circle)
    .update();
```

--------------------------------

### Install Isometric via NPM

Source: https://github.com/elchininet/isometric/blob/master/README.md

Use this command to add the isometric library to your project when using NPM.

```bash
npm install @elchininet/isometric
```

--------------------------------

### Install Isometric via PNPM

Source: https://github.com/elchininet/isometric/blob/master/README.md

Use this command to add the isometric library to your project when using PNPM.

```bash
pnpm add @elchininet/isometric
```

--------------------------------

### Install Isometric via Yarn

Source: https://github.com/elchininet/isometric/blob/master/README.md

Use this command to add the isometric library to your project when using Yarn.

```bash
yarn add @elchininet/isometric
```

--------------------------------

### Apply and Update Texture Example

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/configuration.md

Demonstrates how to initialize an IsometricRectangle with texture properties and how to update the texture configuration later using the updateTexture method.

```typescript
const rect = new IsometricRectangle({
    width: 200,
    height: 150,
    planeView: 'TOP',
    texture: {
        url: '/assets/wood.png',
        height: 150,
        width: 200,
        scale: 1.5,
        pixelated: false,
        shift: { right: 10, left: 10 },
        rotation: { axis: 'TOP', value: 45 }
    }
});

// Update texture later
rect.updateTexture({
    scale: 2,
    shift: { right: 20 }
});
```

--------------------------------

### Create and Configure Text Example

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/configuration.md

Illustrates the creation of an IsometricText element with various configuration options, including text content, font properties, rotation, selection state, and origin.

```typescript
const text = new IsometricText({
    planeView: 'TOP',
    text: 'Hello World',
    fontFamily: 'Georgia, serif',
    fontSize: 32,
    fontWeight: 'bold',
    fontStyle: 'italic',
    rotation: 15,
    selectable: false,
    origin: ['left', 'top']
});
```

--------------------------------

### mt(right, left, top)

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-path.md

Alias for `moveTo()`. Shorthand for move-to command. Used to set the starting point of a path.

```APIDOC
## mt(right, left, top)

### Description
Alias for `moveTo()`. Shorthand for move-to command. Used to set the starting point of a path.

### Method
(Implicitly part of a chain, typically called after creating a path instance)

### Parameters
* **right** (number) - Description not provided.
* **left** (number) - Description not provided.
* **top** (number) - Description not provided.

### Returns
IsometricPath - The path instance for method chaining.
```

--------------------------------

### Example Usage of Texture Interface

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/types.md

Demonstrates creating an IsometricRectangle with a configured texture, including scale, shift, and rotation. This applies a custom image appearance to the element.

```typescript
const rect = new IsometricRectangle({
    width: 100,
    height: 100,
    planeView: 'TOP',
    texture: {
        url: '/wood-texture.png',
        scale: 1.5,
        shift: { right: 10, left: 10 },
        rotation: { axis: 'TOP', value: 45 }
    }
});
```

--------------------------------

### Example Usage of Position Interface

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/types.md

Illustrates how to create and assign a Position object to an element's properties. This sets the 'right', 'left', and 'top' coordinates.

```typescript
const position: Position = {
    right: 50,
    left: 30,
    top: 20
};

element.right = position.right;
element.left = position.left;
element.top = position.top;
```

--------------------------------

### Move to (mt) Isometric Path

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-path.md

Alias for moveTo. Use this to set the starting point of a path segment.

```javascript
path.mt(0, 0, 0).lt(100, 0, 0).ct(50, 50, 50, 100, 100, 100);
```

--------------------------------

### Enable Drag Behavior

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-text.md

Enables dragging for the text on a specified plane ('TOP' in this example). Includes an event listener for the 'drag' event to log movement details.

```javascript
text.drag = 'TOP';

text.addEventListener('drag', (event) => {
    console.log('Text moved:', event.detail);
});
```

--------------------------------

### Example Usage of PlaneView Enum

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/types.md

Demonstrates how to instantiate an IsometricRectangle using the 'TOP' planeView. This sets the orientation of the rectangle in the isometric space.

```typescript
const rect = new IsometricRectangle({
    planeView: 'TOP',
    width: 100,
    height: 100
});
```

--------------------------------

### IsometricPath Instance Properties

Source: https://github.com/elchininet/isometric/blob/master/README.md

These are the instance properties of the IsometricPath class, which can be get and set to control the appearance and behavior of the path.

```APIDOC
## Instance Properties

### Description
Properties that can be accessed and modified on an IsometricPath instance.

### Properties
- **id** (string) - Gets and sets the id of the isometric path. This property also sets the id of the native `SVG` element.
- **fillColor** (string) - Gets and sets the fill color of the isometric path.
- **fillOpacity** (number) - Gets and sets the fill opacity of the isometric path.
- **strokeColor** (string) - Gets and sets the stroke color of the isometric path.
- **strokeOpacity** (number) - Gets and sets the stroke opacity of the isometric path.
- **strokeDashArray** (number[]) - Gets and sets the [SVG stroke dasharray][1] of the isometric path.
- **strokeLinecap** (string) - Gets and sets the [SVG stroke linecap][2] of the isometric path.
- **strokeLinejoin** (string) - Gets and sets the [SVG stroke linejoin][3] of the isometric path.
- **strokeWidth** (number) - Gets and sets the stroke width of the isometric path.
- **texture** (Texture (`object`)) - Gets and sets the texture of the isometric path.
- **autoclose** (boolean) - Gets and sets the autoclose property of the isometric path.
- **className** (string) - Gets and sets the CSS class of the isometric path.
```

--------------------------------

### Animate Element Properties Example

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/configuration.md

Shows how to add animations to an IsometricCircle for its 'radius' and 'fillColor' properties. Demonstrates animating between two values and animating through a series of values.

```typescript
const circle = new IsometricCircle({
    radius: 50,
    planeView: 'TOP'
});

// Animate radius from 50 to 100
circle.addAnimation({
    property: 'radius',
    from: 50,
    to: 100,
    duration: 2,
    repeat: 1
});

// Animate through multiple values
circle.addAnimation({
    property: 'fillColor',
    values: ['red', 'green', 'blue'],
    duration: 3,
    repeat: 0 // infinite
});
```

--------------------------------

### IsometricCircle Instance Methods

Source: https://github.com/elchininet/isometric/blob/master/README.md

Provides details on the instance methods available for the IsometricCircle class, including methods for getting SVG elements, updating the circle, managing textures, clearing the circle, adding and removing animations, and handling events.

```APIDOC
## getElement

### Description
Returns the native `SVG` path element.

### Method
Instance Method

### Endpoint
N/A

### Parameters
None

### Request Example
None

### Response
#### Success Response
- **SVG path element** (object) - The native SVG path element.

#### Response Example
None
```

```APIDOC
## getPattern

### Description
Returns the native `SVGPatternElement` responsible for the texture.

### Method
Instance Method

### Endpoint
N/A

### Parameters
None

### Request Example
None

### Response
#### Success Response
- **SVGPatternElement** (object) - The SVGPatternElement for the texture.

#### Response Example
None
```

```APIDOC
## update

### Description
Forces a re-render of the SVG circle.

### Method
Instance Method

### Endpoint
N/A

### Parameters
None

### Request Example
None

### Response
None

#### Response Example
None
```

```APIDOC
## updateTexture

### Description
Adds or overrides the texture properties of the isometric circle.

### Method
Instance Method

### Endpoint
N/A

### Parameters
#### Request Body
- **texture** (object) - An object containing texture properties.
  - **url** (string) - Optional - URL of the image texture.
  - **planeView** (PlaneView) - Optional - Texture plane view.
  - **height** (number) - Optional - Texture height.
  - **width** (number) - Optional - Texture width.
  - **scale** (number) - Optional - Texture scale.
  - **pixelated** (boolean) - Optional - Image rendering of the texture.
  - **shift** (Point) - Optional - Shifts the background position.
    - **right** (number) - Right coordinates.
    - **left** (number) - Left coordinates.
    - **top** (number) - Top coordinates.
  - **rotation** (Rotation) - Optional - Rotation of the texture.
    - **axis** (Axis) - Rotation axis.
    - **value** (number) - Rotation value.

### Request Example
```json
{
  "url": "path/to/image.png",
  "planeView": "XYZ",
  "height": 100,
  "width": 100,
  "scale": 1,
  "pixelated": false,
  "shift": {
    "right": 10,
    "top": 5
  },
  "rotation": {
    "axis": "TOP",
    "value": 45
  }
}
```

### Response
None

#### Response Example
None
```

```APIDOC
## clear

### Description
Cleans the isometric circle by removing all path commands from the native SVG path element.

### Method
Instance Method

### Endpoint
N/A

### Parameters
None

### Request Example
None

### Response
None

#### Response Example
None
```

```APIDOC
## addAnimation

### Description
Adds an animated element to the isometric circle. Not compatible with Internet Explorer.

### Method
Instance Method

### Endpoint
N/A

### Parameters
#### Request Body
- **animation** (object) - An object defining the animation properties.
  - **property** (string) - Required - Indicates which property should be animated (e.g., `fillColor`, `strokeWidth`, `radius`).
  - **duration** (number) - Optional - Duration of the animation in seconds (default: 1).
  - **repeat** (number) - Optional - Number of times the animation will run (0 for indefinitely).
  - **from** (string | number) - Optional - Initial value of the animation. Cannot be used with `values`.
  - **to** (string | number) - Optional - Final value of the animation. Cannot be used with `values`.
  - **values** (string | number | string[] | number[]) - Optional - All values of the animation. Cannot be used with `from` and `to`.

**Animatable Properties:**
- `fillColor`
- `fillOpacity`
- `strokeColor`
- `strokeOpacity`
- `strokeWidth`
- `right`
- `left`
- `top`
- `radius`

*Note: At the moment, only one of the properties marked with an asterisk (`*`) can be animated simultaneously. If multiple are specified, only the last one will be applied.*

### Request Example
```json
{
  "property": "fillColor",
  "duration": 2,
  "repeat": 0,
  "to": "#FF0000"
}
```

### Response
None

#### Response Example
None
```

```APIDOC
## removeAnimationByIndex

### Description
Removes a specific animation element by its index.

### Method
Instance Method

### Endpoint
N/A

### Parameters
#### Path Parameters
- **index** (number) - Required - The index of the animation to remove.

### Request Example
None

### Response
None

#### Response Example
None
```

```APIDOC
## removeAnimations

### Description
Removes all animation elements from the isometric circle.

### Method
Instance Method

### Endpoint
N/A

### Parameters
None

### Request Example
None

### Response
None

#### Response Example
None
```

```APIDOC
## addEventListener

### Description
Sets up a function that will be called whenever the specified event is delivered to the isometric circle (the SVG path element).

### Method
Instance Method

### Endpoint
N/A

### Parameters
#### Path Parameters
- **type** (string) - Required - The event type to listen for.
- **callback** (VoidFunction) - Required - The function to execute when the event is triggered.
- **useCapture** (boolean) - Optional - Specifies whether the event should be dispatched to the capturing phase.

### Request Example
None

### Response
None

#### Response Example
None
```

```APIDOC
## removeEventListener

### Description
Removes an event listener previously registered with `addEventListener` from the isometric circle (the SVG path element).

### Method
Instance Method

### Endpoint
N/A

### Parameters
#### Path Parameters
- **type** (string) - Required - The event type for which to remove the listener.
- **listener** (VoidFunction) - Required - The event listener function to remove.
- **useCapture** (boolean) - Optional - Specifies whether the event listener was registered with the capturing phase.

### Request Example
None

### Response
None

#### Response Example
None
```

--------------------------------

### Import Isometric for Node.js using ES6 Modules

Source: https://github.com/elchininet/isometric/blob/master/README.md

Import specific classes for Node.js environments using ES6 module syntax. Requires 'jsdom' to be installed.

```javascript
import {
    IsometricCanvas,
    IsometricGroup,
    IsometricRectangle,
    IsometricCircle,
    IsometricStarPolygon,
    IsometricPentagram,
    IsometricPath
} from '@elchininet/isometric/node';
```

--------------------------------

### Import Isometric for Node.js using CommonJS

Source: https://github.com/elchininet/isometric/blob/master/README.md

Import specific classes for Node.js environments using CommonJS module syntax. Requires 'jsdom' to be installed.

```javascript
const {
    IsometricCanvas,
    IsometricGroup,
    IsometricRectangle,
    IsometricCircle,
    IsometricStarPolygon,
    IsometricPentagram,
    IsometricPath
} = require('@elchininet/isometric/node');
```

--------------------------------

### moveTo

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-path.md

Moves the cursor to a specified isometric point without drawing a line. Used to start a new subpath or reposition the pen.

```APIDOC
## moveTo(right, left, top)

### Description
Moves the cursor to an isometric point without drawing a line. Used to start a new subpath or move the pen.

### Method
`moveTo(right: number, left: number, top: number): IsometricPath`

### Parameters
#### Path Parameters
- **right** (number) - Right isometric coordinate.
- **left** (number) - Left isometric coordinate.
- **top** (number) - Top isometric coordinate.

### Return
The path instance for method chaining.

### Example
```javascript
path.moveTo(0, 0, 0)
    .lineTo(100, 0, 0)
    .lineTo(100, 100, 0);
```
```

--------------------------------

### clear()

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-path.md

Clears all path commands and resets the path to an empty state. This method is useful for starting a new path or resetting an existing one.

```APIDOC
## clear()

### Description
Clears all path commands and resets the path to empty.

### Returns
- `IsometricPath` - The path instance for method chaining.

### Example
```javascript
path.clear(); // Removes all drawing commands
```
```

--------------------------------

### Enable Pentagram Dragging

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-pentagram.md

Enables dragging behavior for a pentagram on a specified plane ('TOP' in this example). An event listener is added to log drag events.

```javascript
pentagram.drag = 'TOP';

pentagram.addEventListener('drag', (event) => {
    console.log('Pentagram moved:', event.detail);
});
```

--------------------------------

### Move to an Isometric Point

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-path.md

Use the moveTo method to set the starting point for a new subpath without drawing a line. This is useful for positioning the 'pen' before drawing.

```javascript
path.moveTo(0, 0, 0)
    .lineTo(100, 0, 0)
    .lineTo(100, 100, 0);
```

--------------------------------

### Example Usage of Rotation Interface

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/types.md

Shows how to define a Rotation object with an axis and value, and then assign it to a texture's rotation property. This sets the specific rotation for a texture.

```typescript
const rotation: Rotation = {
    axis: 'TOP',
    value: 45
};

texture.rotation = rotation;
```

--------------------------------

### Browser Entry Point

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/README.md

Illustrates how to include the isometric library in a web project using a script tag and instantiate the IsometricCanvas.

```html
<script src="dist/web/isometric.js"></script>
<script>
    const canvas = new isometric.IsometricCanvas();
</script>
```

--------------------------------

### Get Child by Index

Source: https://github.com/elchininet/isometric/blob/master/README.md

Retrieve a child element from the canvas using its numerical index.

```javascript
getChildByIndex(index)
```

--------------------------------

### Get SVG Code

Source: https://github.com/elchininet/isometric/blob/master/README.md

Obtain the HTML string representation of the generated SVG element.

```javascript
getSVGCode()
```

--------------------------------

### Get SVG Pattern Element

Source: https://github.com/elchininet/isometric/blob/master/README.md

Returns the native SVGPatternElement used for the texture of the isometric rectangle.

```javascript
getPattern()
```

--------------------------------

### Get Child by ID

Source: https://github.com/elchininet/isometric/blob/master/README.md

Retrieve a child element from the canvas using its unique string ID.

```javascript
getChildById(id)
```

--------------------------------

### Run Tests

Source: https://github.com/elchininet/isometric/blob/master/README.md

Execute this script to run the project's test suite.

```bash
npm run test
```

--------------------------------

### Get Native SVG Element

Source: https://github.com/elchininet/isometric/blob/master/README.md

Retrieve the underlying SVG DOM element managed by the IsometricCanvas instance.

```javascript
getElement()
```

--------------------------------

### Get SVG Group Element

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-group.md

Retrieves the native SVG <g> element associated with an IsometricGroup instance.

```javascript
const groupElement = group.getElement();
console.log(groupElement.tagName); // "g"
```

--------------------------------

### Import Isometric in Deno using UNPKG

Source: https://github.com/elchininet/isometric/blob/master/README.md

Import the main ESM version of the isometric library in Deno using a CDN like UNPKG. Type checking is automatically handled.

```javascript
import {
    IsometricCanvas,
    IsometricGroup,
    IsometricRectangle,
    IsometricCircle,
    IsometricStarPolygon,
    IsometricPentagram,
    IsometricPath
} from 'https://cdn.jsdelivr.net/npm/@elchininet/isometric/esm/index.js';
```

--------------------------------

### Create and Style Isometric Pentagrams

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-pentagram.md

Demonstrates how to create basic and styled IsometricPentagram instances and add them to an IsometricCanvas. Ensure Isometric and IsometricCanvas are imported.

```javascript
import { IsometricPentagram, IsometricCanvas } from '@elchininet/isometric';

const canvas = new IsometricCanvas();

// Create a basic pentagram
const pentagram = new IsometricPentagram({
    radius: 80,
    planeView: 'TOP'
});

// Create a styled pentagram
const styledPentagram = new IsometricPentagram({
    radius: 100,
    planeView: 'FRONT',
    fillColor: '#f39c12',
    strokeColor: '#d68910',
    strokeWidth: 2,
    rotation: 36 // Point star upward
});

canvas.addChildren(pentagram, styledPentagram);
```

--------------------------------

### ES6 Modules Entry Point

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/README.md

Demonstrates importing IsometricCanvas and IsometricRectangle using ES6 module syntax, suitable for modern browsers and Node.js.

```javascript
import { IsometricCanvas, IsometricRectangle } from '@elchininet/isometric';
```

--------------------------------

### CommonJS Entry Point

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/README.md

Shows how to import the IsometricCanvas class when using CommonJS module system, typically in Node.js environments.

```javascript
const { IsometricCanvas } = require('@elchininet/isometric/node');
```

--------------------------------

### Initialize Isometric Canvas

Source: https://github.com/elchininet/isometric/blob/master/README.md

Instantiate the IsometricCanvas class with optional properties to configure the canvas.

```javascript
const isometric = new IsometricCanvas([properties]);
```

--------------------------------

### Get Texture Pattern Element

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-rectangle.md

Retrieves the SVGPatternElement associated with the rectangle's texture. Returns undefined if no texture has been set.

```javascript
const pattern = rect.getPattern();
if (pattern) {
    console.log(pattern.id); // Pattern ID
}
```

--------------------------------

### Create Basic and Styled Isometric Circles

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-circle.md

Demonstrates how to instantiate IsometricCircle with default and custom properties. Ensure IsometricCanvas is initialized before adding circles.

```javascript
import { IsometricCircle, IsometricCanvas } from '@elchininet/isometric';

const canvas = new IsometricCanvas();

// Create a basic circle
const circle = new IsometricCircle({
    radius: 50,
    planeView: 'FRONT'
});

// Create a styled circle
const styledCircle = new IsometricCircle({
    radius: 75,
    planeView: 'TOP',
    fillColor: '#e74c3c',
    strokeColor: '#c0392b',
    strokeWidth: 3,
    right: 30,
    left: 40
});

canvas.addChild(styledCircle);
```

--------------------------------

### Get Native SVG Path Element

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-path.md

Retrieves the underlying SVGPathElement. Useful for direct manipulation or inspection of the SVG element.

```javascript
const pathElement = path.getElement();
console.log(pathElement.getAttribute('d')); // SVG path data
```

--------------------------------

### Create and Style Isometric Rectangles

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-rectangle.md

Demonstrates how to create basic and styled IsometricRectangles with different plane views and positioning. Requires importing IsometricRectangle and IsometricCanvas.

```javascript
import { IsometricRectangle, IsometricCanvas } from '@elchininet/isometric';

const canvas = new IsometricCanvas();

// Create a basic rectangle
const rect = new IsometricRectangle({
    width: 100,
    height: 50,
    planeView: 'TOP'
});

// Create a rectangle with styling
const styledRect = new IsometricRectangle({
    width: 150,
    height: 100,
    planeView: 'FRONT',
    fillColor: '#3498db',
    strokeColor: '#2c3e50',
    strokeWidth: 2,
    right: 50,
    left: 50
});

canvas.addChild(styledRect);
```

--------------------------------

### Get Child by ID

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-canvas.md

Retrieve a child element by its unique ID. Returns null if no element with the specified ID is found.

```javascript
const element = canvas.getChildById('my-rectangle');
```

--------------------------------

### Configure IsometricCanvas

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/README.md

Initialize an IsometricCanvas with various configuration options including ID, container, background color, scale, and dimensions.

```typescript
new IsometricCanvas({
    id: 'my-canvas',
    container: '#app',
    backgroundColor: '#ffffff',
    scale: 2,
    width: 1280,
    height: 960
});
```

--------------------------------

### Get Child by Index

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-canvas.md

Retrieve a child element from the canvas using its zero-based index. Returns null if the index is out of bounds.

```javascript
const firstChild = canvas.getChildByIndex(0);
```

--------------------------------

### IsometricCanvas Constructor

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-canvas.md

Initializes a new IsometricCanvas instance. This is the main entry point for creating an isometric projection. You can configure various properties like ID, container, background color, scale, width, and height.

```APIDOC
## new IsometricCanvas(props?: IsometricCanvasProps)

### Description
Initializes a new IsometricCanvas instance, serving as the root for isometric elements and projections.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **props** (`IsometricCanvasProps`) - Optional - Configuration object for the canvas.
  * **props.id** (`string`) - Optional - Unique identifier for the canvas and SVG element. Defaults to a UUID.
  * **props.container** (`HTMLElement | string`) - Optional - DOM element or query selector where the SVG will be inserted. Defaults to "body".
  * **props.backgroundColor** (`string`) - Optional - Background color of the canvas. Defaults to "white".
  * **props.scale** (`number`) - Optional - Scale multiplier for isometric units. Defaults to `1`.
  * **props.height** (`number`) - Optional - Height of the canvas in pixels. Defaults to `480`.
  * **props.width** (`number`) - Optional - Width of the canvas in pixels. Defaults to `640`.

### Request Example
```javascript
import { IsometricCanvas } from '@elchininet/isometric';

// Create a canvas with default settings
const canvas = new IsometricCanvas();

// Create a canvas with custom properties
const customCanvas = new IsometricCanvas({
    id: 'my-isometric',
    container: document.getElementById('app'),
    backgroundColor: '#f0f0f0',
    scale: 2,
    width: 800,
    height: 600
});
```

### Response
#### Success Response (200)
Returns an `IsometricCanvas` instance.

#### Response Example
```javascript
// Returns an instance of IsometricCanvas
const canvasInstance = new IsometricCanvas();
```
```

--------------------------------

### Get Child by Index

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-group.md

Retrieves a child element from the group using its zero-based index. Returns null if the index is out of bounds.

```javascript
const firstChild = group.getChildByIndex(0);
```

--------------------------------

### Get Native SVG Element

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-canvas.md

Retrieve the underlying SVG element of the canvas. This can be useful for direct manipulation or appending to the DOM.

```javascript
const svgElement = canvas.getElement();
document.body.appendChild(svgElement);
```

--------------------------------

### Create and Configure IsometricGroup

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-group.md

Demonstrates how to create a new IsometricGroup with specific properties and add a child element to it.

```javascript
import { IsometricGroup, IsometricRectangle } from '@elchininet/isometric';

// Create a group
const group = new IsometricGroup({
    id: 'my-group',
    right: 10,
    left: 20,
    top: 30
});

// Create shapes to add to the group
const rect = new IsometricRectangle({
    width: 100,
    height: 100,
    planeView: 'TOP'
});

group.addChild(rect);
```

--------------------------------

### Build Isometric Project

Source: https://github.com/elchininet/isometric/blob/master/README.md

Run this script to transpile TypeScript code and create various package bundles for different environments (Browser IIFE, CommonJS, ESM, Node.js).

```bash
npm run build
```

--------------------------------

### Get Child by ID

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-group.md

Retrieves a child element from the group by its unique ID. Returns null if no element with the specified ID is found.

```javascript
const element = group.getChildById('my-rectangle');
```

--------------------------------

### IsometricPath Constructor

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-path.md

Initializes a new IsometricPath instance. Allows configuration of path properties like color, opacity, stroke, and texture.

```APIDOC
## new IsometricPath(props?: IsometricPathProps)

### Description
Initializes a new IsometricPath instance with optional configuration properties.

### Parameters
#### Path Parameters
- **props** (IsometricPathProps) - Optional - Configuration object for the path.
  - **props.id** (string) - Optional - Unique identifier. Defaults to UUID.
  - **props.fillColor** (string) - Optional - Fill color. Defaults to "white".
  - **props.fillOpacity** (number) - Optional - Fill opacity (0-1). Defaults to 1.
  - **props.strokeColor** (string) - Optional - Stroke color. Defaults to "black".
  - **props.strokeOpacity** (number) - Optional - Stroke opacity (0-1). Defaults to 1.
  - **props.strokeWidth** (number) - Optional - Stroke width. Defaults to 1.
  - **props.strokeDashArray** (number[]) - Optional - SVG stroke dash pattern. Defaults to [].
  - **props.strokeLinecap** ("butt" | "square" | "round") - Optional - Stroke line cap style. Defaults to "butt".
  - **props.strokeLinejoin** ("miter" | "round" | "bevel") - Optional - Stroke line join style. Defaults to "round".
  - **props.texture** (Texture) - Optional - Image texture to apply.
  - **props.autoclose** (boolean) - Optional - Automatically close the path. Defaults to true.
  - **props.className** (string) - Optional - CSS class name.

### Return
Returns an `IsometricPath` instance.

### Example
```javascript
import { IsometricPath, IsometricCanvas } from '@elchininet/isometric';

const canvas = new IsometricCanvas();

const path = new IsometricPath({
    strokeColor: '#2c3e50',
    strokeWidth: 2,
    fillColor: '#3498db'
});

path.moveTo(0, 0, 0);
path.lineTo(100, 0, 0);
path.lineTo(50, 50, 0);

canvas.addChild(path);
```
```

--------------------------------

### Get SVG Path Element

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-star-polygon.md

Retrieve the native SVG path element for the IsometricStarPolygon. This is useful for direct SVG manipulation or inspection.

```javascript
const pathElement = star.getElement();
```

--------------------------------

### Initialize IsometricCanvas

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/configuration.md

Configure the root canvas that holds all isometric elements. Options include ID, container, background color, scale, and dimensions.

```typescript
const canvas = new IsometricCanvas({
    id?: string;
    container?: HTMLElement | string;
    backgroundColor?: string;
    scale?: number;
    height?: number;
    width?: number;
});
```

```typescript
const canvas = new IsometricCanvas({
    id: 'my-canvas',
    container: '#app',
    backgroundColor: '#f5f5f5',
    scale: 2,
    width: 1280,
    height: 960
});
```

--------------------------------

### Create and Draw a Basic Isometric Path

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-path.md

Instantiate an IsometricPath with custom stroke and fill properties. Then, use moveTo and lineTo methods to draw a triangle. The path will automatically close.

```javascript
import { IsometricPath, IsometricCanvas } from '@elchininet/isometric';

const canvas = new IsometricCanvas();

// Create a basic path
const path = new IsometricPath({
    strokeColor: '#2c3e50',
    strokeWidth: 2,
    fillColor: '#3498db'
});

// Draw a triangle
path.moveTo(0, 0, 0);
path.lineTo(100, 0, 0);
path.lineTo(50, 50, 0);
// Path closes automatically

canvas.addChild(path);
```

--------------------------------

### Create and Style Isometric Text

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-text.md

Demonstrates how to create basic and styled IsometricText instances. Ensure IsometricCanvas is initialized before adding text elements.

```javascript
import { IsometricText, IsometricCanvas } from '@elchininet/isometric';

const canvas = new IsometricCanvas();

// Create basic text
const text = new IsometricText({
    planeView: 'TOP',
    text: 'Hello World'
});

// Create styled text
const styledText = new IsometricText({
    planeView: 'FRONT',
    text: 'Isometric',
    fontFamily: 'Georgia, serif',
    fontSize: 32,
    fontWeight: 'bold',
    fontStyle: 'italic',
    fillColor: '#3498db',
    strokeColor: '#2c3e50',
    strokeWidth: 1,
    right: 50,
    left: 30,
    rotation: 15
});

canvas.addChildren(text, styledText);
```

--------------------------------

### Get SVG Code as String

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-canvas.md

Obtain the complete HTML/SVG markup of the canvas as a string. This is useful for saving, embedding, or inspecting the generated SVG.

```javascript
const svgCode = canvas.getSVGCode();
console.log(svgCode); // Outputs complete SVG markup
```

--------------------------------

### Lint Source Files

Source: https://github.com/elchininet/isometric/blob/master/README.md

Execute this script to run ESLint on the source files for code quality checks.

```bash
npm run lint
```

--------------------------------

### Get SVG Pattern Element

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-circle.md

Retrieves the SVGPatternElement associated with the circle's texture, if one is set. Returns undefined if no texture is applied.

```javascript
const pattern = circle.getPattern();
if (pattern) {
    console.log(pattern.id); // Pattern ID
}
```

--------------------------------

### IsometricPentagram Constructor

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-pentagram.md

Initializes a new IsometricPentagram instance. This class is a convenience wrapper around IsometricStarPolygon with fixed points and density.

```APIDOC
## new IsometricPentagram(props: IsometricPentagramProps)

### Description
Creates a new IsometricPentagram instance. This is a convenience class that extends IsometricStarPolygon with fixed `points: 5` and `density: 2` parameters.

### Parameters
#### Path Parameters
- **props** (IsometricPentagramProps) - Required - Configuration object for the pentagram
  - **radius** (number) - Required - Radius from center to outer points
  - **planeView** ("TOP" | "FRONT" | "SIDE") - Required - The plane view in which to create the pentagram
  - **id** (string) - Optional - Unique identifier
  - **right** (number) - Optional - Right isometric coordinate
  - **left** (number) - Optional - Left isometric coordinate
  - **top** (number) - Optional - Top isometric coordinate
  - **rotation** (number) - Optional - Rotation angle in degrees
  - **fillColor** (string) - Optional - Fill color
  - **fillOpacity** (number) - Optional - Fill opacity (0-1)
  - **strokeColor** (string) - Optional - Stroke color
  - **strokeOpacity** (number) - Optional - Stroke opacity (0-1)
  - **strokeWidth** (number) - Optional - Stroke width
  - **strokeDashArray** (number[]) - Optional - SVG stroke dash pattern
  - **strokeLinecap** ("butt" | "square" | "round") - Optional - Stroke line cap style
  - **strokeLinejoin** ("miter" | "round" | "bevel") - Optional - Stroke line join style
  - **texture** (Texture) - Optional - Image texture to apply
  - **className** (string) - Optional - CSS class name

### Return
Returns an `IsometricPentagram` instance.

### Request Example
```javascript
import { IsometricPentagram, IsometricCanvas } from '@elchininet/isometric';

const canvas = new IsometricCanvas();

// Create a basic pentagram
const pentagram = new IsometricPentagram({
    radius: 80,
    planeView: 'TOP'
});

// Create a styled pentagram
const styledPentagram = new IsometricPentagram({
    radius: 100,
    planeView: 'FRONT',
    fillColor: '#f39c12',
    strokeColor: '#d68910',
    strokeWidth: 2,
    rotation: 36 // Point star upward
});

canvas.addChildren(pentagram, styledPentagram);
```
```

--------------------------------

### Get Native SVG Path Element

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-circle.md

Retrieves the underlying SVGPathElement for a given IsometricCircle instance. Useful for direct SVG manipulation or inspection.

```javascript
const pathElement = circle.getElement();
console.log(pathElement.getAttribute('d')); // SVG path data
```

--------------------------------

### Move to Isometric Point

Source: https://github.com/elchininet/isometric/blob/master/README.md

Moves the cursor to a specified isometric point without drawing a line. Use this to start a new path segment.

```javascript
moveTo(right, left, top)
```

--------------------------------

### Create an IsometricPath Instance

Source: https://github.com/elchininet/isometric/blob/master/README.md

Instantiate IsometricPath by providing an optional properties object to configure its appearance and behavior.

```javascript
const path = new IsometricPath([properties]);
```

--------------------------------

### Initialize IsometricGroup

Source: https://github.com/elchininet/isometric/blob/master/README.md

Instantiate an IsometricGroup with optional properties. The properties object can configure various aspects of the isometric canvas.

```javascript
const isometric = new IsometricGroup([properties]);
```

--------------------------------

### Get SVG Group Element

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-text.md

Retrieves the native SVG group element that contains the text and transform elements. This is useful for direct SVG manipulation.

```typescript
getElement(): SVGGElement
```

```javascript
const groupElement = text.getElement();
console.log(groupElement.tagName); // "g"
```

--------------------------------

### Create an IsometricText Instance

Source: https://github.com/elchininet/isometric/blob/master/README.md

Instantiate IsometricText by providing an object with desired properties. This is the primary way to create a new isometric text element.

```javascript
const path = new IsometricText(properties);
```

--------------------------------

### IsometricStarPolygon Instance Methods

Source: https://github.com/elchininet/isometric/blob/master/README.md

Provides details on the instance methods available for the IsometricStarPolygon class, including methods for retrieving SVG elements, updating the polygon, managing textures, clearing commands, and handling animations and event listeners.

```APIDOC
## getElement

### Description
Returns the native `SVG` path element.

### Method
`getElement()`

### Endpoint
N/A (Instance Method)

### Parameters
None

### Request Example
```javascript
const polygon = new IsometricStarPolygon(...);
const svgPathElement = polygon.getElement();
```

### Response
#### Success Response
- **svgPathElement** (`SVGPathElement`) - The native SVG path element.

#### Response Example
```javascript
// Returns an SVGPathElement object
```
```

```APIDOC
## getPattern

### Description
Returns the native `SVGPatternElement` responsible for the texture.

### Method
`getPattern()`

### Endpoint
N/A (Instance Method)

### Parameters
None

### Request Example
```javascript
const polygon = new IsometricStarPolygon(...);
const svgPatternElement = polygon.getPattern();
```

### Response
#### Success Response
- **svgPatternElement** (`SVGPatternElement`) - The native SVG pattern element.

#### Response Example
```javascript
// Returns an SVGPatternElement object
```
```

```APIDOC
## update

### Description
Forces a re-render of the SVG pentagram.

### Method
`update()`

### Endpoint
N/A (Instance Method)

### Parameters
None

### Request Example
```javascript
const polygon = new IsometricStarPolygon(...);
polygon.update();
```

### Response
None (void function, re-renders in place)

#### Response Example
N/A
```

```APIDOC
## updateTexture

### Description
Adds or overrides the texture properties for the isometric star polygon.

### Method
`updateTexture(texture)`

### Endpoint
N/A (Instance Method)

### Parameters
#### Request Body
- **texture** (object) - Required - An object containing texture properties.
  - **url** (string, optional) - URL of the image texture.
  - **planeView** (PlaneView string, optional) - Texture plane view.
  - **height** (number, optional) - Texture height.
  - **width** (number, optional) - Texture width.
  - **scale** (number, optional) - Texture scale.
  - **pixelated** (boolean, optional) - Image rendering of the texture.
  - **shift** (object, optional) - Shifts the background position. Properties: `right` (number), `left` (number), `top` (number).
  - **rotation** (object, optional) - Rotation of the texture. Properties: `axis` (Axis string, default: '-'), `value` (number).
    - `axis values`: "RIGHT" | "LEFT" | "TOP"

### Request Example
```javascript
const polygon = new IsometricStarPolygon(...);
polygon.updateTexture({
  url: 'path/to/texture.png',
  scale: 2,
  rotation: { axis: 'TOP', value: 45 }
});
```

### Response
None (updates in place)

#### Response Example
N/A
```

```APIDOC
## clear

### Description
Cleans the isometric star polygon by removing all path commands from the native SVG path element.

### Method
`clear()`

### Endpoint
N/A (Instance Method)

### Parameters
None

### Request Example
```javascript
const polygon = new IsometricStarPolygon(...);
polygon.clear();
```

### Response
None (clears in place)

#### Response Example
N/A
```

```APIDOC
## addAnimation

### Description
Adds an animated element to the isometric star polygon. Note: Not compatible with Internet Explorer. Only one of the `right`, `left`, `top`, `radius`, `density`, or `rotation` properties can be animated at a time.

### Method
`addAnimation(animation)`

### Endpoint
N/A (Instance Method)

### Parameters
#### Request Body
- **animation** (object) - Required - An object defining the animation properties.
  - **property** (string) - Required - Indicates which property should be animated (e.g., `fillColor`, `strokeWidth`, `rotation`).
  - **duration** (number, optional, default: 1) - Indicates the number of seconds of the animation.
  - **repeat** (number, optional, default: 0) - Number of times the animation will run (`0` runs indefinitely).
  - **from** (string | number, optional) - Initial value of the animation. Cannot be used with `values`.
  - **to** (string | number, optional) - Final value of the animation. Cannot be used with `values`.
  - **values** (string | number | string[] | number[], optional) - All the values of the animation. Cannot be used with `from` and `to`.

### Request Example
```javascript
const polygon = new IsometricStarPolygon(...);
polygon.addAnimation({
  property: 'fillColor',
  duration: 2,
  values: ['red', 'blue', 'green']
});
```

### Response
None (adds animation in place)

#### Response Example
N/A
```

```APIDOC
## removeAnimationByIndex

### Description
Removes a specific animation element by its index.

### Method
`removeAnimationByIndex(index)`

### Endpoint
N/A (Instance Method)

### Parameters
#### Path Parameters
- **index** (number) - Required - The index of the animation to remove.

### Request Example
```javascript
const polygon = new IsometricStarPolygon(...);
polygon.removeAnimationByIndex(0);
```

### Response
None (removes animation in place)

#### Response Example
N/A
```

```APIDOC
## removeAnimations

### Description
Removes all animation elements from the isometric star polygon.

### Method
`removeAnimations()`

### Endpoint
N/A (Instance Method)

### Parameters
None

### Request Example
```javascript
const polygon = new IsometricStarPolygon(...);
polygon.removeAnimations();
```

### Response
None (removes all animations in place)

#### Response Example
N/A
```

```APIDOC
## addEventListener

### Description
Sets up a function that will be called whenever the specified event is delivered to the isometric star polygon (the SVG path element).

### Method
`addEventListener(type, callback, [useCapture])`

### Endpoint
N/A (Instance Method)

### Parameters
- **type** (string) - Required - The event type to listen for (e.g., 'click', 'mouseover').
- **callback** (function) - Required - The function to execute when the event is triggered.
- **useCapture** (boolean, optional) - Specifies whether the event should be dispatched to the capturing phase first.

### Request Example
```javascript
const polygon = new IsometricStarPolygon(...);
polygon.addEventListener('click', () => {
  console.log('Polygon clicked!');
});
```

### Response
None (sets up event listener)

#### Response Example
N/A
```

--------------------------------

### Pentagram Rotation Examples

Source: https://github.com/elchininet/isometric/blob/master/_autodocs/api-reference/isometric-pentagram.md

Adjust the orientation of a pentagram by setting the 'rotation' property. Use 36 degrees for a point-upward orientation or 90 degrees for a rightward orientation.

```javascript
// Point star upward (common default)
const pentagram = new IsometricPentagram({
    radius: 100,
    planeView: 'TOP',
    rotation: 36 // or 18 depending on desired orientation
});

// Point star to the right
const pentagram2 = new IsometricPentagram({
    radius: 100,
    planeView: 'TOP',
    rotation: 90
});
```