### Render Default Cube Example

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

A basic example demonstrating how to render a cube using the `cubePNG` function with default settings.

```javascript
cubePNG(element)
```

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

### Install VisualCube TS

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Install the sr-visualizer package using npm. This is the primary method for adding the library to your project.

```bash
npm install --save sr-visualizer
```

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

### Render Cube After DOM Ready (Manual Include)

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

When including the library manually, ensure the DOM is ready before rendering. This example uses `DOMContentLoaded` to trigger the cube rendering.

```javascript
document.addEventListener("DOMContentLoaded", function(event) {
  let SRVisualizer = window['sr-visualizer'];
  SRVisualizer.cubePNG(document.getElementById('example'))
});
```

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

### Render a Cube with Custom Options

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Override default cube rendering options by passing an options object to cubePNG. This example shows how to render a 4x4 cube with a specified SVG size.

```javascript
SRVisualizer.cubePNG(element, {
  cubeSize: 4, // 4x4 cube
  width: 500,  // width/height of the svg
  height: 500
})
```

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

### Render Cube with Masking

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Show only a specific layer of the cube using the `mask` option. This example masks to show only the last layer (LL). Imports `Masking` enum.

```javascript
import {cubePNG, Masking} from 'sr-visualizer'

cubePNG(element, {
  mask: Masking.LL
})
```

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

### Render Cube with Custom Color Scheme

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Apply a custom color scheme to the cube by providing a `colorScheme` object. This example uses the Japanese color scheme and imports `Face` enum.

```javascript
import {cubePNG, Face} from 'sr-visualizer'

cubePNG(element, {
  algorithm: 'M2 E2 S2',
  colorScheme: {
    [Face.U]: '#0000F2',
    [Face.R]: '#FFA100',
    [Face.F]: '#00D800',
    [Face.D]: '#FFFFFF',
    [Face.L]: '#EE0000',
    [Face.B]: '#FEFE00'
  }
})
```

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

### Render Cube with Viewport Rotations

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Apply rotations to the cube's viewport using the `viewportRotations` option. This example rotates the cube by -34 degrees on the X-axis. Imports `Axis` enum.

```javascript
import {cubePNG, Axis} from 'sr-visualizer'

cubePNG(element, {
  viewportRotations: [
    [Axis.X, -34]
  ]
})
```

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

### Build and Publish Commands

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Commands to build the project assets and publish the package. Ensure you have the necessary build tools and npm access.

```bash
> npm run build # compile and bundle assets to `/dist/bundle`
> tsc # compile build assets to `/dist/lib`
> npm publish
```

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

### Render a Cube from URL Options

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Render a cube by providing a URL string containing options. The library will automatically parse these options, useful for migrating from existing PHP scripts.

```javascript
SRVisualizer.cubePNG(element, 'visualcube.php?pzl=4&size=500')
```

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

### Render a Cube with Default Options

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Render a default cube image by calling cubePNG and passing an HTML element. The element will be replaced by the generated SVG.

```javascript
SRVisualizer.cubePNG(document.getElementById('element-id'))
```

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

### Render Cube in Plan View

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Render the cube from a top-down perspective by specifying the 'plan' view in the options object.

```javascript
cubePNG(element, {
  view: 'plan'
})
```

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

### Generate Cube with Arrow Notation

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

This snippet demonstrates how to draw arrows on the cube using a string-based notation for arrow movements and styles.

```javascript
cubePNG(element, {
  arrows: 'U0U2,U2U8,U8U0,R6R2R0-s8-i5-yellow'
})
```

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

### Render Cube with Custom Opacity

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Control the transparency of the cube and its stickers by setting `cubeOpacity` and `stickerOpacity` options. Values range from 0 to 100.

```javascript
import {cubePNG, Face} from 'sr-visualizer'

cubePNG(element, {
  cubeOpacity: 12,
  stickerOpacity: 50
})
```

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

### Include VisualCube TS Manually

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Include the library and its dependency (svg.js) via script tags if not using a module bundler. Access the library via the global `window['sr-visualizer']` object.

```html
<script src="path/to/svg.js"></script>
<script src="path/to/visualcube/dist/bundle/srVisualizer.min.js"></script>
```

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

### Import VisualCube TS Module

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Import the entire sr-visualizer module for use in your JavaScript project. This is typically done at the top of your main script file.

```javascript
import * as SRVisualizer from 'sr-visualizer'
```

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

### Generate Big Cube Visualization

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Use this snippet to generate a large cube visualization with a specified cube size and scrambling algorithm.

```javascript
cubePNG(element, {
  cubeSize: 5,
  algorithm: 'R U Uw2 Bw\' Dw L\' F\' Lw\' Dw Lw\' B Lw2 Bw B2 U2 L\' Fw Rw D\' Rw\' Bw D\' Rw2 L2 B L2 Bw L B\' R\' F\' R\' B\' Dw2 Lw2 D2 Dw\' B Lw L\' R\' Fw Uw2 R2 Bw\' Lw\' B R L\' Dw2 F D2 Bw\' U\' Uw F\' B R\' D2 Bw2'
})
```

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

### Render Raw SVG Element

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Render the raw SVG element instead of a PNG image by calling cubeSVG. The usage is identical to cubePNG.

```javascript
SRVisualizer.cubeSVG(element)
```

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

### Generate Cube with Object-Based Arrows

Source: https://github.com/tdecker91/visualcube/blob/master/README.md

Use this snippet to draw arrows on the cube using a more structured object-based format for defining arrow properties like faces, positions, scale, and color.

```javascript
cubePNG(element, {
  arrows: [
    {
      s1: { face: Face.U  n: 0 },
      s2: { face: Face.U, n: 2 },
      scale: 10
    },
    {
      s1: { face: Face.U  n: 2 },
      s2: { face: Face.U, n: 8 },
      scale: 10
    },
    {
      s1: { face: Face.U  n: 8 },
      s2: { face: Face.U, n: 0 },
      scale: 10
    },
    {
      s1: { face: Face.R  n: 6 },
      s2: { face: Face.R, n: 2 },
      s3: { face: Face.R, n: 0 },
      scale: 8,
      influence: 5,
      color: 'yellow'
    },
  ]
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.