### Run Vello Hybrid Winit Example

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_hybrid/examples/winit/README.md

Execute the Vello Hybrid Winit example with default settings. This command builds and runs the example in release mode.

```sh
cargo run -p vello_hybrid_winit --release
```

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

### Run Vello CPU Winit Example

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_cpu/examples/winit/README.md

Command to build and run the Vello CPU Winit example in release mode for optimal performance.

```shell
cargo run -p vello_cpu_winit --release
```

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

### Run Example Program

Source: https://github.com/linebender/vello/blob/main/README.md

Command to run an example program using Cargo. Ensure you are in the correct directory.

```shell
cargo run -p with_winit
```

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

### Run Android Example

Source: https://github.com/linebender/vello/blob/main/README.md

Run the Winit example on Android using cargo apk. This command builds and runs the library target for Android.

```shell
cargo apk run -p with_winit --lib
```

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

### Run Android Example with Environment Variables

Source: https://github.com/linebender/vello/blob/main/README.md

Run the Android Winit example with custom logging and arguments embedded as environment variables. VELLO_STATIC_LOG controls RUST_LOG, and VELLO_STATIC_ARGS passes command-line arguments.

```shell
VELLO_STATIC_LOG="vello=trace" VELLO_STATIC_ARGS="--test-scenes" cargo apk run -p with_winit --lib
```

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

### Initialize and Render with Vello

Source: https://github.com/linebender/vello/blob/main/README.md

Demonstrates the basic setup for using Vello as a renderer. This includes initializing wgpu, creating a scene, drawing elements, and rendering to a wgpu texture. Requires wgpu and vello crates.

```rust
use vello::{
   kurbo::{Affine, Circle},
   peniko::{Color, Fill},
   *,
};

// Initialize wgpu and get handles
let (width, height) = ...;
let device: wgpu::Device = ...;
let queue: wgpu::Queue = ...;
let mut renderer = Renderer::new(
   &device,
   RendererOptions::default()
).expect("Failed to create renderer");
// Create scene and draw stuff in it
let mut scene = vello::Scene::new();
scene.fill(
   vello::peniko::Fill::NonZero,
   vello::Affine::IDENTITY,
   vello::Color::from_rgb8(242, 140, 168),
   None,
   &vello::Circle::new((420.0, 200.0), 120.0),
);
// Draw more stuff
scene.push_layer(...);
scene.fill(...);
scene.stroke(...);
scene.pop_layer(...);
let texture = device.create_texture(&...);

// Render to a wgpu Texture
renderer
   .render_to_texture(
      &device,
      &queue,
      &scene,
      &texture,
      &vello::RenderParams {
         base_color: palette::css::BLACK, // Background color
         width,
         height,
         antialiasing_method: AaConfig::Msaa16,
      },
   )
   .expect("Failed to render to a texture");
// Do things with `texture`, such as blitting it to the Surface using
// wgpu::util::TextureBlitter

```

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

### Run Vello Examples via Cargo

Source: https://context7.com/linebender/vello/llms.txt

Command-line instructions for running various Vello examples using Cargo. Includes options for interactive windows, headless rendering, and WebAssembly builds.

```shell
# Interactive winit window (renders GhostScript Tiger + test scenes)
cargo run -p with_winit
```

```shell
# Show all built-in test scenes
cargo run -p with_winit -- --test-scenes
```

```shell
# Headless render to PNG (area AA, scene index 0)
cargo run -p headless -- --scene 0 --out-directory /tmp/output
```

```shell
# WebAssembly / WebGPU demo
rustup target add wasm32-unknown-unknown
cargo run_wasm -p with_winit --bin with_winit_bin
```

```shell
# Android (via cargo-apk)
cargo apk run -p with_winit --lib
```

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

### Test Native WebGL Example with wasm-pack

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_hybrid/examples/native_webgl/README.md

This command initiates an interactive test session for the native WebGL example using wasm-pack. Ensure wasm-pack is installed and follow the printed URL for testing.

