Skip to content

Commit ef645c0

Browse files
RikthepixelRikthepixel
committed
Add graph decoration svgs
1 parent 9ad03b2 commit ef645c0

File tree

5 files changed

+75
-0
lines changed

5 files changed

+75
-0
lines changed

Diff for: ‎src/assets/images/brand/decor/git/graph-1.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
3+
import React, { ForwardedRef, SVGProps, forwardRef } from "react";
4+
5+
const Graph1 = forwardRef(({ color = "#7C3AED", color1 = "#2563EB", ...props }: SVGProps<SVGSVGElement> & { color1?: string; }, ref: ForwardedRef<SVGSVGElement>) => (
6+
<svg ref={ref} width="600" height="1900" viewBox="0 0 600 1900" fill="none" xmlns="http://www.w3.org/2000/svg" data-reset {...props}>
7+
<g clip-path="url(.clip0_115_309)">
8+
<path d="M479.208 500L433.246 454.038L200.973 686.311C185.406 679.35 168.155 675.48 150 675.48C80.9644 675.48 25 731.444 25 800.48C25 858.093 63.9768 906.603 117 921.078L117 1124.97L117 1125H117.033L430.395 1438.36L476.357 1392.4L182 1098.04V921.346C235.533 907.211 275 858.455 275 800.48C275 773.294 266.322 748.136 251.584 727.624L479.208 500Z" fill={color} />
9+
<path d="M744.135 -127L790.097 -81.038L482 227.059V379.614C535.533 393.749 575 442.505 575 500.48C575 558.455 535.533 607.211 482 621.346V979.613C535.533 993.748 575 1042.5 575 1100.48C575 1158.46 535.533 1207.21 482 1221.35V1279.61C535.533 1293.75 575 1342.5 575 1400.48C575 1458.46 535.533 1507.21 482 1521.35V1672.94L790.097 1981.04L744.135 2027L417.133 1700H417V1521.08C363.977 1506.6 325 1458.1 325 1400.48C325 1342.86 363.977 1294.36 417 1279.88V1221.08C363.977 1206.6 325 1158.1 325 1100.48C325 1042.86 363.977 994.356 417 979.882V621.078C363.977 606.603 325 558.093 325 500.48C325 442.867 363.977 394.357 417 379.882V200H417.135L744.135 -127Z" fill={color1} />
10+
</g>
11+
<defs>
12+
<clipPath className="clip0_115_309">
13+
<rect width="600" height="1900" />
14+
</clipPath>
15+
</defs>
16+
</svg>
17+
));
18+
19+
export default Graph1;

Diff for: ‎src/assets/images/brand/decor/git/graph-2.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { SVGProps, forwardRef, ForwardedRef } from "react";
2+
3+
const Graph2 = forwardRef(({ color = "#DC2626", ...props }: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
4+
<svg ref={ref} width="300" height="1600" viewBox="0 0 300 1600" fill="none" xmlns="http://www.w3.org/2000/svg" data-reset {...props}>
5+
<g clip-path="url(.clip0_115_276)">
6+
<path d="M444.135 -127L490.097 -81.038L182 227.059V379.614C235.533 393.749 275 442.505 275 500.48C275 558.455 235.533 607.211 182 621.346V679.614C235.533 693.749 275 742.505 275 800.48C275 858.455 235.533 907.211 182 921.346V1372.94L490.097 1681.04L444.135 1727L117.133 1400H117V921.078C63.9768 906.602 25 858.093 25 800.48C25 742.867 63.9768 694.358 117 679.882V621.078C63.9768 606.603 25 558.093 25 500.48C25 442.867 63.9768 394.357 117 379.882V200H117.135L444.135 -127Z" fill={color} />
7+
</g>
8+
<defs>
9+
<clipPath className="clip0_115_276">
10+
<rect width="300" height="1600" />
11+
</clipPath>
12+
</defs>
13+
</svg>
14+
15+
));
16+
17+
export default Graph2;

