Examples

This section is dedicated to examples of vector graphics use on the web as well as in applications on desktops, etc.

This is a work in progress section where increasingly more complex graphics user interfaces are ported to the web using different methods and technologies. Currently Javascript and HTML 5 Canvas is used. HTML 5 Canvas is probably going to be the intermediate medium between future frontend code and the display on the browser. This is the way online games have been working so far and it is a suitable technology for vector GUIs.

Below examples illustrate how similar vector graphics primitives are in different platforms.

ClockWidget

ClockWidget is a real time vector graphics clock inspired in a design found in Freepik and written in Java . This is an implementation working on desktops, automatically placed at the top right side of the screen.

The same analog vector graphics clock appearing below is the same ClockWidget but rewritten in JavaScript using HTML 5 Canvas vector graphics primitives. In this implementation every time the width of the browser window changes, the size of the clock also changes. The bold parts of this text are clickable, redirecting to the source code of this page.

The same analog vector graphics clock appearing below is the same ClockWidget but rewritten in JavaScript using HTML 5 Canvas vector graphics primitives. In this implementation every time the width of the browser window changes, the size of the clock also changes. The bold parts of this text are clickable, redirecting to the source code of this page.

PixiJS Demo

This demo was adapted from a code developed by PixiJS and it illustrates its versatility. The advantage of this library is that it has hardware support. As far as GUIs are concerned this library, at least with version version 7.0.4 used here, is that it has no support for vector gradients.

By clicking or touching on the touch screen, the animations stops. By repeating it, the animations restarts.

Basic Vector Interface

This example coded using HTML 5 Canvas and JavaScript demonstrates simple interactivity in an interface that allows changing a Bezier curve. The picking algorithm just loops into the array containing the coordinates of the control points of the Bezier curve. Once the point clicked on is found it can be changed by moving the mouse. For more complex objects this scheme is inadequate. One can get constant time picking by organizing the objects in lists or grids (as in menus or in calculator keys), or exploiting some sort of spacial coherence scheme such as BSP tree or quadtree. Although this is more straighforward in Java, on the web this would be more adequate and efficient using WebAssembly.