src/examples/string_from_move_print/vis_code.svg

<svg height="310px" 
        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <desc>examples/string_from_move_print/input/</desc>

    <defs>
        <style type="text/css">
        <![CDATA[
        /* general setup */
:root {
    --bg-color:#f1f1f1;
    --text-color: #6e6b5e;
}

svg {
    background-color: var(--bg-color);
}

text {
    vertical-align: baseline;
    text-anchor: start;
}

#heading {
    font-size: 24px;
    font-weight: bold;
}

#caption {
    font-size: 0.875em;
    font-family: "Open Sans", sans-serif;
    font-style: italic;
}

/* code related styling */
text.code {
    fill: #6e6b5e;
    white-space: pre;
    font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace !important;
    font-size: 0.875em;
}

text.label {
    font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace !important;
    font-size: 0.875em;
}

/* timeline/event interaction styling */
.solid {
    stroke-width: 5px;
}

.hollow {
    stroke-width: 1.5;
}

.dotted {
    stroke-width: 5px;
    stroke-dasharray: "2 1";
}

.extend {
    stroke-width: 1px;
    stroke-dasharray: "2 1";
}

.functionIcon {
    paint-order: stroke;
    stroke-width: 3px;
    fill: var(--bg-color);
    font-size: 20px;
    font-family: times;
    font-weight: lighter;
    dominant-baseline: central;
    text-anchor: start;
    font-style: italic;
}

.functionLogo {
    font-size: 20px;
    font-style: italic;
    paint-order: stroke;
    stroke-width: 3px;
    fill: var(--bg-color) !important;
}

/* flex related styling */
.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

object.tl_panel {
    flex-grow: 1;
}

object.code_panel {
    flex-grow: 0;
}

.tooltip-trigger {
    cursor: default;
}

.tooltip-trigger:hover{
    filter: url(#glow);
}

/* hash based styling */
[data-hash="0"] {
    fill: #6e6b5e;
}

[data-hash="1"] {
    fill: #1893ff;
    stroke: #1893ff;
}

[data-hash="2"] {
    fill: #ff7f50;
    stroke: #ff7f50;
}

[data-hash="3"] {
    fill: #8635ff;
    stroke: #8635ff;
}

[data-hash="4"] {
    fill: #dc143c;
    stroke: #dc143c;
}

[data-hash="5"] {
    fill: #0a810a;
    stroke: #0a810a;
}

[data-hash="6"] {
    fill: #008080;
    stroke: #008080;
}

[data-hash="7"] {
    fill: #ff6cce;
    stroke: #ff6cce;
}

[data-hash="8"] {
    fill: #00d6fc;
    stroke: #00d6fc;
}

[data-hash="9"] {
    fill: #b99f35;
    stroke: #b99f35;
}
        ]]>
        </style>
    </defs>

    <g>
        <text id="caption" x="30" y="30">Hover over timeline events (dots), states (vertical lines),</text>
        <text id="caption" x="30" y="50">and actions (arrows) for extra information.</text>
    </g>

    <g id="code">
        <text class="code" x="20" y="90"> <tspan fill="#AAA">1  </tspan>fn main() { </text>
        <text class="code" x="20" y="120"> <tspan fill="#AAA">2  </tspan>    let <tspan data-hash="1">x</tspan> = <tspan class="fn" data-hash="0" hash="3">String::from</tspan>("hello"); </text>
        <text class="code" x="20" y="150"> <tspan fill="#AAA">3  </tspan>    let <tspan data-hash="2">y</tspan> = <tspan data-hash="1">x</tspan>; </text>
        <text class="code" x="20" y="180"> <tspan fill="#AAA">4  </tspan>    <tspan class="fn" data-hash="0" hash="4">println!</tspan>("{}", <tspan data-hash="2">y</tspan>); </text>
        <text class="code" x="20" y="210"> <tspan fill="#AAA">5  </tspan>} </text>
    </g>

   
</svg>