gkorotkiy/bastion-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add graph number accent options

Browse Source
This commit is contained in:
KrivovDE
2026-07-22 15:49:52 +03:00
parent 8a50c07cf5
commit 28f0852847
1 changed files with 62 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
bastion_graph_number_accent_options.svg Normal file
View File

@@ -0,0 +1,62 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1880" height="1040" viewBox="0 0 1880 1040">
<rect width="1880" height="1040" rx="28" fill="#184E79"/>
<text x="48" y="70" fill="#FFFFFF" font-family="Inter, Arial, sans-serif" font-size="30" font-weight="700">Варианты акцента чисел в графиках</text>
<text x="48" y="106" fill="#A9CDE8" font-family="Inter, Arial, sans-serif" font-size="18">Одинаковая метрика — четыре способа выделения</text>
<!-- Option 1 -->
<g transform="translate(48 150)">
<rect width="872" height="390" rx="18" fill="#205B89" stroke="#4D89B7" stroke-width="2"/>
<text x="28" y="42" fill="#BBD8EC" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="600">01 · ЦВЕТ + НАЧЕРТАНИЕ</text>
<text x="28" y="83" fill="#FFFFFF" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="600">Выручка</text>
<text x="844" y="83" text-anchor="end" fill="#6ED0FF" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="800">11,8 млрд. руб.</text>
<g opacity=".35" stroke="#9BC7E3" stroke-width="1" stroke-dasharray="7 8">
<path d="M28 140H844"/><path d="M28 205H844"/><path d="M28 270H844"/><path d="M28 335H844"/>
</g>
<path d="M28 315 C120 315 130 280 215 278 S330 290 400 235 S520 260 610 190 S740 170 844 122" fill="none" stroke="#6ED0FF" stroke-width="6" stroke-linecap="round"/>
<g fill="#6ED0FF" stroke="#DDF5FF" stroke-width="3"><circle cx="215" cy="278" r="8"/><circle cx="400" cy="235" r="8"/><circle cx="610" cy="190" r="8"/><circle cx="844" cy="122" r="8"/></g>
</g>
<!-- Option 2 -->
<g transform="translate(960 150)">
<rect width="872" height="390" rx="18" fill="#205B89" stroke="#4D89B7" stroke-width="2"/>
<text x="28" y="42" fill="#BBD8EC" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="600">02 · МЯГКОЕ СВЕЧЕНИЕ</text>
<text x="28" y="83" fill="#FFFFFF" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="600">Выручка</text>
<text x="844" y="83" text-anchor="end" fill="none" stroke="#68CCFF" stroke-width="22" stroke-linejoin="round" opacity=".10" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="800">11,8 млрд. руб.</text>
<text x="844" y="83" text-anchor="end" fill="none" stroke="#8DDBFF" stroke-width="12" stroke-linejoin="round" opacity=".20" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="800">11,8 млрд. руб.</text>
<text x="844" y="83" text-anchor="end" fill="#FFFFFF" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="800">11,8 млрд. руб.</text>
<g opacity=".35" stroke="#9BC7E3" stroke-width="1" stroke-dasharray="7 8">
<path d="M28 140H844"/><path d="M28 205H844"/><path d="M28 270H844"/><path d="M28 335H844"/>
</g>
<path d="M28 315 C120 315 130 280 215 278 S330 290 400 235 S520 260 610 190 S740 170 844 122" fill="none" stroke="#72D2FF" stroke-width="6" stroke-linecap="round"/>
<g fill="#72D2FF" stroke="#DDF5FF" stroke-width="3"><circle cx="215" cy="278" r="8"/><circle cx="400" cy="235" r="8"/><circle cx="610" cy="190" r="8"/><circle cx="844" cy="122" r="8"/></g>
</g>
<!-- Option 3 -->
<g transform="translate(48 580)">
<rect width="872" height="390" rx="18" fill="#205B89" stroke="#4D89B7" stroke-width="2"/>
<text x="28" y="42" fill="#BBD8EC" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="600">03 · ПОЛУПРОЗРАЧНАЯ ПЛАШКА</text>
<text x="28" y="83" fill="#FFFFFF" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="600">Выручка</text>
<rect x="625" y="50" width="219" height="52" rx="16" fill="#0E4068" stroke="#72D2FF" stroke-width="2"/>
<text x="734.5" y="84" text-anchor="middle" fill="#FFFFFF" font-family="Inter, Arial, sans-serif" font-size="24" font-weight="800">11,8 млрд. руб.</text>
<g opacity=".35" stroke="#9BC7E3" stroke-width="1" stroke-dasharray="7 8">
<path d="M28 140H844"/><path d="M28 205H844"/><path d="M28 270H844"/><path d="M28 335H844"/>
</g>
<path d="M28 315 C120 315 130 280 215 278 S330 290 400 235 S520 260 610 190 S740 170 844 122" fill="none" stroke="#75C8F5" stroke-width="6" stroke-linecap="round"/>
<g fill="#75C8F5" stroke="#DDF5FF" stroke-width="3"><circle cx="215" cy="278" r="8"/><circle cx="400" cy="235" r="8"/><circle cx="610" cy="190" r="8"/><circle cx="844" cy="122" r="8"/></g>
</g>
<!-- Option 4 -->
<g transform="translate(960 580)">
<rect width="872" height="390" rx="18" fill="#205B89" stroke="#4D89B7" stroke-width="2"/>
<text x="28" y="42" fill="#BBD8EC" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="600">04 · АКЦЕНТНАЯ ЛИНИЯ</text>
<text x="28" y="83" fill="#FFFFFF" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="600">Выручка</text>
<rect x="619" y="55" width="5" height="34" rx="2.5" fill="#72D2FF"/>
<text x="844" y="82" text-anchor="end" fill="#FFFFFF" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="800">11,8 млрд. руб.</text>
<path d="M627 96H844" stroke="#72D2FF" stroke-width="2" opacity=".55"/>
<g opacity=".35" stroke="#9BC7E3" stroke-width="1" stroke-dasharray="7 8">
<path d="M28 140H844"/><path d="M28 205H844"/><path d="M28 270H844"/><path d="M28 335H844"/>
</g>
<path d="M28 315 C120 315 130 280 215 278 S330 290 400 235 S520 260 610 190 S740 170 844 122" fill="none" stroke="#7B86FF" stroke-width="6" stroke-linecap="round"/>
<g fill="#7B86FF" stroke="#E6E8FF" stroke-width="3"><circle cx="215" cy="278" r="8"/><circle cx="400" cy="235" r="8"/><circle cx="610" cy="190" r="8"/><circle cx="844" cy="122" r="8"/></g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB