Visualizes a binary relation R as a highlighted subset of the Cartesian product A×A (grid of ordered pairs) alongside an equivalent directed-graph view. The animation cycles through the defining properties - reflexive (add diagonal pairs/loops), symmetric (mirror pairs across the diagonal / opposite arrows), and transitive (add implied “shortcut” pairs from length-2 paths) - ending with the idea of an equivalence relation requiring all three.
Single self-contained Canvas2D draw function. Uses time-based phases (4.2s loop) with provided cubic ease for smooth transitions. Left panel renders A×A as a snapped grid with highlighted cells for pairs in R; right panel renders the same pairs as arrows between blocky node boxes. Transitivity stage animates a witness path a→b→c and the implied shortcut a→c, then adds additional implied pairs.