Start here

# WebGL2 Selection Styles Demo

This demo shows the available selection styles for nodes, edges, and labels in WebGL2 rendering.

In WebGL2, selections can be configured in various ways: There are multiple patterns to choose from, and colors, thickness, and margins are configurable. Additionally, selections can be activated and deactivated using animated transitions, and for the appropriate selection styles, a "marching ants" animation is available, too.

## Things to Try

- Configure the basic pattern used.
- Experiment with the primary and secondary color and how they are used in the various selection styles.
- Tweak the thickness and margin of the selection style.
- Activate transitions, select and deselect various graph elements.
- Activate the dash animation and select various graph elements.
- Observe that only styles with repeating patterns along the selection visualization are animated.
- Change the zoom policy and observe how the rendering of the selection is modified in the corresponding coordinate system.

In this demo, the same selection style is used for all graph elements. This is only a configuration in the demo, since with the API the styles for the different element types can be configured individually. See the updateSelectionStyles function in the demo source code.