```bash
wasm-pack test --chrome
# Navigate to printed URL
```

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

### Initialize and Render with Vello

Source: https://github.com/linebender/vello/blob/main/vello/README.md

This snippet shows the basic setup for using Vello as a renderer. It involves initializing wgpu, creating a Renderer instance, defining a scene with shapes and colors, and rendering the scene to a wgpu texture.

```rust
use vello::kurbo::Affine;
use vello::peniko::{Color, Fill};
use vello::{AaConfig, Renderer, RendererOptions, Scene};

// Initialize wgpu and get handles
let (width, height) = (1000, 1000);
let device: wgpu::Device = /* ... obtain wgpu device ... */;
let queue: wgpu::Queue = /* ... obtain wgpu queue ... */;
let mut renderer = Renderer::new(
   &device,
   RendererOptions::default()
).expect("Failed to create renderer");

// Create scene and draw stuff in it
let mut scene = Scene::new();
scene.fill(
   Fill::NonZero,
   Affine::IDENTITY,
   Color::from_rgb8(242, 140, 168),
   None,
   &vello::Circle::new((420.0, 200.0), 120.0),
);

// Draw more stuff
scene.push_layer(...);
scene.fill(...);
scene.stroke(...);
scene.pop_layer(...);

let texture = device.create_texture(&wgpu::TextureDescriptor {
    size: wgpu::Extent3d { width, height, depth_or_array_layers: 1 },
    mip_level_count: 1,
    sample_count: 1,
    dimension: wgpu::TextureDimension::D2,
    format: wgpu::TextureFormat::Rgba8UnormSrgb,
    usage: wgpu::TextureUsages::RENDER_ATTACHMENT | wgpu::TextureUsages::COPY_SRC,
    label: None,
});

// Render to a wgpu Texture
renderer
   .render_to_texture(
      &device,
      &queue,
      &scene,
      &texture,
      &vello::RenderParams {
         base_color: palette::css::BLACK, // Background color
         width,
         height,
         antialiasing_method: AaConfig::Msaa16,
      },
   )
   .expect("Failed to render to a texture");

// Do things with surface texture, such as blitting it to the Surface using
// wgpu::util::TextureBlitter.
```

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

### Run Vello Hybrid Winit with Scene Index

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_hybrid/examples/winit/README.md

Run the Vello Hybrid Winit example, selecting a specific scene from the built-in set. Provide the scene index as an argument after the release flag.

```bash
cargo run -p vello_hybrid_winit --release -- [SCENE INDEX]
```

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

### Run Vello Hybrid Winit with SVG Files

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_hybrid/examples/winit/README.md

Run the Vello Hybrid Winit example, specifying SVG files to render. Pass the paths to the desired SVG files as arguments after the release flag.

```bash
cargo run -p vello_hybrid_winit --release -- [SVG FILES]
```

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

### Vello CPU Usage Example

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_cpu/README.md

This example demonstrates the basic usage of Vello CPU for rendering a simple scene. It covers creating a RenderContext, setting paint properties, filling a rectangle, and rendering the output to a Pixmap.

```APIDOC
## Vello CPU Rendering Workflow

### Description
This section outlines the typical workflow for using Vello CPU to render graphics. It involves initializing a `RenderContext`, defining scene elements with paint and shape properties, and finally rendering the scene to a target `Pixmap`.

### Steps

1.  **Initialize `RenderContext`**: Create a `RenderContext` instance, specifying the target dimensions.
    ```rust
    let width = 10;
    let height = 5;
    let mut context = RenderContext::new(width, height);
    ```

2.  **Prepare Resources**: Initialize any necessary resources, such as `Resources`.
    ```rust
    let mut resources = Resources::new();
    ```

3.  **Set Paint Properties**: Define how subsequent shapes will be painted.
    ```rust
    context.set_paint(css::MAGENTA);
    ```

4.  **Define Shapes**: Use methods like `fill_rect`, `fill_path`, `stroke_path`, or `glyph_run` to define the geometry of scene objects.
    ```rust
    context.fill_rect(&Rect::from_points((3., 1.), (7., 4.)));
    ```

5.  **Prepare Target Pixmap**: Create a `Pixmap` to hold the rendered output.
    ```rust
    let mut target = Pixmap::new(width, height);
    ```

6.  **Flush Context**: Ensure all drawing commands are ready for rendering.
    ```rust
    context.flush();
    ```

7.  **Render to Pixmap**: Execute the rendering process and store the result in the target `Pixmap`.
    ```rust
    context.render_to_pixmap(&mut resources, &mut target);
    ```

### Example
```rust
use vello_cpu::{RenderContext, Resources, Pixmap, RenderMode};
use vello_cpu::{color::{palette::css, PremulRgba8}, kurbo::Rect};

