@urmzd/github-insights 2.2.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/.githooks/.sr-hooks-hash +1 -0
  2. package/.githooks/commit-msg +0 -1
  3. package/.githooks/pre-commit +0 -1
  4. package/CHANGELOG.md +17 -0
  5. package/assets/insights/metrics-growth.svg +55 -0
  6. package/assets/insights/metrics-heatmap.svg +55 -0
  7. package/examples/classic/metrics-growth.svg +55 -0
  8. package/examples/classic/metrics-heatmap.svg +55 -0
  9. package/examples/ecosystem/metrics-growth.svg +55 -0
  10. package/examples/ecosystem/metrics-heatmap.svg +55 -0
  11. package/examples/minimal/metrics-growth.svg +55 -0
  12. package/examples/minimal/metrics-heatmap.svg +55 -0
  13. package/examples/modern/metrics-growth.svg +55 -0
  14. package/examples/modern/metrics-heatmap.svg +55 -0
  15. package/package.json +1 -1
  16. package/src/components/contribution-heatmap.tsx +43 -0
  17. package/src/components/growth-arc.tsx +119 -0
  18. package/src/types.ts +6 -0
package/examples/ecosystem/metrics-growth.svg ADDED
@@ -0,0 +1,55 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="808" height="240" viewBox="0 0 808 240"><defs><style>
2
+ .t { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif; font-variant-numeric: tabular-lining; }
3
+ .t-h { font-size: 14px; fill: #c9d1d9; letter-spacing: 2px; font-weight: 600; }
4
+ .t-sub { font-size: 11px; fill: #6e7681; }
5
+ .t-label { font-size: 12px; fill: #8b949e; }
6
+ .t-value { font-size: 11px; fill: #6e7681; }
7
+ .t-subhdr { font-size: 11px; fill: #8b949e; letter-spacing: 1px; font-weight: 600; }
8
+ .t-stat-label { font-size: 10px; fill: #8b949e; font-weight: 600; }
9
+ .t-stat-value { font-size: 22px; font-weight: 700; }
10
+ .t-card-title { font-size: 12px; fill: #58a6ff; font-weight: 700; }
11
+ .t-card-detail { font-size: 11px; fill: #8b949e; }
12
+ .t-pill { font-size: 11px; font-weight: 600; }
13
+ .t-bullet { font-size: 12px; fill: #c9d1d9; }
14
+ .bg-fill { fill: #0d1117; }
15
+ .card-fill { fill: #161b22; }
16
+ .border-stroke { stroke: #30363d; }
17
+
18
+ @media (prefers-color-scheme: light) {
19
+ .bg-fill { fill: #ffffff; }
20
+ .card-fill { fill: #f6f8fa; }
21
+ .border-stroke { stroke: #d0d7de; }
22
+ .t-h { fill: #1f2328; }
23
+ .t-sub { fill: #656d76; }
24
+ .t-label { fill: #656d76; }
25
+ .t-value { fill: #656d76; }
26
+ .t-subhdr { fill: #656d76; }
27
+ .t-stat-label { fill: #656d76; }
28
+ .t-card-title { fill: #0969da; }
29
+ .t-card-detail { fill: #656d76; }
30
+ .t-bullet { fill: #1f2328; }
31
+ }
32
+
33
+ @keyframes fadeIn {
34
+ from { opacity: 0; transform: translateY(8px); }
35
+ to { opacity: 1; transform: translateY(0); }
36
+ }
37
+ @keyframes scaleIn {
38
+ from { transform: scale(0); opacity: 0; }
39
+ to { transform: scale(1); opacity: 1; }
40
+ }
41
+ @keyframes drawPath {
42
+ from { stroke-dashoffset: var(--path-length); }
43
+ to { stroke-dashoffset: 0; }
44
+ }
45
+ @keyframes radarReveal {
46
+ from { transform: scale(0); opacity: 0; }
47
+ to { transform: scale(1); opacity: 0.6; }
48
+ }
49
+ .fade-1 { animation: fadeIn 0.6s ease-out 0.1s both; }
50
+ .fade-2 { animation: fadeIn 0.6s ease-out 0.25s both; }
51
+ .fade-3 { animation: fadeIn 0.6s ease-out 0.4s both; }
52
+ .fade-4 { animation: fadeIn 0.6s ease-out 0.55s both; }
53
+ .fade-5 { animation: fadeIn 0.6s ease-out 0.7s both; }
54
+ .fade-6 { animation: fadeIn 0.6s ease-out 0.85s both; }
55
+ </style></defs><rect width="808" height="240" rx="12" class="bg-fill" fill="#0d1117"/><text x="24" y="40" class="t t-h">GROWTH ARC</text><text x="24" y="56" class="t t-sub">How project complexity has evolved over time</text><path d="M 24,76 C 214,76 214,176 404,176 C 594,176 594,156.36496555633616 784,156.36496555633616 L 784,186 L 24,186 Z" fill="#58a6ff" fill-opacity="0.15" class="fade-1"/><path d="M 24,76 C 214,76 214,176 404,176 C 594,176 594,156.36496555633616 784,156.36496555633616" fill="none" stroke="#58a6ff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="fade-1"/><circle cx="24" cy="76" r="4" fill="#58a6ff" class="fade-1"/><circle cx="404" cy="176" r="4" fill="#58a6ff" class="fade-2"/><circle cx="784" cy="156.36496555633616" r="4" fill="#58a6ff" class="fade-3"/><text x="24" y="66" class="t t-value" text-anchor="middle" font-size="10">94</text><text x="404" y="166" class="t t-value" text-anchor="middle" font-size="10">74</text><text x="784" y="146.36496555633616" class="t t-value" text-anchor="middle" font-size="10">78</text><text x="24" y="200" class="t t-value" text-anchor="middle">3yr+</text><text x="404" y="200" class="t t-value" text-anchor="middle">2yr</text><text x="784" y="200" class="t t-value" text-anchor="middle">&lt; 1yr</text><text x="24" y="210" class="t t-muted" text-anchor="middle" font-size="9">10 repos</text><text x="404" y="210" class="t t-muted" text-anchor="middle" font-size="9">2 repos</text><text x="784" y="210" class="t t-muted" text-anchor="middle" font-size="9">12 repos</text></svg>
package/examples/ecosystem/metrics-heatmap.svg ADDED
@@ -0,0 +1,55 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="808" height="185" viewBox="0 0 808 185"><defs><style>
2
+ .t { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif; font-variant-numeric: tabular-lining; }
3
+ .t-h { font-size: 14px; fill: #c9d1d9; letter-spacing: 2px; font-weight: 600; }
4
+ .t-sub { font-size: 11px; fill: #6e7681; }
5
+ .t-label { font-size: 12px; fill: #8b949e; }
6
+ .t-value { font-size: 11px; fill: #6e7681; }
7
+ .t-subhdr { font-size: 11px; fill: #8b949e; letter-spacing: 1px; font-weight: 600; }
8
+ .t-stat-label { font-size: 10px; fill: #8b949e; font-weight: 600; }
9
+ .t-stat-value { font-size: 22px; font-weight: 700; }
10
+ .t-card-title { font-size: 12px; fill: #58a6ff; font-weight: 700; }
11
+ .t-card-detail { font-size: 11px; fill: #8b949e; }
12
+ .t-pill { font-size: 11px; font-weight: 600; }
13
+ .t-bullet { font-size: 12px; fill: #c9d1d9; }
14
+ .bg-fill { fill: #0d1117; }
15
+ .card-fill { fill: #161b22; }
16
+ .border-stroke { stroke: #30363d; }
17
+
18
+ @media (prefers-color-scheme: light) {
19
+ .bg-fill { fill: #ffffff; }
20
+ .card-fill { fill: #f6f8fa; }
21
+ .border-stroke { stroke: #d0d7de; }
22
+ .t-h { fill: #1f2328; }
23
+ .t-sub { fill: #656d76; }
24
+ .t-label { fill: #656d76; }
25
+ .t-value { fill: #656d76; }
26
+ .t-subhdr { fill: #656d76; }
27
+ .t-stat-label { fill: #656d76; }
28
+ .t-card-title { fill: #0969da; }
29
+ .t-card-detail { fill: #656d76; }
30
+ .t-bullet { fill: #1f2328; }
31
+ }
32
+
33
+ @keyframes fadeIn {
34
+ from { opacity: 0; transform: translateY(8px); }
35
+ to { opacity: 1; transform: translateY(0); }
36
+ }
37
+ @keyframes scaleIn {
38
+ from { transform: scale(0); opacity: 0; }
39
+ to { transform: scale(1); opacity: 1; }
40
+ }
41
+ @keyframes drawPath {
42
+ from { stroke-dashoffset: var(--path-length); }
43
+ to { stroke-dashoffset: 0; }
44
+ }
45
+ @keyframes radarReveal {
46
+ from { transform: scale(0); opacity: 0; }
47
+ to { transform: scale(1); opacity: 0.6; }
48
+ }
49
+ .fade-1 { animation: fadeIn 0.6s ease-out 0.1s both; }
50
+ .fade-2 { animation: fadeIn 0.6s ease-out 0.25s both; }
51
+ .fade-3 { animation: fadeIn 0.6s ease-out 0.4s both; }
52
+ .fade-4 { animation: fadeIn 0.6s ease-out 0.55s both; }
53
+ .fade-5 { animation: fadeIn 0.6s ease-out 0.7s both; }
54
+ .fade-6 { animation: fadeIn 0.6s ease-out 0.85s both; }
55
+ </style></defs><rect width="808" height="185" rx="12" class="bg-fill" fill="#0d1117"/><text x="24" y="40" class="t t-h">CONTRIBUTION ACTIVITY</text><text x="24" y="56" class="t t-sub">Contribution patterns over the past year</text><rect x="24" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="24" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="24" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="24" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="24" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="24" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="24" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="37" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="37" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="37" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="37" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="37" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="37" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="37" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="50" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="50" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="50" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="50" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="50" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="50" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="50" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="63" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="63" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="63" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="63" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="63" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="63" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="63" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="76" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="76" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="76" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="76" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="76" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="76" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="76" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="89" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="89" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="89" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="89" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="89" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="89" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="89" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="102" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="102" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="102" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="102" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="102" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="102" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="102" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="115" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="115" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="115" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="115" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="115" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="115" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="115" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="128" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="128" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="128" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="128" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="128" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="128" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="128" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="141" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="141" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="141" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="141" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="141" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="141" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="141" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="154" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="154" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="154" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="154" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="154" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="154" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="154" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="167" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="167" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="167" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="167" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="167" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="167" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="167" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="180" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="180" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="180" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="180" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="180" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="180" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="180" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="193" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="193" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="193" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="193" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="193" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="193" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="193" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="206" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="206" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="206" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="206" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="206" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="206" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="206" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="219" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="219" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="219" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="219" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="219" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="219" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="219" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="232" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="232" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="232" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="232" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="232" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="232" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="232" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="245" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="245" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="245" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="245" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="245" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="245" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="245" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="258" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="258" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="258" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="258" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="258" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="258" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="258" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="271" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="271" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="271" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="271" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="271" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="271" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="271" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="284" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="284" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="284" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="284" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="284" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="284" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="284" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="297" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="297" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="297" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="297" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="297" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="297" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="297" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="310" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="310" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="310" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="310" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="310" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="310" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="310" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="323" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="323" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="323" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="323" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="323" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="323" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="323" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="336" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="336" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="336" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="336" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="336" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="336" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="336" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="349" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="349" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="349" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="349" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="349" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="349" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="349" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="362" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="362" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="362" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="362" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="362" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="362" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="362" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="375" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="375" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="375" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="375" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="375" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="375" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="375" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="388" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="388" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="388" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="388" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="388" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="388" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="388" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="401" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="401" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="401" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="401" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="401" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="401" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="401" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="414" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="414" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="414" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="414" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="414" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="414" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="414" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="427" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="427" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="427" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="427" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="427" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="427" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="427" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="440" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="440" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="440" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="440" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="440" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="440" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="440" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="453" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="453" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="453" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="453" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="453" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="453" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="453" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="466" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="466" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="466" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="466" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="466" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="466" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="466" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="479" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="479" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="479" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="479" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="479" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="479" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="479" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="492" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="492" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="492" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="492" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="492" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="492" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="492" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="505" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="505" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="505" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="505" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="505" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="505" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="505" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="518" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="518" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="518" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="518" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="518" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="518" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="518" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="531" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="531" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="531" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="531" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="531" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="531" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="531" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="544" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="544" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="544" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="544" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="544" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="544" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="544" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="557" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="557" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="557" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="557" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="557" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="557" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="557" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="570" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="570" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="570" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="570" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="570" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="570" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="570" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="583" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="583" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="583" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="583" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="583" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="583" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="583" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="596" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="596" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="596" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="596" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="596" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="596" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="596" y="144" width="11" height="11" rx="2" fill="#216e39" opacity="0.85" class="fade-3"/><rect x="609" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="609" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="609" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="609" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="609" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="609" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="609" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="622" y="66" width="11" height="11" rx="2" fill="#216e39" opacity="0.85" class="fade-5"/><rect x="622" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-5"/><rect x="622" y="92" width="11" height="11" rx="2" fill="#40c463" opacity="0.85" class="fade-5"/><rect x="622" y="105" width="11" height="11" rx="2" fill="#30a14e" opacity="0.85" class="fade-5"/><rect x="622" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-5"/><rect x="622" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-5"/><rect x="622" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-5"/><rect x="635" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="635" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="635" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="635" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="635" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="635" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="635" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="648" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="648" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="648" y="92" width="11" height="11" rx="2" fill="#40c463" opacity="0.85" class="fade-1"/><rect x="648" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="648" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="648" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="648" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="661" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="661" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="661" y="92" width="11" height="11" rx="2" fill="#40c463" opacity="0.85" class="fade-2"/><rect x="661" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="661" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="661" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="661" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="674" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="674" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="674" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="674" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="674" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="674" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="674" y="144" width="11" height="11" rx="2" fill="#30a14e" opacity="0.85" class="fade-3"/><rect x="687" y="66" width="11" height="11" rx="2" fill="#30a14e" opacity="0.85" class="fade-4"/><rect x="687" y="79" width="11" height="11" rx="2" fill="#40c463" opacity="0.85" class="fade-4"/><rect x="687" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="687" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="687" y="118" width="11" height="11" rx="2" fill="#40c463" opacity="0.85" class="fade-4"/><rect x="687" y="131" width="11" height="11" rx="2" fill="#40c463" opacity="0.85" class="fade-4"/><rect x="687" y="144" width="11" height="11" rx="2" fill="#216e39" opacity="0.85" class="fade-4"/><rect x="700" y="66" width="11" height="11" rx="2" fill="#30a14e" opacity="0.85" class="fade-5"/><rect x="700" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-5"/></svg>
package/examples/minimal/metrics-growth.svg ADDED
@@ -0,0 +1,55 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="808" height="240" viewBox="0 0 808 240"><defs><style>
2
+ .t { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif; font-variant-numeric: tabular-lining; }
3
+ .t-h { font-size: 14px; fill: #c9d1d9; letter-spacing: 2px; font-weight: 600; }
4
+ .t-sub { font-size: 11px; fill: #6e7681; }
5
+ .t-label { font-size: 12px; fill: #8b949e; }
6
+ .t-value { font-size: 11px; fill: #6e7681; }
7
+ .t-subhdr { font-size: 11px; fill: #8b949e; letter-spacing: 1px; font-weight: 600; }
8
+ .t-stat-label { font-size: 10px; fill: #8b949e; font-weight: 600; }
9
+ .t-stat-value { font-size: 22px; font-weight: 700; }
10
+ .t-card-title { font-size: 12px; fill: #58a6ff; font-weight: 700; }
11
+ .t-card-detail { font-size: 11px; fill: #8b949e; }
12
+ .t-pill { font-size: 11px; font-weight: 600; }
13
+ .t-bullet { font-size: 12px; fill: #c9d1d9; }
14
+ .bg-fill { fill: #0d1117; }
15
+ .card-fill { fill: #161b22; }
16
+ .border-stroke { stroke: #30363d; }
17
+
18
+ @media (prefers-color-scheme: light) {
19
+ .bg-fill { fill: #ffffff; }
20
+ .card-fill { fill: #f6f8fa; }
21
+ .border-stroke { stroke: #d0d7de; }
22
+ .t-h { fill: #1f2328; }
23
+ .t-sub { fill: #656d76; }
24
+ .t-label { fill: #656d76; }
25
+ .t-value { fill: #656d76; }
26
+ .t-subhdr { fill: #656d76; }
27
+ .t-stat-label { fill: #656d76; }
28
+ .t-card-title { fill: #0969da; }
29
+ .t-card-detail { fill: #656d76; }
30
+ .t-bullet { fill: #1f2328; }
31
+ }
32
+
33
+ @keyframes fadeIn {
34
+ from { opacity: 0; transform: translateY(8px); }
35
+ to { opacity: 1; transform: translateY(0); }
36
+ }
37
+ @keyframes scaleIn {
38
+ from { transform: scale(0); opacity: 0; }
39
+ to { transform: scale(1); opacity: 1; }
40
+ }
41
+ @keyframes drawPath {
42
+ from { stroke-dashoffset: var(--path-length); }
43
+ to { stroke-dashoffset: 0; }
44
+ }
45
+ @keyframes radarReveal {
46
+ from { transform: scale(0); opacity: 0; }
47
+ to { transform: scale(1); opacity: 0.6; }
48
+ }
49
+ .fade-1 { animation: fadeIn 0.6s ease-out 0.1s both; }
50
+ .fade-2 { animation: fadeIn 0.6s ease-out 0.25s both; }
51
+ .fade-3 { animation: fadeIn 0.6s ease-out 0.4s both; }
52
+ .fade-4 { animation: fadeIn 0.6s ease-out 0.55s both; }
53
+ .fade-5 { animation: fadeIn 0.6s ease-out 0.7s both; }
54
+ .fade-6 { animation: fadeIn 0.6s ease-out 0.85s both; }
55
+ </style></defs><rect width="808" height="240" rx="12" class="bg-fill" fill="#0d1117"/><text x="24" y="40" class="t t-h">GROWTH ARC</text><text x="24" y="56" class="t t-sub">How project complexity has evolved over time</text><path d="M 24,76 C 214,76 214,176 404,176 C 594,176 594,156.36496555633616 784,156.36496555633616 L 784,186 L 24,186 Z" fill="#58a6ff" fill-opacity="0.15" class="fade-1"/><path d="M 24,76 C 214,76 214,176 404,176 C 594,176 594,156.36496555633616 784,156.36496555633616" fill="none" stroke="#58a6ff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="fade-1"/><circle cx="24" cy="76" r="4" fill="#58a6ff" class="fade-1"/><circle cx="404" cy="176" r="4" fill="#58a6ff" class="fade-2"/><circle cx="784" cy="156.36496555633616" r="4" fill="#58a6ff" class="fade-3"/><text x="24" y="66" class="t t-value" text-anchor="middle" font-size="10">94</text><text x="404" y="166" class="t t-value" text-anchor="middle" font-size="10">74</text><text x="784" y="146.36496555633616" class="t t-value" text-anchor="middle" font-size="10">78</text><text x="24" y="200" class="t t-value" text-anchor="middle">3yr+</text><text x="404" y="200" class="t t-value" text-anchor="middle">2yr</text><text x="784" y="200" class="t t-value" text-anchor="middle">&lt; 1yr</text><text x="24" y="210" class="t t-muted" text-anchor="middle" font-size="9">10 repos</text><text x="404" y="210" class="t t-muted" text-anchor="middle" font-size="9">2 repos</text><text x="784" y="210" class="t t-muted" text-anchor="middle" font-size="9">12 repos</text></svg>
package/examples/minimal/metrics-heatmap.svg ADDED
@@ -0,0 +1,55 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="808" height="185" viewBox="0 0 808 185"><defs><style>
2
+ .t { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif; font-variant-numeric: tabular-lining; }
3
+ .t-h { font-size: 14px; fill: #c9d1d9; letter-spacing: 2px; font-weight: 600; }
4
+ .t-sub { font-size: 11px; fill: #6e7681; }
5
+ .t-label { font-size: 12px; fill: #8b949e; }
6
+ .t-value { font-size: 11px; fill: #6e7681; }
7
+ .t-subhdr { font-size: 11px; fill: #8b949e; letter-spacing: 1px; font-weight: 600; }
8
+ .t-stat-label { font-size: 10px; fill: #8b949e; font-weight: 600; }
9
+ .t-stat-value { font-size: 22px; font-weight: 700; }
10
+ .t-card-title { font-size: 12px; fill: #58a6ff; font-weight: 700; }
11
+ .t-card-detail { font-size: 11px; fill: #8b949e; }
12
+ .t-pill { font-size: 11px; font-weight: 600; }
13
+ .t-bullet { font-size: 12px; fill: #c9d1d9; }
14
+ .bg-fill { fill: #0d1117; }
15
+ .card-fill { fill: #161b22; }
16
+ .border-stroke { stroke: #30363d; }
17
+
18
+ @media (prefers-color-scheme: light) {
19
+ .bg-fill { fill: #ffffff; }
20
+ .card-fill { fill: #f6f8fa; }
21
+ .border-stroke { stroke: #d0d7de; }
22
+ .t-h { fill: #1f2328; }
23
+ .t-sub { fill: #656d76; }
24
+ .t-label { fill: #656d76; }
25
+ .t-value { fill: #656d76; }
26
+ .t-subhdr { fill: #656d76; }
27
+ .t-stat-label { fill: #656d76; }
28
+ .t-card-title { fill: #0969da; }
29
+ .t-card-detail { fill: #656d76; }
30
+ .t-bullet { fill: #1f2328; }
31
+ }
32
+
33
+ @keyframes fadeIn {
34
+ from { opacity: 0; transform: translateY(8px); }
35
+ to { opacity: 1; transform: translateY(0); }
36
+ }
37
+ @keyframes scaleIn {
38
+ from { transform: scale(0); opacity: 0; }
39
+ to { transform: scale(1); opacity: 1; }
40
+ }
41
+ @keyframes drawPath {
42
+ from { stroke-dashoffset: var(--path-length); }
43
+ to { stroke-dashoffset: 0; }
44
+ }
45
+ @keyframes radarReveal {
46
+ from { transform: scale(0); opacity: 0; }
47
+ to { transform: scale(1); opacity: 0.6; }
48
+ }
49
+ .fade-1 { animation: fadeIn 0.6s ease-out 0.1s both; }
50
+ .fade-2 { animation: fadeIn 0.6s ease-out 0.25s both; }
51
+ .fade-3 { animation: fadeIn 0.6s ease-out 0.4s both; }
52
+ .fade-4 { animation: fadeIn 0.6s ease-out 0.55s both; }
53
+ .fade-5 { animation: fadeIn 0.6s ease-out 0.7s both; }
54
+ .fade-6 { animation: fadeIn 0.6s ease-out 0.85s both; }
55
+ </style></defs><rect width="808" height="185" rx="12" class="bg-fill" fill="#0d1117"/><text x="24" y="40" class="t t-h">CONTRIBUTION ACTIVITY</text><text x="24" y="56" class="t t-sub">Contribution patterns over the past year</text><rect x="24" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="24" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="24" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="24" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="24" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="24" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="24" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="37" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="37" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="37" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="37" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="37" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="37" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="37" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="50" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="50" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="50" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="50" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="50" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="50" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="50" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="63" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="63" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="63" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="63" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="63" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="63" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="63" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="76" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="76" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="76" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="76" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="76" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="76" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="76" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="89" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="89" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="89" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="89" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="89" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="89" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="89" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="102" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="102" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="102" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="102" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="102" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="102" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="102" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="115" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="115" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="115" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="115" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="115" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="115" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="115" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="128" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="128" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="128" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="128" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="128" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="128" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="128" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="141" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="141" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="141" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="141" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="141" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="141" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="141" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="154" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="154" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="154" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="154" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="154" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="154" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="154" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="167" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="167" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="167" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="167" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="167" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="167" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="167" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="180" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="180" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="180" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="180" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="180" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="180" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="180" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="193" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="193" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="193" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="193" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="193" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="193" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="193" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="206" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="206" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="206" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="206" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="206" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="206" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="206" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="219" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="219" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="219" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="219" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="219" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="219" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="219" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="232" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="232" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="232" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="232" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="232" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="232" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="232" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="245" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="245" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="245" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="245" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="245" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="245" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="245" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="258" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="258" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="258" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="258" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="258" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="258" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="258" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="271" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="271" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="271" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="271" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="271" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="271" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="271" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="284" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="284" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="284" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="284" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="284" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="284" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="284" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="297" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="297" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="297" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="297" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="297" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="297" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="297" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="310" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="310" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="310" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="310" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="310" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="310" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="310" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="323" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="323" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="323" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="323" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="323" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="323" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="323" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="336" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="336" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="336" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="336" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="336" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="336" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="336" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="349" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="349" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="349" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="349" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="349" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="349" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="349" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="362" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="362" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="362" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="362" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="362" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="362" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="362" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="375" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="375" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="375" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="375" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="375" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="375" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="375" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="388" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="388" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="388" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="388" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="388" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="388" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="388" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="401" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="401" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="401" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="401" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="401" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="401" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="401" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="414" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="414" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="414" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="414" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="414" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="414" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="414" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="427" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="427" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="427" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="427" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="427" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="427" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="427" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="440" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="440" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="440" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="440" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="440" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="440" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="440" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="453" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="453" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="453" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="453" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="453" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="453" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="453" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="466" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="466" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="466" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="466" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="466" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="466" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="466" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="479" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="479" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="479" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="479" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="479" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="479" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="479" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="492" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="492" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="492" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="492" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="492" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="492" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="492" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="505" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="505" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="505" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="505" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="505" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="505" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="505" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="518" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="518" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="518" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="518" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="518" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="518" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="518" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="531" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="531" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="531" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="531" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="531" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="531" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="531" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-4"/><rect x="544" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="544" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="544" y="92" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="544" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="544" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="544" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="544" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-5"/><rect x="557" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="557" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="557" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="557" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="557" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="557" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="557" y="144" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="570" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="570" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="570" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="570" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="570" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="570" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-1"/><rect x="570" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="583" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="583" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="583" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="583" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="583" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="583" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="583" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="596" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="596" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="596" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="596" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="596" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="596" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="596" y="144" width="11" height="11" rx="2" fill="#216e39" opacity="0.85" class="fade-3"/><rect x="609" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="609" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="609" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="609" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="609" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="609" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="609" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="622" y="66" width="11" height="11" rx="2" fill="#216e39" opacity="0.85" class="fade-5"/><rect x="622" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-5"/><rect x="622" y="92" width="11" height="11" rx="2" fill="#40c463" opacity="0.85" class="fade-5"/><rect x="622" y="105" width="11" height="11" rx="2" fill="#30a14e" opacity="0.85" class="fade-5"/><rect x="622" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-5"/><rect x="622" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-5"/><rect x="622" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-5"/><rect x="635" y="66" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="635" y="79" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="635" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="635" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="635" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="635" y="131" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-6"/><rect x="635" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-6"/><rect x="648" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="648" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="648" y="92" width="11" height="11" rx="2" fill="#40c463" opacity="0.85" class="fade-1"/><rect x="648" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="648" y="118" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="648" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="648" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-1"/><rect x="661" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="661" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="661" y="92" width="11" height="11" rx="2" fill="#40c463" opacity="0.85" class="fade-2"/><rect x="661" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="661" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-2"/><rect x="661" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="661" y="144" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-2"/><rect x="674" y="66" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="674" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="674" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="674" y="105" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="674" y="118" width="11" height="11" rx="2" fill="#ebedf0" opacity="0.85" class="fade-3"/><rect x="674" y="131" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-3"/><rect x="674" y="144" width="11" height="11" rx="2" fill="#30a14e" opacity="0.85" class="fade-3"/><rect x="687" y="66" width="11" height="11" rx="2" fill="#30a14e" opacity="0.85" class="fade-4"/><rect x="687" y="79" width="11" height="11" rx="2" fill="#40c463" opacity="0.85" class="fade-4"/><rect x="687" y="92" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="687" y="105" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-4"/><rect x="687" y="118" width="11" height="11" rx="2" fill="#40c463" opacity="0.85" class="fade-4"/><rect x="687" y="131" width="11" height="11" rx="2" fill="#40c463" opacity="0.85" class="fade-4"/><rect x="687" y="144" width="11" height="11" rx="2" fill="#216e39" opacity="0.85" class="fade-4"/><rect x="700" y="66" width="11" height="11" rx="2" fill="#30a14e" opacity="0.85" class="fade-5"/><rect x="700" y="79" width="11" height="11" rx="2" fill="#9be9a8" opacity="0.85" class="fade-5"/></svg>
package/examples/modern/metrics-growth.svg ADDED
@@ -0,0 +1,55 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="808" height="240" viewBox="0 0 808 240"><defs><style>
2
+ .t { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif; font-variant-numeric: tabular-lining; }
3
+ .t-h { font-size: 14px; fill: #c9d1d9; letter-spacing: 2px; font-weight: 600; }
4
+ .t-sub { font-size: 11px; fill: #6e7681; }
5
+ .t-label { font-size: 12px; fill: #8b949e; }
6
+ .t-value { font-size: 11px; fill: #6e7681; }
7
+ .t-subhdr { font-size: 11px; fill: #8b949e; letter-spacing: 1px; font-weight: 600; }
8
+ .t-stat-label { font-size: 10px; fill: #8b949e; font-weight: 600; }
9
+ .t-stat-value { font-size: 22px; font-weight: 700; }
10
+ .t-card-title { font-size: 12px; fill: #58a6ff; font-weight: 700; }
11
+ .t-card-detail { font-size: 11px; fill: #8b949e; }
12
+ .t-pill { font-size: 11px; font-weight: 600; }
13
+ .t-bullet { font-size: 12px; fill: #c9d1d9; }
14
+ .bg-fill { fill: #0d1117; }
15
+ .card-fill { fill: #161b22; }
16
+ .border-stroke { stroke: #30363d; }
17
+
18
+ @media (prefers-color-scheme: light) {
19
+ .bg-fill { fill: #ffffff; }
20
+ .card-fill { fill: #f6f8fa; }
21
+ .border-stroke { stroke: #d0d7de; }
22
+ .t-h { fill: #1f2328; }
23
+ .t-sub { fill: #656d76; }
24
+ .t-label { fill: #656d76; }
25
+ .t-value { fill: #656d76; }
26
+ .t-subhdr { fill: #656d76; }
27
+ .t-stat-label { fill: #656d76; }
28
+ .t-card-title { fill: #0969da; }
29
+ .t-card-detail { fill: #656d76; }
30
+ .t-bullet { fill: #1f2328; }
31
+ }
32
+
33
+ @keyframes fadeIn {
34
+ from { opacity: 0; transform: translateY(8px); }
35
+ to { opacity: 1; transform: translateY(0); }
36
+ }
37
+ @keyframes scaleIn {
38
+ from { transform: scale(0); opacity: 0; }
39
+ to { transform: scale(1); opacity: 1; }
40
+ }
41
+ @keyframes drawPath {
42
+ from { stroke-dashoffset: var(--path-length); }
43
+ to { stroke-dashoffset: 0; }
44
+ }
45
+ @keyframes radarReveal {
46
+ from { transform: scale(0); opacity: 0; }
47
+ to { transform: scale(1); opacity: 0.6; }
48
+ }
49
+ .fade-1 { animation: fadeIn 0.6s ease-out 0.1s both; }
50
+ .fade-2 { animation: fadeIn 0.6s ease-out 0.25s both; }
51
+ .fade-3 { animation: fadeIn 0.6s ease-out 0.4s both; }
52
+ .fade-4 { animation: fadeIn 0.6s ease-out 0.55s both; }
53
+ .fade-5 { animation: fadeIn 0.6s ease-out 0.7s both; }
54
+ .fade-6 { animation: fadeIn 0.6s ease-out 0.85s both; }
55
+ </style></defs><rect width="808" height="240" rx="12" class="bg-fill" fill="#0d1117"/><text x="24" y="40" class="t t-h">GROWTH ARC</text><text x="24" y="56" class="t t-sub">How project complexity has evolved over time</text><path d="M 24,76 C 214,76 214,176 404,176 C 594,176 594,156.36496555633616 784,156.36496555633616 L 784,186 L 24,186 Z" fill="#58a6ff" fill-opacity="0.15" class="fade-1"/><path d="M 24,76 C 214,76 214,176 404,176 C 594,176 594,156.36496555633616 784,156.36496555633616" fill="none" stroke="#58a6ff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="fade-1"/><circle cx="24" cy="76" r="4" fill="#58a6ff" class="fade-1"/><circle cx="404" cy="176" r="4" fill="#58a6ff" class="fade-2"/><circle cx="784" cy="156.36496555633616" r="4" fill="#58a6ff" class="fade-3"/><text x="24" y="66" class="t t-value" text-anchor="middle" font-size="10">94</text><text x="404" y="166" class="t t-value" text-anchor="middle" font-size="10">74</text><text x="784" y="146.36496555633616" class="t t-value" text-anchor="middle" font-size="10">78</text><text x="24" y="200" class="t t-value" text-anchor="middle">3yr+</text><text x="404" y="200" class="t t-value" text-anchor="middle">2yr</text><text x="784" y="200" class="t t-value" text-anchor="middle">&lt; 1yr</text><text x="24" y="210" class="t t-muted" text-anchor="middle" font-size="9">10 repos</text><text x="404" y="210" class="t t-muted" text-anchor="middle" font-size="9">2 repos</text><text x="784" y="210" class="t t-muted" text-anchor="middle" font-size="9">12 repos</text></svg>