Diff for: ‎src/assets/images/brand/decor/git/graph-3.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { SVGProps, forwardRef, ForwardedRef } from "react";
2+
3+
const Graph3 = forwardRef(({ color = "#F59E0B", ...props }: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
4+
<svg ref={ref} width="300" height="2500" viewBox="0 0 300 2500" fill="none" xmlns="http://www.w3.org/2000/svg" data-reset {...props}>
5+
<g clip-path="url(.clip0_115_290)">
6+
<path d="M490.097 -81.038L444.135 -127L117.135 200H117V379.882C63.9768 394.357 25 442.867 25 500.48C25 558.093 63.9768 606.603 117 621.078V679.882C63.9768 694.358 25 742.867 25 800.48C25 858.093 63.9768 906.602 117 921.078V1279.88C63.9768 1294.36 25 1342.86 25 1400.48C25 1458.1 63.9768 1506.6 117 1521.08V1579.88C63.9768 1594.36 25 1642.86 25 1700.48C25 1758.1 63.9768 1806.6 117 1821.08V2300H117.133L444.135 2627L490.097 2581.04L182 2272.94V1821.35C235.533 1807.21 275 1758.46 275 1700.48C275 1642.5 235.533 1593.75 182 1579.61V1521.35C235.533 1507.21 275 1458.46 275 1400.48C275 1342.5 235.533 1293.75 182 1279.61V921.346C235.533 907.211 275 858.455 275 800.48C275 742.505 235.533 693.749 182 679.614V621.346C235.533 607.211 275 558.455 275 500.48C275 442.505 235.533 393.749 182 379.614V227.059L490.097 -81.038Z" fill={color} />
7+
</g>
8+
<defs>
9+
<clipPath className="clip0_115_290">
10+
<rect width="300" height="2500" />
11+
</clipPath>
12+
</defs>
13+
</svg>
14+
15+
));
16+
17+
export default Graph3;

Diff for: ‎src/assets/images/brand/decor/git/graph-4.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { SVGProps, forwardRef, ForwardedRef } from "react";
2+
3+
const Graph4 = forwardRef(({ color = "#DC2626", color1 = "#A3E635", ...props }: SVGProps<SVGSVGElement> & { color1?: string; }, ref: ForwardedRef<SVGSVGElement>) => (
4+
<svg ref={ref} width="300" height="2800" viewBox="0 0 300 2800" fill="none" xmlns="http://www.w3.org/2000/svg" data-reset {...props}>
5+
<g clip-path="url(.clip0_115_255)">
6+
<path d="M490.097 -81.038L444.135 -127L117.135 200H117V379.882C63.9768 394.357 25 442.867 25 500.48C25 558.093 63.9768 606.603 117 621.078V679.882C63.9768 694.358 25 742.867 25 800.48C25 858.093 63.9768 906.603 117 921.078V1100H117.133L444.135 1427L490.097 1381.04L182 1072.94V921.346C235.533 907.211 275 858.455 275 800.48C275 742.505 235.533 693.749 182 679.614V621.346C235.533 607.211 275 558.455 275 500.48C275 442.505 235.533 393.749 182 379.614V227.059L490.097 -81.038Z" fill={color} />
7+
<path d="M490.097 1418.96L444.135 1373L117.133 1700H117V1879.88C63.9768 1894.36 25 1942.86 25 2000.48C25 2058.1 63.9768 2106.6 117 2121.08V2179.88C63.9768 2194.36 25 2242.86 25 2300.48C25 2358.1 63.9768 2406.6 117 2421.08V2600H117.133L444.135 2927L490.097 2881.04L182 2572.94V2421.35C235.533 2407.21 275 2358.46 275 2300.48C275 2242.5 235.533 2193.75 182 2179.61V2121.35C235.533 2107.21 275 2058.46 275 2000.48C275 1942.5 235.533 1893.75 182 1879.61V1727.06L490.097 1418.96Z" fill={color1} />
8+
</g>
9+
<defs>
10+
<clipPath className="clip0_115_255">
11+
<rect width="300" height="2800" />
12+
</clipPath>
13+
</defs>
14+
</svg>
15+
16+
));
17+
18+
export default Graph4;

Diff for: ‎src/styles/main.css

+4
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ html {
1313
@apply min-h-full bg-cr-fill text-cr-fill-contrast;
1414
}
1515

16+
svg[data-reset] {
17+
height: auto;
18+
}
19+
1620
:not(pre)>code {
1721
@apply bg-white/20 border border-white/20 rounded-md px-1
1822
}

0 commit comments

Comments
 (0)