let width = 10;
let height = 5;
let mut context = RenderContext::new(width, height);
let mut resources = Resources::new();

context.set_paint(css::MAGENTA);
context.fill_rect(&Rect::from_points((3., 1.), (7., 4.)));

let mut target = Pixmap::new(width, height);
context.flush();
context.render_to_pixmap(&mut resources, &mut target);

// Verification logic (as provided in the source)
let expected_render = b"\\
    0000000000\\
    0001111000\\
    0001111000\\
    0001111000\\
    0000000000";
let magenta = css::MAGENTA.premultiply().to_rgba8();
let transparent = PremulRgba8 {r: 0, g: 0, b: 0, a: 0};
let mut result = Vec::new();
for pixel in target.data() {
    if *pixel == magenta {
        result.push(b'1');
    } else if *pixel == transparent {
        result.push(b'0');
    } else {
         panic!("Got unexpected pixel value {pixel:?}");
    }
}
assert_eq!(&result, expected_render);
```

### Further Examples
Refer to the [examples directory](https://github.com/linebender/vello/tree/main/sparse_strips/vello_cpu/examples) for more detailed usage scenarios.
```

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

### Run WASM Build for Native WebGL

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_hybrid/examples/native_webgl/README.md

Use this command to build and run the Vello Hybrid native WebGL example with optimizations.

```bash
cargo run_wasm -p native_webgl --release
```

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

### RenderContext Usage Example

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_cpu/README.md

Demonstrates the basic usage of Vello CPU for rendering a filled rectangle. It covers creating a RenderContext, setting paint, filling a rectangle, and rendering to a Pixmap. It also includes assertions to verify the rendered output.

```rust
use vello_cpu::{RenderContext, Resources, Pixmap, RenderMode};
use vello_cpu::{color::{palette::css, PremulRgba8}, kurbo::Rect};
let width = 10;
let height = 5;
let mut context = RenderContext::new(width, height);
let mut resources = Resources::new();
context.set_paint(css::MAGENTA);
context.fill_rect(&Rect::from_points((3., 1.), (7., 4.)));

let mut target = Pixmap::new(width, height);
// While calling `flush` is only strictly necessary if you are rendering using
// multiple threads, it is recommended to always do this.
context.flush();
context.render_to_pixmap(&mut resources, &mut target);

let expected_render = b"\
    0000000000\
    0001111000\
    0001111000\
    0001111000\
    0000000000";
let magenta = css::MAGENTA.premultiply().to_rgba8();
let transparent = PremulRgba8 {r: 0, g: 0, b: 0, a: 0};
let mut result = Vec::new();
for pixel in target.data() {
    if *pixel == magenta {
        result.push(b'1');
    } else if *pixel == transparent {
        result.push(b'0');
    } else {
         panic!("Got unexpected pixel value {pixel:?}");
    }
}
assert_eq!(&result, expected_render);
```

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

### Run Vello Viewer with Default SVGs

Source: https://github.com/linebender/vello/blob/main/examples/with_winit/README.md

Execute the Vello viewer with default public-domain SVG images. No arguments are needed to run this basic example.

```bash
$ cargo run -p with_winit --release
```

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

### Run Vello CPU Demo (Scalar Build)

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_cpu/examples/wasm_cpu/README.md

