This is a test to see if animated D2 SVG files work in GitHub's Markdown renderer.
Your browser doesn't support embedded SVG. View the diagram directly.
Expected: The animation should cycle through 3 steps showing alice and bob exchanging messages.
Testing: Which methods work on GitHub?
| shape: sequence_diagram | |
| alice | |
| bob | |
| steps: { | |
| 1: { | |
| alice -> bob: Hello | |
| } | |
| 2: { | |
| alice -> bob: Hello | |
| bob -> alice: Hi back | |
| } | |
| 3: { | |
| alice -> bob: Hello | |
| bob -> alice: Hi back | |
| alice -> bob: How are you? | |
| } | |
| } |
| <?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.7.1" preserveAspectRatio="xMinYMin meet" viewBox="0 0 452 868"><svg class="d2-svg" width="452" height="868" viewBox="-89 -49 452 868"><style type="text/css"><![CDATA[ | |
| .d2-3598207332 .text { | |
| font-family: "d2-3598207332-font-regular"; | |
| } | |
| @font-face { | |
| font-family: d2-3598207332-font-regular; | |
| src: url("data:application/font-woff;base64,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"); | |
| } | |
| .d2-3598207332 .text-italic { | |
| font-family: "d2-3598207332-font-italic"; | |
| } | |
| @font-face { | |
| font-family: d2-3598207332-font-italic; | |
| src: url("data:application/font-woff;base64,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"); | |
| }]]></style><style type="text/css"><![CDATA[.shape { | |
| shape-rendering: geometricPrecision; | |
| stroke-linejoin: round; | |
| } | |
| .connection { | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .blend { | |
| mix-blend-mode: multiply; | |
| opacity: 0.5; | |
| } | |
| .d2-3598207332 .fill-N1{fill:#0A0F25;} | |
| .d2-3598207332 .fill-N2{fill:#676C7E;} | |
| .d2-3598207332 .fill-N3{fill:#9499AB;} | |
| .d2-3598207332 .fill-N4{fill:#CFD2DD;} | |
| .d2-3598207332 .fill-N5{fill:#DEE1EB;} | |
| .d2-3598207332 .fill-N6{fill:#EEF1F8;} | |
| .d2-3598207332 .fill-N7{fill:#FFFFFF;} | |
| .d2-3598207332 .fill-B1{fill:#0D32B2;} | |
| .d2-3598207332 .fill-B2{fill:#0D32B2;} | |
| .d2-3598207332 .fill-B3{fill:#E3E9FD;} | |
| .d2-3598207332 .fill-B4{fill:#E3E9FD;} | |
| .d2-3598207332 .fill-B5{fill:#EDF0FD;} | |
| .d2-3598207332 .fill-B6{fill:#F7F8FE;} | |
| .d2-3598207332 .fill-AA2{fill:#4A6FF3;} | |
| .d2-3598207332 .fill-AA4{fill:#EDF0FD;} | |
| .d2-3598207332 .fill-AA5{fill:#F7F8FE;} | |
| .d2-3598207332 .fill-AB4{fill:#EDF0FD;} | |
| .d2-3598207332 .fill-AB5{fill:#F7F8FE;} | |
| .d2-3598207332 .stroke-N1{stroke:#0A0F25;} | |
| .d2-3598207332 .stroke-N2{stroke:#676C7E;} | |
| .d2-3598207332 .stroke-N3{stroke:#9499AB;} | |
| .d2-3598207332 .stroke-N4{stroke:#CFD2DD;} | |
| .d2-3598207332 .stroke-N5{stroke:#DEE1EB;} | |
| .d2-3598207332 .stroke-N6{stroke:#EEF1F8;} | |
| .d2-3598207332 .stroke-N7{stroke:#FFFFFF;} | |
| .d2-3598207332 .stroke-B1{stroke:#0D32B2;} | |
| .d2-3598207332 .stroke-B2{stroke:#0D32B2;} | |
| .d2-3598207332 .stroke-B3{stroke:#E3E9FD;} | |
| .d2-3598207332 .stroke-B4{stroke:#E3E9FD;} | |
| .d2-3598207332 .stroke-B5{stroke:#EDF0FD;} | |
| .d2-3598207332 .stroke-B6{stroke:#F7F8FE;} | |
| .d2-3598207332 .stroke-AA2{stroke:#4A6FF3;} | |
| .d2-3598207332 .stroke-AA4{stroke:#EDF0FD;} | |
| .d2-3598207332 .stroke-AA5{stroke:#F7F8FE;} | |
| .d2-3598207332 .stroke-AB4{stroke:#EDF0FD;} | |
| .d2-3598207332 .stroke-AB5{stroke:#F7F8FE;} | |
| .d2-3598207332 .background-color-N1{background-color:#0A0F25;} | |
| .d2-3598207332 .background-color-N2{background-color:#676C7E;} | |
| .d2-3598207332 .background-color-N3{background-color:#9499AB;} | |
| .d2-3598207332 .background-color-N4{background-color:#CFD2DD;} | |
| .d2-3598207332 .background-color-N5{background-color:#DEE1EB;} | |
| .d2-3598207332 .background-color-N6{background-color:#EEF1F8;} | |
| .d2-3598207332 .background-color-N7{background-color:#FFFFFF;} | |
| .d2-3598207332 .background-color-B1{background-color:#0D32B2;} | |
| .d2-3598207332 .background-color-B2{background-color:#0D32B2;} | |
| .d2-3598207332 .background-color-B3{background-color:#E3E9FD;} | |
| .d2-3598207332 .background-color-B4{background-color:#E3E9FD;} | |
| .d2-3598207332 .background-color-B5{background-color:#EDF0FD;} | |
| .d2-3598207332 .background-color-B6{background-color:#F7F8FE;} | |
| .d2-3598207332 .background-color-AA2{background-color:#4A6FF3;} | |
| .d2-3598207332 .background-color-AA4{background-color:#EDF0FD;} | |
| .d2-3598207332 .background-color-AA5{background-color:#F7F8FE;} | |
| .d2-3598207332 .background-color-AB4{background-color:#EDF0FD;} | |
| .d2-3598207332 .background-color-AB5{background-color:#F7F8FE;} | |
| .d2-3598207332 .color-N1{color:#0A0F25;} | |
| .d2-3598207332 .color-N2{color:#676C7E;} | |
| .d2-3598207332 .color-N3{color:#9499AB;} | |
| .d2-3598207332 .color-N4{color:#CFD2DD;} | |
| .d2-3598207332 .color-N5{color:#DEE1EB;} | |
| .d2-3598207332 .color-N6{color:#EEF1F8;} | |
| .d2-3598207332 .color-N7{color:#FFFFFF;} | |
| .d2-3598207332 .color-B1{color:#0D32B2;} | |
| .d2-3598207332 .color-B2{color:#0D32B2;} | |
| .d2-3598207332 .color-B3{color:#E3E9FD;} | |
| .d2-3598207332 .color-B4{color:#E3E9FD;} | |
| .d2-3598207332 .color-B5{color:#EDF0FD;} | |
| .d2-3598207332 .color-B6{color:#F7F8FE;} | |
| .d2-3598207332 .color-AA2{color:#4A6FF3;} | |
| .d2-3598207332 .color-AA4{color:#EDF0FD;} | |
| .d2-3598207332 .color-AA5{color:#F7F8FE;} | |
| .d2-3598207332 .color-AB4{color:#EDF0FD;} | |
| .d2-3598207332 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-3598207332);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-3598207332);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-3598207332);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-3598207332);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-3598207332);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-3598207332);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-3598207332);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-3598207332);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-3598207332);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-3598207332);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-3598207332);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-3598207332);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-3598207332);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-3598207332);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-3598207332);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-3598207332);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-3598207332);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-3598207332);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><style type="text/css"><![CDATA[@keyframes d2Transition-d2-3598207332-0 { | |
| 0%, 0.000000% { | |
| opacity: 0; | |
| } | |
| 0.000000%, 24.987500% { | |
| opacity: 1; | |
| } | |
| 25.000000%, 100% { | |
| opacity: 0; | |
| } | |
| }@keyframes d2Transition-d2-3598207332-1 { | |
| 0%, 24.987500% { | |
| opacity: 0; | |
| } | |
| 25.000000%, 49.987500% { | |
| opacity: 1; | |
| } | |
| 50.000000%, 100% { | |
| opacity: 0; | |
| } | |
| }@keyframes d2Transition-d2-3598207332-2 { | |
| 0%, 49.987500% { | |
| opacity: 0; | |
| } | |
| 50.000000%, 74.987500% { | |
| opacity: 1; | |
| } | |
| 75.000000%, 100% { | |
| opacity: 0; | |
| } | |
| }@keyframes d2Transition-d2-3598207332-3 { | |
| 0%, 74.987500% { | |
| opacity: 0; | |
| } | |
| 75.000000%, 100.000000% { | |
| opacity: 1; | |
| } | |
| }]]></style><g style="animation: d2Transition-d2-3598207332-0 8000ms infinite" class="d2-3598207332 " width="452" height="338" viewBox="-89 -49 452 338"><rect x="-89.000000" y="-49.000000" width="452.000000" height="338.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><g class="YWxpY2U="><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" stroke="#0D32B2" fill="#FFFFFF" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">alice</text></g><g class="Ym9i"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" stroke="#0D32B2" fill="#FFFFFF" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">bob</text></g><g class="KGFsaWNlIC0tIClbMF0="><path d="M 62.000000 120.000000 L 62.000000 187.000000" stroke="#0D32B2" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-3598207332)" /></g><g class="KGJvYiAtLSApWzBd"><path d="M 212.000000 120.000000 L 212.000000 187.000000" stroke="#0D32B2" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-3598207332)" /></g><mask id="d2-3598207332" maskUnits="userSpaceOnUse" x="-89" y="-49" width="452" height="338"> | |
| <rect x="-89" y="-49" width="452" height="338" fill="white"></rect> | |
| </mask></g><g style="animation: d2Transition-d2-3598207332-1 8000ms infinite" class="d2-3598207332 " width="452" height="418" viewBox="-89 -49 452 418"><rect x="-89.000000" y="-49.000000" width="452.000000" height="418.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><g class="YWxpY2U="><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">alice</text></g><g class="Ym9i"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">bob</text></g><g class="KGFsaWNlIC0tIClbMF0="><path d="M 62.000000 120.000000 L 62.000000 267.000000" stroke="#0D32B2" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-2315026614)" /></g><g class="KGJvYiAtLSApWzBd"><path d="M 212.000000 120.000000 L 212.000000 267.000000" stroke="#0D32B2" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-2315026614)" /></g><g class="KGFsaWNlIC0mZ3Q7IGJvYilbMF0="><marker id="mk-d2-2315026614-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 198.000000 L 208.000000 198.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-2315026614-3488378134)" mask="url(#d2-2315026614)" /><text x="137.000000" y="204.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Hello</text></g><mask id="d2-2315026614" maskUnits="userSpaceOnUse" x="-89" y="-49" width="452" height="418"> | |
| <rect x="-89" y="-49" width="452" height="418" fill="white"></rect> | |
| <rect x="118.000000" y="188.000000" width="38" height="21" fill="black"></rect> | |
| </mask></g><g style="animation: d2Transition-d2-3598207332-2 8000ms infinite" class="d2-3598207332 " width="452" height="598" viewBox="-89 -49 452 598"><rect x="-89.000000" y="-49.000000" width="452.000000" height="598.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><g class="YWxpY2U="><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">alice</text></g><g class="Ym9i"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">bob</text></g><g class="KGFsaWNlIC0tIClbMF0="><path d="M 62.000000 120.000000 L 62.000000 447.000000" stroke="#0D32B2" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-3071994638)" /></g><g class="KGJvYiAtLSApWzBd"><path d="M 212.000000 120.000000 L 212.000000 447.000000" stroke="#0D32B2" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-3071994638)" /></g><g class="KGFsaWNlIC0mZ3Q7IGJvYilbMF0="><marker id="mk-d2-3071994638-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 198.000000 L 208.000000 198.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3071994638-3488378134)" mask="url(#d2-3071994638)" /><text x="137.000000" y="204.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Hello</text></g><g class="KGFsaWNlIC0mZ3Q7IGJvYilbMV0="><path d="M 64.000000 288.000000 L 208.000000 288.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3071994638-3488378134)" mask="url(#d2-3071994638)" /><text x="137.000000" y="294.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Hello</text></g><g class="KGJvYiAtJmd0OyBhbGljZSlbMF0="><path d="M 210.000000 378.000000 L 66.000000 378.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3071994638-3488378134)" mask="url(#d2-3071994638)" /><text x="137.000000" y="384.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Hi back</text></g><mask id="d2-3071994638" maskUnits="userSpaceOnUse" x="-89" y="-49" width="452" height="598"> | |
| <rect x="-89" y="-49" width="452" height="598" fill="white"></rect> | |
| <rect x="118.000000" y="188.000000" width="38" height="21" fill="black"></rect> | |
| <rect x="118.000000" y="278.000000" width="38" height="21" fill="black"></rect> | |
| <rect x="110.000000" y="368.000000" width="54" height="21" fill="black"></rect> | |
| </mask></g><g style="animation: d2Transition-d2-3598207332-3 8000ms infinite" class="d2-3598207332 " width="452" height="868" viewBox="-89 -49 452 868"><rect x="-89.000000" y="-49.000000" width="452.000000" height="868.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><g class="YWxpY2U="><g class="shape" ><rect x="12.000000" y="52.000000" width="100.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="62.000000" y="90.500000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">alice</text></g><g class="Ym9i"><g class="shape" ><rect x="162.000000" y="52.000000" width="100.000000" height="66.000000" stroke="#0D32B2" fill="#EDF0FD" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="212.000000" y="90.500000" fill="#0A0F25" class="text fill-N1" style="text-anchor:middle;font-size:16px">bob</text></g><g class="KGFsaWNlIC0tIClbMF0="><path d="M 62.000000 120.000000 L 62.000000 717.000000" stroke="#0D32B2" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-3610910085)" /></g><g class="KGJvYiAtLSApWzBd"><path d="M 212.000000 120.000000 L 212.000000 717.000000" stroke="#0D32B2" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-3610910085)" /></g><g class="KGFsaWNlIC0mZ3Q7IGJvYilbMF0="><marker id="mk-d2-3610910085-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0D32B2" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 64.000000 198.000000 L 208.000000 198.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3610910085-3488378134)" mask="url(#d2-3610910085)" /><text x="137.000000" y="204.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Hello</text></g><g class="KGFsaWNlIC0mZ3Q7IGJvYilbMV0="><path d="M 64.000000 288.000000 L 208.000000 288.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3610910085-3488378134)" mask="url(#d2-3610910085)" /><text x="137.000000" y="294.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Hello</text></g><g class="KGJvYiAtJmd0OyBhbGljZSlbMF0="><path d="M 210.000000 378.000000 L 66.000000 378.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3610910085-3488378134)" mask="url(#d2-3610910085)" /><text x="137.000000" y="384.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Hi back</text></g><g class="KGFsaWNlIC0mZ3Q7IGJvYilbMl0="><path d="M 64.000000 468.000000 L 208.000000 468.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3610910085-3488378134)" mask="url(#d2-3610910085)" /><text x="137.000000" y="474.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Hello</text></g><g class="KGJvYiAtJmd0OyBhbGljZSlbMV0="><path d="M 210.000000 558.000000 L 66.000000 558.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3610910085-3488378134)" mask="url(#d2-3610910085)" /><text x="137.000000" y="564.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">Hi back</text></g><g class="KGFsaWNlIC0mZ3Q7IGJvYilbM10="><path d="M 64.000000 648.000000 L 208.000000 648.000000" stroke="#0D32B2" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-d2-3610910085-3488378134)" mask="url(#d2-3610910085)" /><text x="137.500000" y="654.000000" fill="#676C7E" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">How are you?</text></g><mask id="d2-3610910085" maskUnits="userSpaceOnUse" x="-89" y="-49" width="452" height="868"> | |
| <rect x="-89" y="-49" width="452" height="868" fill="white"></rect> | |
| <rect x="118.000000" y="188.000000" width="38" height="21" fill="black"></rect> | |
| <rect x="118.000000" y="278.000000" width="38" height="21" fill="black"></rect> | |
| <rect x="110.000000" y="368.000000" width="54" height="21" fill="black"></rect> | |
| <rect x="118.000000" y="458.000000" width="38" height="21" fill="black"></rect> | |
| <rect x="110.000000" y="548.000000" width="54" height="21" fill="black"></rect> | |
| <rect x="91.000000" y="638.000000" width="93" height="21" fill="black"></rect> | |
| </mask></g></svg></svg> |
