---
contentHash: sha256:d96e555e559b053b68341222820c830e7c0f52458413fe5f2804f5d8b80e7a20
documentId: element:sk-raster-color-source
kind: element
schemaVersion: 1
skenraVersion: 0.1.0-alpha.1
---
# sk-raster-color-source

<a id="overview"></a>

## Overview

Paints a material's base color straight from an image — projecting a loaded
raster onto a surface like a slide projector — the way to stamp a logo, decal,
or texture onto geometry instead of computing the color.

This is the image-driven member of the ColorSource family: like every
color-source it gives a material a base color that varies across the surface,
but instead of computing that color it samples a loaded raster and returns the
texel's RGBA — including its alpha — wherever the source applies. It is a full
scene node, so its own transform and every ancestor's carries the image, and it
projects with foreshortening: a tilted source narrows its decal on the
receiving surface, never widens it.

**Key attributes.** `src` is the image URL (http(s), relative, or a `data:`
URI); SVG sources are rasterized and sampled like any other. `projection-plane`
is a signed two-axis token (default `xz`) mapping image u/v onto world axes —
a standing XY surface reads upright with `x-y`. `width`/`height` size one raster
copy in local units (`0` = AUTO: width → one unit, height → the image's aspect
ratio); `anchor` (a box keyword or `content(x, y)` in image pixels, default
`center`) sits at the source's local origin. `tile` is `none` (one bounded
decal, default) or `repeat` (seamless tiling). `visualize` draws the projection
quad so the placement is visible while composing.

**Projection & loading.** With `projection="auto"` (default) the paint drives
the parametrization — stroke paints project stroke-parametrically, surface
paints planarly; `projection="uv"` samples the mesh's authored texture
coordinates instead. The raster loads asynchronously: until it arrives the flat
`base-color` shows through, and a `load` event re-renders the consumers once
texel data is available. Scene readiness does not await the load.

**Related.** A material selects it with `base-color-source="#id"` (see
sk-plain-material). Its scalar-driven sibling is
sk-color-map-source; to layer it under or over other sources, use
sk-composite-color-source (at most one raster child per material).

<a id="example"></a>

## Example

```sk
<!-- Projects a raster — a self-contained inline data: SVG target decal — onto a
     sphere as its base color. `projection-plane="x-y"` stands the image upright,
     `width="2"` sizes one copy, `anchor="center"` pins it to the origin, and
     `tile="none"` places a single decal. Read the placement against the sphere. -->
<sk-scene>
    <sk-directional-light p="42deg" h="25deg" intensity="1.0"></sk-directional-light>
    <sk-ambient-light intensity="0.4"></sk-ambient-light>

    <sk-raster-color-source id="decal"
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23f4a259'/%3E%3Ccircle cx='32' cy='32' r='20' fill='%23216869'/%3E%3Ccircle cx='32' cy='32' r='9' fill='%23f4f1de'/%3E%3C/svg%3E"
        projection-plane="x-y" width="2" anchor="center"
        x="0" y="0" z="0" tile="none"></sk-raster-color-source>
    <sk-plain-material id="mat" base-color="white"
        base-color-source="#decal"></sk-plain-material>

    <sk-sphere radius="2" segments="6">
        <sk-surface-paint material="#mat"></sk-surface-paint>
    </sk-sphere>
</sk-scene>
```

<a id="attr-id"></a>

## id

Type: `<id>` · Required: no · Animatable: no

Related: [`type:id`](types/id.md)

<a id="attr-src"></a>

## src

Type: `<string>` · Required: yes · Animatable: no

The raster URL (http(s)/relative/`data:`). Assigning starts a load.

Related: [`type:string`](types/string.md)

<a id="attr-projection"></a>

## projection

Type: `<raster-projection>` · Required: no · Animatable: no · Default: `"auto"`

Projection mode.

Related: [`type:raster-projection`](types/raster-projection.md)

<a id="attr-projection-plane"></a>

## projection-plane

Type: `<coordinate-space>` · Required: no · Animatable: no · Default: `"xz"`

The signed 2-axis `<coordinate-space>` token naming which LOCAL axes

Related: [`type:coordinate-space`](types/coordinate-space.md)

<a id="attr-tile"></a>

## tile

Type: `<raster-tile>` · Required: no · Animatable: yes · Default: `"none"`

Tile mode outside the unit uv square (a params flag — data-only).

Related: [`type:raster-tile`](types/raster-tile.md)

<a id="attr-width"></a>

## width

Type: `<number>` · Required: no · Animatable: yes · Default: `0`

Local units one raster copy spans along u — or, sampled from a stroke

Related: [`type:number`](types/number.md)

<a id="attr-height"></a>

## height

Type: `<number>` · Required: no · Animatable: yes · Default: `0`

Local units one raster copy spans along v. 0 = AUTO: derived from the

Related: [`type:number`](types/number.md)

<a id="attr-anchor"></a>

## anchor

Type: `<content-anchor>` · Required: no · Animatable: no · Default: `"center"`

The image point pinned to the source's local origin: a box-anchor

Related: [`type:content-anchor`](types/content-anchor.md)

<a id="attr-field"></a>

## field

Type: `<id-ref>` · Required: no · Animatable: yes · Inherited from `ColorSource`

Gets the optional applicability field that masks where this source

Related: [`type:id-ref`](types/id-ref.md)

<a id="attr-x"></a>

## x

Type: `<number>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Gets the X position component.

Related: [`type:number`](types/number.md)

<a id="attr-y"></a>

## y

Type: `<number>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Gets the Y position component.

Related: [`type:number`](types/number.md)

<a id="attr-z"></a>

## z

Type: `<number>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Gets the Z position component.

Related: [`type:number`](types/number.md)

<a id="attr-h"></a>

## h

Type: `<angle>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Gets the heading (Y-axis) rotation in radians.

Related: [`type:angle`](types/angle.md)

<a id="attr-p"></a>

## p

Type: `<angle>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Gets the pitch (X-axis) rotation in radians.

Related: [`type:angle`](types/angle.md)

<a id="attr-b"></a>

## b

Type: `<angle>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Gets the bank (Z-axis) rotation in radians.

Related: [`type:angle`](types/angle.md)

<a id="attr-visualize"></a>

## visualize

Type: `<boolean>` · Required: no · Animatable: no · Default: `false` · Inherited from `VisualizableSceneNode`

Whether the visualization is visible (wireframe splines + center marker).

Related: [`type:boolean`](types/boolean.md)

<a id="attr-interactive-controls"></a>

## interactive-controls

Type: `<boolean>` · Required: no · Animatable: no · Default: `false` · Inherited from `VisualizableSceneNode`

Whether interactive controls are shown (draggable markers for adjusting parameters).

Related: [`type:boolean`](types/boolean.md)

---

Related records: [`type:angle`](types/angle.md), [`type:boolean`](types/boolean.md), [`type:content-anchor`](types/content-anchor.md), [`type:coordinate-space`](types/coordinate-space.md), [`type:id`](types/id.md), [`type:id-ref`](types/id-ref.md), [`type:number`](types/number.md), [`type:raster-projection`](types/raster-projection.md), [`type:raster-tile`](types/raster-tile.md), [`type:string`](types/string.md)