Execute this command to build and run the Vello CPU demo with scalar optimizations.

```bash
cargo run_wasm -p wasm_cpu --release
```

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

### Downgrade Dependency Example

Source: https://github.com/linebender/vello/blob/main/vello_shaders/README.md

If a compilation issue arises due to a dependency's Rust version requirement, this command can be used to downgrade the problematic dependency.

```sh
# Use the problematic dependency's name and version
cargo update -p package_name --precise 0.1.1
```

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

### Run Vello CPU Demo (SIMD Enabled)

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_cpu/examples/wasm_cpu/README.md

Use this command to build and run the Vello CPU demo with SIMD128 features enabled for performance.

```bash
RUSTFLAGS=-Ctarget-feature=+simd128 cargo run_wasm -p wasm_cpu --release
```

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

### Initialize wgpu RenderContext for Windowed or Headless Rendering

Source: https://context7.com/linebender/vello/llms.txt

Manages wgpu state, including Instance, adapters, and DeviceHandles. Use create_surface for windowed rendering or device(None) for headless.

```rust
use vello::util::{RenderContext, RenderSurface};
use vello::wgpu;

// --- Windowed setup (with winit) ---
let mut context = RenderContext::new();
let surface: RenderSurface = pollster::block_on(
    context.create_surface(
        window.clone(),      // impl Into<wgpu::SurfaceTarget>
         1280,                // width
         800,                // height
        wgpu::PresentMode::AutoVsync,
    )
).expect("Failed to create surface");

// Resize on WindowEvent::Resized
context.resize_surface(&mut surface, new_width, new_height);

// --- Headless setup ---
let mut context = RenderContext::new();
let device_id = pollster::block_on(context.device(None))
    .expect("No compatible GPU");
let device = &context.devices[device_id].device;
let queue  = &context.devices[device_id].queue;
```

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

### RenderContext

Source: https://context7.com/linebender/vello/llms.txt

Manages wgpu device and surface state. It initializes the wgpu Instance, discovers adapters, and manages `DeviceHandle`s. Use `create_surface` for windowed rendering or `device(None)` for headless rendering.

```APIDOC
## `RenderContext` — wgpu device and surface management

`RenderContext` is the top-level wgpu state manager. It initializes the wgpu `Instance`, discovers adapters, and manages a pool of `DeviceHandle`s (device + queue pairs). Use `create_surface` to create a windowed `RenderSurface`, or `device(None)` for headless rendering.

```rust
use vello::util::{RenderContext, RenderSurface};
use vello::wgpu;

// --- Windowed setup (with winit) ---
let mut context = RenderContext::new();
let surface: RenderSurface = pollster::block_on(
    context.create_surface(
        window.clone(),      // impl Into<wgpu::SurfaceTarget>
        1280,                // width
         800,                // height
        wgpu::PresentMode::AutoVsync,
    )
).expect("Failed to create surface");

// Resize on WindowEvent::Resized
context.resize_surface(&mut surface, new_width, new_height);

// --- Headless setup ---
let mut context = RenderContext::new();
let device_id = pollster::block_on(context.device(None))
    .expect("No compatible GPU");
let device = &context.devices[device_id].device;
let queue  = &context.devices[device_id].queue;
```
```

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

### Build and Run Web Version

Source: https://github.com/linebender/vello/blob/main/README.md

Build and run the web version of the Winit demo. Ensure the wasm32 target is added to your Rust toolchain. The binary name must be explicitly provided.

```shell
rustup target add wasm32-unknown-unknown

# The binary name must also be explicitly provided as it differs from the package name
cargo run_wasm -p with_winit --bin with_winit_bin
```

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

### Configure Android Release Signing

Source: https://github.com/linebender/vello/blob/main/README.md

Add this configuration to examples/with_winit/Cargo.toml to enable release mode signing for Android builds with cargo apk.

```toml
[package.metadata.android.signing.release]
path = "$HOME/.android/debug.keystore"
keystore_password = "android"
```

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

