Dark Sierpinski Triangle

The point of this benchmark is not to show how it is rendered in standard (synchronous) mode, because this is a trivial task, the point is to demonstrate scheduling, cancellation and restoration of the rendering task in concurrent mode. In this triangle, each group of 3 points is artificially slowed down (see code) so as to cause freezes if using synchronous rendering. In the case of concurrent rendering, the animation is smooth and the counter is updated, hover effect (uses render, not css) remains responsive, even if you also artificially slow down the execution through the performance tab (6x slowdown).

On slower devices the counter will not update, but the animation and hover will be smooth because it takes precedence in this example.

This behavior is achieved without using requestIdleCallback or any other web api, so concurrent mode can be used on any dynamic platforms.

Compare it with React Fiber version