Circle Notation

Visualising a state vector.

Attribute
State
data-size="xs" height: 17px; width: 17px;
data-size="sm" height: 25px; width: 25px;
data-size="base" height: 32px; width: 32px;
data-size="lg" height: 48px; width: 48px;
data-size="xl" height: 64px; width: 64px;
data-magnitudes="mag1,mag2,..." α1 = mag1, α2 = mag2, ...

Sizes

Control the size of a measure gate using the data-size attribute.

<circle-notation data-size="xs"></circle-notation>
<circle-notation data-size="sm"></circle-notation>
<circle-notation data-size="base"></circle-notation>
<circle-notation data-size="lg"></circle-notation>
<circle-notation data-size="xl"></circle-notation>

Magnitudes

Specify the magnitude of each ket in data-magnitudes, separated by commas.

<circle-notation data-magnitudes="0.707,0.707"></circle-notation>

Phases

Specify the phase of each ket in data-phases, separated by commas.

<circle-notation
  data-magnitudes="0.707,0.707"
  data-phases="45,-45">
</circle-notation>