### Run Vello Hybrid WGPU WebGL

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_hybrid/examples/wgpu_webgl/README.md

Use this command to run the Vello Hybrid WGPU WebGL backend in release mode for development.

```bash
cargo run_wasm -p wgpu_webgl --release
```

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

### CPU Snapshot Commands

Source: https://github.com/linebender/vello/blob/main/xtask/README.md

Use these commands to manage and report on CPU snapshots. The 'review' command offers interactive testing for snapshot blessings.

```bash
cargo xtask snapshots-cpu report
```

```bash
cargo xtask snapshots-cpu review
```

```bash
cargo xtask snapshots-cpu dead-snapshots
```

```bash
cargo xtask snapshots-cpu size-check
```

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

### Rerun Benchmarks and Compare

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_bench/README.md

After making code changes, rerun benchmarks and compare them against a previously saved baseline. This helps identify performance regressions.

```shell
# Rerun bench against new changes
cargo bench -- [TEST NAME FILTER]
# Compare it against control
cargo bench --bench main -- --load-baseline new --baseline control
```

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

### Renderer::new

Source: https://context7.com/linebender/vello/llms.txt

Creates a GPU renderer bound to a wgpu::Device, with options for anti-aliasing, CPU fallback, and initialization threads. Shader pipelines are compiled at construction time.

```APIDOC
## `Renderer::new` — Create a GPU renderer

`Renderer` executes a `Scene` on the GPU using wgpu. It is bound to a single `wgpu::Device` and compiles shader pipelines at construction time. `RendererOptions` controls anti-aliasing modes, CPU fallback, thread count, and pipeline caching.

### Usage
```rust
use std::num::NonZeroUsize;
use vello::{AaConfig, AaSupport, Renderer, RendererOptions};

// Minimal renderer: area anti-aliasing only, single init thread (recommended on macOS)
let renderer = Renderer::new(
    &device, // Assuming `device` is a valid wgpu::Device
    RendererOptions {
        use_cpu: false,
        antialiasing_support: AaSupport::area_only(),
        num_init_threads: NonZeroUsize::new(1),
        pipeline_cache: None,
    },
)
.expect("Failed to create renderer");

// Full renderer with all AA modes enabled (higher startup cost)
let renderer_full = Renderer::new(
    &device, // Assuming `device` is a valid wgpu::Device
    RendererOptions {
        use_cpu: false,
        antialiasing_support: AaSupport::all(), // Area, MSAA8, MSAA16
        num_init_threads: None,                 // heuristic (not macOS)
        ..Default::default()
    },
)
.expect("Failed to create renderer");
```
```

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

### Debug SVG Rendering Stages

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_toy/README.md

Use this binary to render an SVG path and visualize intermediate rendering pipeline stages. Specify the path and desired stages for output.

```bash
cargo run --bin debug -- --path "M 5 5 L 40 23 L 7 44 Z"  --stages line_segments,tile_areas
```

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

### Fill Shapes with Different Brushes and Rules

Source: https://context7.com/linebender/vello/llms.txt

Shows how to fill shapes using solid colors, linear gradients, and different winding rules (NonZero, EvenOdd) with BezPath. Requires importing Scene, kurbo, and peniko types.

```rust
use vello::Scene;
use vello::kurbo::{Affine, Rect, BezPath};
use vello::peniko::{Fill, Gradient, Color, Extend};
use vello::peniko::color::palette;

let mut scene = Scene::new();

// Fill a rectangle with a solid CSS named color
scene.fill(
    Fill::NonZero,
    Affine::IDENTITY,
    palette::css::CORNFLOWER_BLUE,
    None,
    &Rect::new(0.0, 0.0, 200.0, 100.0),
);

// Fill with a linear gradient
let gradient = Gradient::new_linear((0.0, 0.0), (200.0, 0.0))
    .with_stops([
        (0.0_f32, palette::css::RED),
        (0.5_f32, palette::css::GREEN),
        (1.0_f32, palette::css::BLUE),
    ]);
scene.fill(
    Fill::NonZero,
    Affine::IDENTITY,
    &gradient,
    None,
    &Rect::new(0.0, 110.0, 200.0, 210.0),
);

// Fill with EvenOdd rule on a complex BezPath
let mut path = BezPath::new();
path.move_to((100.0, 10.0));
path.line_to((200.0, 190.0));
path.line_to((10.0, 70.0));
path.line_to((190.0, 70.0));
path.line_to((0.0, 190.0));
path.close_path();
scene.fill(Fill::EvenOdd, Affine::IDENTITY, palette::css::GOLD, None, &path);
```

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

