← All examples

Circuit

a quantum circuit (Bell state: H then CNOT). Wires and the control line are arrowless connectors (arrow="none"); gates sit on the wires.

Diagrams 264 × 200 <circle><column><connect><define><pos><rect><row><slot><stack><style><text>

Result

Source examples/circuit.svgn

<diagram padding="34" theme="light">
  <!-- a quantum circuit (Bell state: H then CNOT). Wires and the control line
       are arrowless connectors (arrow="none"); gates sit on the wires. -->
  <style>
    .cell { fill: none; stroke: none; }
    .gate { fill: #ffffff; stroke: #1e293b; stroke-width: 1.5; }
    .ctrl { fill: #1e293b; stroke: none; }
    .tgt  { fill: #ffffff; stroke: #1e293b; stroke-width: 1.5; }
    .wire { stroke: #1e293b; stroke-width: 1.5; }
  </style>

  <!-- a fixed-size time-step cell that centres whatever it holds (grid align) -->
  <define name="pos">
    <stack><rect class="cell" width="54" height="54"/><slot/></stack>
  </define>

  <column gap="24" align="start">
    <row gap="0" align="center">
      <text id="l0" width="34" text-align="right" label="|0⟩"/>
      <pos><rect class="gate" width="40" height="40" rx="4" label="H"/></pos>
      <pos><rect class="cell" width="4" height="4"/></pos>
      <pos><circle id="dot0" class="ctrl" width="13" height="13"/></pos>
    </row>
    <row gap="0" align="center">
      <text id="l1" width="34" text-align="right" label="|0⟩"/>
      <pos><rect class="cell" width="4" height="4"/></pos>
      <pos><rect class="cell" width="4" height="4"/></pos>
      <pos><circle id="dot1" class="tgt" width="30" height="30" label="+"/></pos>
    </row>
  </column>

  <!-- wires (behind the gates) and the CNOT control line -->
  <connect from="l0" to="dot0" from-anchor="e" to-anchor="e" arrow="none" class="wire"/>
  <connect from="l1" to="dot1" from-anchor="e" to-anchor="e" arrow="none" class="wire"/>
  <connect from="dot0" to="dot1" arrow="none" class="wire"/>
</diagram>

Open the SVG →