live_design! {
MyShader = {{MyShader}} {
fn pixel(self) -> vec4 {
let sdf = Sdf2d::viewport(self.pos * self.rect_size);

// Draw shapes
sdf.circle(50.0, 50.0, 20.0);
sdf.fill(#FF0000);

return sdf.result;
}
}
}

// Basic shapes
sdf.circle(x, y, radius)
sdf.box(x, y, width, height, border_radius)
sdf.capsule(x1, y1, x2, y2, width)

// Fill and stroke
sdf.fill(color)              // Fill shape
sdf.stroke(color, width)     // Stroke outline
sdf.fill_keep(color)         // Fill, keep shape for more ops

live_design! {
<Button> {
animator: {
hover = {
default: off
off = { from: {all: Forward {duration: 0.15}} }
on = { from: {all: Snap} }
}
}

draw_bg: {
color: #2196F3
color_hover: #42A5F5
}
}
}

live_design! {
LoadingSpinner = {{LoadingSpinner}} {
animator: {
spin = {
default: on
on = {
from: {all: Loop {duration: 1.0}}
apply: { draw_bg: { rotation: 360.0 } }
}
}
}

draw_bg: {
fn pixel(self) -> vec4 {
// Rotating arc shader
let sdf = Sdf2d::viewport(self.pos * self.rect_size);
let angle = self.rotation * PI / 180.0;
// Draw rotating arc
return sdf.result;
}
}
}
}

draw_bg: {
fn pixel(self) -> vec4 {
// Linear gradient
let grad = self.pos.y;
let color = mix(#FF0000, #0000FF, grad);
return vec4(color, 1.0);
}
}