### Generate GLSL Shaders Locally

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_sparse_shaders/README.md

Run this command to generate a local copy of the WebGL shaders into the `generated_glsl` folder for inspection.

```sh
cargo run -p vello_sparse_shaders --features glsl
```

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

### Run WGPU and WebGL Sparse Tests

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_sparse_tests/README.md

Execute the `vello_sparse_tests` suite, including WebGL tests, using `wasm-pack`. The `--headless` flag runs tests without a browser UI, while `--chrome` specifies the browser. Include the `--features webgl` flag to enable WebGL testing. Remove `--headless` to debug failing tests by inspecting diff images in the browser.

```sh
wasm-pack test --headless --chrome --features webgl --release
```

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

### GPU Snapshot Commands

Source: https://github.com/linebender/vello/blob/main/xtask/README.md

Similar to CPU snapshots, these commands manage and report on GPU snapshots. Use the ellipsis to indicate further available commands.

```bash
cargo xtask snapshots-gpu ...
```

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

### Regenerate Probe Reference Images

Source: https://github.com/linebender/vello/blob/main/sparse_strips/vello_common/assets/README.md

Run this command to regenerate probe.png and probe.rgba. Ensure you are in the vello_sparse_tests directory.

```bash
cargo run --bin regenerate_probe_reference
```

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

### Run Vello Viewer with Custom SVGs

Source: https://github.com/linebender/vello/blob/main/examples/with_winit/README.md

Run the Vello viewer and specify custom SVG files to render. Pass the paths to the desired SVG files as arguments after the release flag.

```bash
$ cargo run -p with_winit --release -- [SVG FILES]
```

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

### Create and Draw Shapes with Scene

Source: https://context7.com/linebender/vello/llms.txt

Demonstrates creating a new Scene and adding various shapes like filled circles, stroked rounded rectangles, straight lines, and transformed ellipses. The Scene can be reused by calling reset().

```rust
use vello::Scene;
use vello::peniko::Fill;
use vello::peniko::color::palette;
use vello::kurbo::{Affine, Circle, RoundedRect, Stroke, Line, Ellipse};
use vello::peniko::Color;

let mut scene = Scene::new();

// Filled circle
scene.fill(
    Fill::NonZero,
    Affine::IDENTITY,
    Color::new([0.9529, 0.5451, 0.6588, 1.0]), // RGBA f32
    None,                                        // no brush transform
    &Circle::new((420.0, 200.0), 120.0),
);

// Stroked rounded rectangle
let stroke = Stroke::new(6.0);
scene.stroke(
    &stroke,
    Affine::IDENTITY,
    Color::new([0.9804, 0.702, 0.5294, 1.0]),
    None,
    &RoundedRect::new(10.0, 10.0, 240.0, 240.0, 20.0),
);

// Straight line
scene.stroke(
    &stroke,
    Affine::IDENTITY,
    Color::new([0.5373, 0.7059, 0.9804, 1.0]),
    None,
    &Line::new((260.0, 20.0), (620.0, 100.0)),
);

// Filled ellipse with a transform (scale + translate)
scene.fill(
    Fill::NonZero,
    Affine::translate((50.0, 50.0)),
    palette::css::REBECCA_PURPLE,
    None,
    &Ellipse::new((250.0, 420.0), (100.0, 160.0), -90.0),
);

// Reuse the scene the next frame
scene.reset();
```