Website powered by

UI SDF Shape Animation in Unity Canvas System with Dotween

In this project, I explored SDF math while building an early reusable material-value tweening system (DoTween based).
WebGL build here: [https://lysard.itch.io/ui-sdf-animation](https://lysard.itch.io/ui-sdf-animation)

Full Breakdown here: https://chain-collision-39b.notion.site/SDF-Buttons-and-Animation-System-Setup-2e993cf6835a80728d9be448a5bbd4fa

### Features:
- Polygon buttons with shape variant customizability, for quick iteration.
- SDF resolution independence, and avoidance of texture usage.
- Fluid animations possible - shape morphing/spinning/masking. Shader based, reducing possible canvas rebuilds.
- Inspector-driven animation states. For friendly artist tween adjusting.
- Modular tweens that can be applied to drive any material property.

Process

UI Animation Showcase Mockup