Tensor diagrams 0.2.3 - advanced

Draw tensor diagrams - Penrose notation https://github.com/Quantum-Game/tensor-diagrams

by stared

HTML

<script src="https://unpkg.com/tensor-diagrams@0.2.3/dist/esbuild/tensor-diagrams.js"></script>
<div id="simpler" class="equation"></div>

CSS

.tensor {
    stroke-width: 3px;
    stroke: black;
  }
  
  .contraction {
    stroke-width: 3px;
    stroke: black;
    fill: none;
  }
  
  .tensor-label {
    font: italic 1.2em "Fira Sans", serif;
    fill: black;
    text-anchor: middle;
  }
  
  .contraction-label {
    font: italic 1.2em "Fira Sans", serif;
    fill: black;
    text-anchor: middle;
    dominant-baseline: central;
  }
  
  .equation {
    text-align: center;
    vertical-align: middle;
  }
  
  .eq-elem {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
  }
  
  .eq-diagram {
    display: inline-block;
    vertical-align: middle;
  }
  
  .circle-sketch-highlight {
    position: relative;
  }
  
  .circle-sketch-highlight:before {
    content: "";
    z-index: -1;
    left: -0.25em;
    top: -0.1em;
    border-width: 2px;
    border-style: solid;
    border-color: red;
    position: absolute;
    border-right-color: transparent;
    width: 100%;
    height: 100%;
    transform: rotate(2deg);
    opacity: 0.7;
    border-radius: 50%;
    padding: 0.1em 0.25em;
  }
  
  .circle-sketch-highlight:after {
    content: "";
    z-index: -1;
    left: -0.25em;
    top: 0.1em;
    padding: 0.1em 0.25em;
    border-width: 2px;
    border-style: solid;
    border-color: red;
    border-left-color: transparent;
    border-top-color: transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(-1deg);
    opacity: 0.7;
    border-radius: 50%;
  }

JavaScript

TensorDiagram.new()
  .addTensor("x", "start", [], ["i"])
  .addTensor("A", "right", ["i"], ["j"], [], ['n'], {
    showLabel: false,
    size: 40
  })
  .addTensor("B", "right", ["j"], ["k"], [], [], {
    shape: 'triangleLeft',
    color: 'white'
  })
  .addTensor("C", { x: 1, y: 1 }, [], [], ['n'], ['m'], {
    labelPos: 'left'
  })
  .addContraction(0, 1, "i")
  .addContraction(1, 2, "j")
  .addContraction(1, 3, "n")
  .draw("#simpler");