ahri-cloud-projects/X6
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 📚️ embed flow.svg

Browse Source
This commit is contained in:
bubkoo
2020-12-18 15:10:18 +08:00
parent 9d81b43af6
commit 820db58f1d
2 changed files with 47 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,4 +1,4 @@
<h1 align="center">X6</h1>
<p align="center"><img src="/flow.svg"></p>
<p align="center"><strong>JavaScript diagramming library that uses SVG and HTML for rendering.</strong></p>

46
flow.svg Normal file
View File

@ -0,0 +1,46 @@
<svg width="274" height="195" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill="none" fill-rule="evenodd">
<path id="path1" stroke="#000" stroke-width="3" stroke-linecap="square" d="M 137.5 50.5 L 137.5 131.5 L 60.5 131.5 L 60.5 213.5">
<set attributeName="stroke-dasharray" to="3 6" begin="0;a1.end+5s" dur="3s" />
<animate
id="a1"
attributeType="XML"
attributeName="stroke-dashoffset"
from="0"
to="-200"
dur="3s"
begin="0;a1.end+5s"/>
</path>
<path id="path2" stroke="#000" stroke-width="3" stroke-linecap="square" d="M 137.5 50.5 L 137.5 131.5 L 214.5 131.5 L 214.5 213.5">
<set attributeName="stroke-dasharray" to="3 6" begin="0;a1.end+5s" dur="3s" />
<animate
attributeType="XML"
attributeName="stroke-dashoffset"
from="0"
to="-200"
dur="3s"
begin="0;a1.end+5s"/>
</path>
<circle id="token1" fill="#9F62F6" r="5.5" opacity="0">
<set attributeName="opacity" to="1" begin="a1.end+1s" dur="3s" />
<animateMotion dur="3s" begin="a1.end+1s" rotate="auto">
<mpath xlink:href="#path1"/>
</animateMotion>
</circle>
<circle id="token2" fill="#9F62F6" r="5.5" opacity="0">
<set attributeName="opacity" to="1" begin="a1.end+1s" dur="3s" />
<animateMotion dur="3s" begin="a1.end+1s" rotate="auto">
<mpath xlink:href="#path2"/>
</animateMotion>
</circle>
<g transform="translate(77)">
<rect stroke="#000" stroke-width="3" fill="#9F62F6" x="1.5" y="1.5" width="118" height="46" rx="8"/>
<text font-family="Avenir-Heavy, Avenir" font-size="24" font-weight="600" fill="#FFF">
<tspan x="45" y="32">X6</tspan>
</text>
</g>
<rect stroke="#000" stroke-width="3" fill="#FF8B38" x="78.5" y="66.5" width="118" height="46" rx="8"/>
<rect stroke="#000" stroke-width="3" fill="#FFB451" x="1.5" y="147.5" width="118" height="46" rx="8"/>
<rect stroke="#000" stroke-width="3" fill="#FFB451" x="154.5" y="147.5" width="118" height="46" rx="8"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB