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

            // 形状を描画
            sdf.circle(50.0, 50.0, 20.0);
            sdf.fill(#FF0000);

            return sdf.result;
        }
    }
}

// 基本形状
sdf.circle(x, y, radius)
sdf.box(x, y, width, height, border_radius)
sdf.capsule(x1, y1, x2, y2, width)

// 塗りつぶしとストローク
sdf.fill(color)              // 形状を塗りつぶす
sdf.stroke(color, width)     // 輪郭を描く
sdf.fill_keep(color)         // 塗りつぶし、さらなる操作のために形状を保持

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 {
                // 回転アークシェーダー
                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                let angle = self.rotation * PI / 180.0;
                // 回転アークを描画
                return sdf.result;
            }
        }
    }
}

draw_bg: {
    fn pixel(self) -> vec4 {
        // 線形グラデーション
        let grad = self.pos.y;
        let color = mix(#FF0000, #0000FF, grad);
        return vec4(color, 1.0);
    }
}