91 lines
4.2 KiB
XML
91 lines
4.2 KiB
XML
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 400 300">
|
|
<rect width="400" height="300" x="0" y="0" id="0" fill="none" fill-opacity="1"></rect>
|
|
<path d="M40.5 60L40.5 230" fill="none" stroke="#E0E6F1"></path>
|
|
<path d="M104.5 60L104.5 230" fill="none" stroke="#E0E6F1"></path>
|
|
<path d="M168.5 60L168.5 230" fill="none" stroke="#E0E6F1"></path>
|
|
<path d="M232.5 60L232.5 230" fill="none" stroke="#E0E6F1"></path>
|
|
<path d="M296.5 60L296.5 230" fill="none" stroke="#E0E6F1"></path>
|
|
<path d="M360.5 60L360.5 230" fill="none" stroke="#E0E6F1"></path>
|
|
<path d="M40.5 230L40.5 60" fill="none" stroke="#6E7079" stroke-linecap="round"></path>
|
|
<path d="M40 230.5L35 230.5" fill="none" stroke="#6E7079"></path>
|
|
<path d="M40 196.5L35 196.5" fill="none" stroke="#6E7079"></path>
|
|
<path d="M40 162.5L35 162.5" fill="none" stroke="#6E7079"></path>
|
|
<path d="M40 128.5L35 128.5" fill="none" stroke="#6E7079"></path>
|
|
<path d="M40 94.5L35 94.5" fill="none" stroke="#6E7079"></path>
|
|
<path d="M40 60.5L35 60.5" fill="none" stroke="#6E7079"></path>
|
|
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(32 213)" fill="#6E7079">Tom</text>
|
|
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(32 179)" fill="#6E7079">Dick</text>
|
|
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(32 145)" fill="#6E7079">Harry</text>
|
|
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(32 111)" fill="#6E7079">Slim</text>
|
|
<text dominant-baseline="central" text-anchor="end" style="font-size:12px;font-family:sans-serif;" transform="translate(32 77)" fill="#6E7079">Jim</text>
|
|
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(40 238)" fill="#6E7079">0</text>
|
|
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(104 238)" fill="#6E7079">1</text>
|
|
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(168 238)" fill="#6E7079">2</text>
|
|
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(232 238)" fill="#6E7079">3</text>
|
|
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(296 238)" fill="#6E7079">4</text>
|
|
<text dominant-baseline="central" text-anchor="middle" style="font-size:12px;font-family:sans-serif;" y="6" transform="translate(360 238)" fill="#6E7079">5</text>
|
|
<path d="M40 201.3l64 0l0 23.5l-64 0Z" fill="#5470c6" class="zr0-cls-0"></path>
|
|
<path d="M40 167.3l128 0l0 23.5l-128 0Z" fill="#5470c6" class="zr0-cls-1"></path>
|
|
<path d="M40 133.3l192 0l0 23.5l-192 0Z" fill="#5470c6" class="zr0-cls-2"></path>
|
|
<path d="M40 99.3l256 0l0 23.5l-256 0Z" fill="#5470c6" class="zr0-cls-3"></path>
|
|
<path d="M40 65.3l320 0l0 23.5l-320 0Z" fill="#5470c6" class="zr0-cls-4"></path>
|
|
<style ><![CDATA[
|
|
.zr0-cls-0 {
|
|
animation:zr0-ani-0 1s cubic-bezier(0.65,0,0.35,1) both;
|
|
}
|
|
.zr0-cls-1 {
|
|
animation:zr0-ani-1 1s cubic-bezier(0.65,0,0.35,1) both;
|
|
}
|
|
.zr0-cls-2 {
|
|
animation:zr0-ani-2 1s cubic-bezier(0.65,0,0.35,1) both;
|
|
}
|
|
.zr0-cls-3 {
|
|
animation:zr0-ani-3 1s cubic-bezier(0.65,0,0.35,1) both;
|
|
}
|
|
.zr0-cls-4 {
|
|
animation:zr0-ani-4 1s cubic-bezier(0.65,0,0.35,1) both;
|
|
}
|
|
@keyframes zr0-ani-0 {
|
|
0% {
|
|
d:path("M40 201.3l0 0l0 23.5l0 0Z");
|
|
}
|
|
100% {
|
|
d:path("M40 201.3l64 0l0 23.5l-64 0Z");
|
|
}
|
|
}
|
|
@keyframes zr0-ani-1 {
|
|
0% {
|
|
d:path("M40 167.3l0 0l0 23.5l0 0Z");
|
|
}
|
|
100% {
|
|
d:path("M40 167.3l128 0l0 23.5l-128 0Z");
|
|
}
|
|
}
|
|
@keyframes zr0-ani-2 {
|
|
0% {
|
|
d:path("M40 133.3l0 0l0 23.5l0 0Z");
|
|
}
|
|
100% {
|
|
d:path("M40 133.3l192 0l0 23.5l-192 0Z");
|
|
}
|
|
}
|
|
@keyframes zr0-ani-3 {
|
|
0% {
|
|
d:path("M40 99.3l0 0l0 23.5l0 0Z");
|
|
}
|
|
100% {
|
|
d:path("M40 99.3l256 0l0 23.5l-256 0Z");
|
|
}
|
|
}
|
|
@keyframes zr0-ani-4 {
|
|
0% {
|
|
d:path("M40 65.3l0 0l0 23.5l0 0Z");
|
|
}
|
|
100% {
|
|
d:path("M40 65.3l320 0l0 23.5l-320 0Z");
|
|
}
|
|
}
|
|
]]>
|
|
|
|
</style>
|
|
</svg> |