You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Portfolio/src/components/Dots.tsx

291 lines
7.9 KiB

import styled, { useTheme } from "styled-components";
import { FunctionalComponent } from "preact";
const Container = styled.div`
width: 100%;
transform: ${(props) => (props.left ? "scale(-1, -1)" : "none")};
`;
const Dots: FunctionalComponent<{
left?: boolean;
}> = ({ left }) => {
const theme = useTheme();
return (
<Container left={left}>
<svg
version="1.0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 645.000000 456.000000"
preserveAspectRatio="xMidYMid meet"
>
<g
transform="translate(0.000000,456.000000) scale(0.100000,-0.100000)"
fill={theme.palette.secondary}
stroke="none"
>
<path
d="M3825 4548 c-28 -16 -35 -28 -35 -64 0 -79 106 -88 133 -11 9 25 -18
73 -45 81 -29 7 -29 7 -53 -6z"
/>
<path
d="M4455 4548 c-28 -16 -35 -28 -35 -64 0 -39 27 -64 68 -64 58 0 90 76
49 117 -19 18 -60 24 -82 11z"
/>
<path
d="M5077 4540 c-20 -16 -27 -30 -27 -55 0 -64 80 -89 120 -38 50 64 -29
143 -93 93z"
/>
<path
d="M5706 4539 c-50 -39 -22 -119 43 -119 20 0 36 9 50 26 27 35 26 59
-4 89 -30 30 -54 31 -89 4z"
/>
<path
d="M6336 4539 c-49 -39 -22 -119 42 -119 33 0 45 8 61 37 17 33 14 51
-14 78 -30 30 -54 31 -89 4z"
/>
<path
d="M3825 3918 c-28 -16 -35 -28 -35 -64 0 -38 27 -64 67 -64 69 0 91
100 28 128 -31 14 -35 14 -60 0z"
/>
<path
d="M4447 3910 c-20 -16 -27 -31 -27 -54 0 -66 79 -91 120 -39 50 64 -29
143 -93 93z"
/>
<path
d="M5077 3910 c-20 -16 -27 -31 -27 -54 0 -66 79 -91 120 -39 50 64 -29
143 -93 93z"
/>
<path
d="M5706 3909 c-50 -39 -24 -119 39 -119 78 0 101 103 29 130 -34 13
-38 13 -68 -11z"
/>
<path
d="M6336 3909 c-50 -39 -22 -119 43 -119 75 0 95 104 25 130 -34 13 -38
13 -68 -11z"
/>
<path
d="M3816 3279 c-52 -41 -25 -119 41 -119 69 0 91 100 28 128 -34 16 -38
15 -69 -9z"
/>
<path
d="M4446 3279 c-32 -25 -36 -77 -7 -103 28 -25 79 -17 104 16 17 23 18
31 8 56 -11 26 -46 52 -70 52 -5 0 -20 -9 -35 -21z"
/>
<path
d="M5100 3293 c-50 -18 -68 -84 -32 -116 19 -17 68 -22 88 -9 21 13 34
52 28 77 -5 20 -51 58 -66 54 -2 0 -10 -3 -18 -6z"
/>
<path
d="M5730 3293 c-31 -12 -50 -37 -50 -68 0 -78 111 -91 135 -16 9 28 -12
70 -40 81 -15 6 -27 10 -28 9 -1 0 -9 -3 -17 -6z"
/>
<path
d="M6360 3293 c-73 -27 -62 -133 14 -133 42 0 64 17 72 55 9 48 -42 94
-86 78z"
/>
<path
d="M1939 2658 c-36 -12 -55 -58 -38 -90 16 -31 28 -38 65 -38 77 0 88
107 14 132 -8 3 -27 1 -41 -4z"
/>
<path
d="M2567 2658 c-27 -10 -45 -46 -38 -78 5 -28 34 -50 66 -50 78 0 90
107 15 132 -8 3 -27 1 -43 -4z"
/>
<path
d="M3210 2662 c-49 -16 -68 -83 -32 -115 25 -22 75 -21 95 1 43 47 -5
133 -63 114z"
/>
<path
d="M3840 2662 c-49 -15 -68 -83 -32 -115 24 -22 75 -22 95 1 19 22 23
40 14 74 -7 27 -49 49 -77 40z"
/>
<path
d="M4470 2662 c-30 -10 -50 -36 -50 -67 0 -39 26 -65 66 -65 35 0 47 8
63 38 25 47 -29 110 -79 94z"
/>
<path
d="M5100 2662 c-30 -10 -50 -36 -50 -67 0 -39 26 -65 66 -65 35 0 47 8
63 38 25 47 -29 110 -79 94z"
/>
<path
d="M5730 2662 c-30 -10 -50 -36 -50 -67 0 -78 111 -91 135 -16 14 44
-40 97 -85 83z"
/>
<path
d="M6360 2662 c-48 -15 -64 -67 -34 -110 32 -46 124 -16 124 41 0 46
-47 82 -90 69z"
/>
<path
d="M1924 2022 c-6 -4 -17 -18 -23 -30 -25 -48 23 -104 79 -93 48 9 68
82 32 114 -19 17 -68 22 -88 9z"
/>
<path
d="M2547 2013 c-19 -23 -23 -41 -14 -75 7 -28 43 -46 77 -39 48 9 68 82
32 114 -24 22 -75 22 -95 0z"
/>
<path
d="M3177 2012 c-39 -42 -8 -114 48 -114 57 0 88 78 47 115 -25 22 -75
21 -95 -1z"
/>
<path
d="M3807 2012 c-33 -37 -14 -104 33 -113 34 -7 70 11 77 39 9 34 5 52
-14 75 -21 23 -75 22 -96 -1z"
/>
<path
d="M4437 2012 c-33 -37 -14 -104 33 -113 56 -11 104 45 79 93 -6 12 -17
26 -23 30 -21 14 -73 8 -89 -10z"
/>
<path
d="M5067 2012 c-33 -37 -14 -104 33 -113 56 -11 104 45 79 93 -6 12 -17
26 -23 30 -21 14 -73 8 -89 -10z"
/>
<path
d="M5697 2012 c-22 -24 -22 -75 1 -95 54 -48 133 -1 116 69 -11 45 -86
61 -117 26z"
/>
<path
d="M6326 2008 c-21 -30 -20 -71 2 -91 45 -40 122 -10 122 48 0 59 -91
90 -124 43z"
/>
<path
d="M20 1380 c-41 -41 -11 -113 48 -113 62 0 92 60 56 111 -20 29 -76 30
-104 2z"
/>
<path
d="M656 1384 c-38 -37 -27 -96 20 -114 67 -26 128 66 76 113 -23 21 -76
22 -96 1z"
/>
<path
d="M1294 1392 c-21 -13 -34 -52 -28 -77 7 -30 54 -58 81 -48 53 18 72
83 35 116 -19 17 -68 22 -88 9z"
/>
<path
d="M1911 1374 c-24 -31 -25 -35 -10 -67 31 -67 129 -46 129 28 0 64 -79
90 -119 39z"
/>
<path
d="M2547 1383 c-33 -38 -22 -94 24 -113 27 -11 33 -11 57 7 33 25 41 76
16 104 -22 24 -76 25 -97 2z"
/>
<path
d="M3177 1382 c-34 -38 -16 -101 33 -117 20 -6 59 9 72 29 14 21 8 73
-10 89 -25 22 -75 21 -95 -1z"
/>
<path
d="M3806 1381 c-25 -28 -17 -79 16 -104 64 -48 135 45 81 106 -21 23
-75 22 -97 -2z"
/>
<path
d="M4437 1382 c-48 -53 12 -140 77 -110 14 6 30 24 37 40 10 25 9 33 -8
56 -26 34 -81 42 -106 14z"
/>
<path
d="M5067 1382 c-51 -56 15 -142 82 -107 45 23 49 90 7 117 -21 14 -73 8
-89 -10z"
/>
<path
d="M5697 1382 c-48 -53 11 -138 78 -112 45 17 55 79 19 115 -21 21 -77
19 -97 -3z"
/>
<path
d="M6326 1378 c-36 -51 -6 -111 56 -111 36 0 68 32 68 69 0 58 -92 89
-124 42z"
/>
<path
d="M26 754 c-40 -40 -24 -105 30 -118 62 -16 110 68 65 113 -25 25 -73
27 -95 5z"
/>
<path
d="M656 754 c-61 -61 15 -157 83 -106 53 39 30 122 -34 122 -18 0 -41
-7 -49 -16z"
/>
<path
d="M1280 743 c-50 -64 29 -143 93 -93 20 16 27 31 27 54 0 66 -79 91
-120 39z"
/>
<path
d="M1910 743 c-50 -64 29 -143 93 -93 20 16 27 31 27 54 0 66 -79 91
-120 39z"
/>
<path
d="M2548 753 c-36 -43 -27 -93 22 -113 29 -12 65 -1 82 24 14 21 8 73
-10 89 -24 22 -75 22 -94 0z"
/>
<path
d="M3177 752 c-34 -38 -16 -101 33 -117 20 -6 59 9 72 29 14 21 8 73
-10 89 -25 22 -75 21 -95 -1z"
/>
<path
d="M3807 752 c-17 -19 -22 -68 -9 -88 4 -6 18 -17 30 -23 48 -25 104 23
93 79 -9 48 -82 68 -114 32z"
/>
<path
d="M4436 751 c-25 -27 -18 -79 15 -103 36 -27 76 -15 97 28 15 32 15 36
-5 62 -26 35 -81 42 -107 13z"
/>
<path
d="M5067 752 c-27 -29 -22 -77 10 -102 64 -50 143 29 93 93 -26 33 -78
37 -103 9z"
/>
<path
d="M5695 746 c-22 -33 -15 -75 16 -98 68 -51 144 45 83 106 -25 25 -81
20 -99 -8z"
/>
<path
d="M6325 746 c-22 -33 -15 -75 16 -98 68 -51 144 45 83 106 -25 25 -81
20 -99 -8z"
/>
<path
d="M26 124 c-61 -61 14 -158 82 -107 35 26 41 74 13 102 -25 25 -73 27
-95 5z"
/>
<path
d="M651 114 c-12 -15 -21 -35 -21 -46 0 -24 44 -68 68 -68 33 0 72 38
72 71 0 65 -80 93 -119 43z"
/>
<path
d="M1280 113 c-50 -64 29 -143 93 -93 20 16 27 30 27 55 0 64 -80 89
-120 38z"
/>
<path
d="M1911 114 c-24 -31 -24 -34 -11 -69 26 -69 130 -47 130 29 0 65 -79
91 -119 40z"
/>
<path
d="M2548 123 c-25 -29 -29 -53 -13 -82 23 -45 90 -49 117 -7 14 21 8 73
-10 89 -24 22 -75 22 -94 0z"
/>
<path
d="M3177 122 c-34 -38 -16 -101 33 -117 20 -6 59 9 72 29 14 21 8 73
-10 89 -25 22 -75 21 -95 -1z"
/>
<path
d="M3807 122 c-17 -19 -22 -68 -9 -88 13 -21 52 -34 77 -28 30 7 58 54
48 81 -18 53 -83 72 -116 35z"
/>
<path
d="M4437 122 c-21 -23 -22 -75 -2 -96 38 -38 101 -23 118 28 20 61 -73
116 -116 68z"
/>
<path
d="M5067 122 c-27 -29 -22 -77 10 -102 64 -50 143 29 93 93 -26 33 -78
37 -103 9z"
/>
<path
d="M5700 120 c-41 -41 -7 -120 52 -120 24 0 68 44 68 68 0 59 -79 93
-120 52z"
/>
<path
d="M6329 119 c-28 -28 -22 -76 13 -102 68 -51 143 46 82 107 -22 22 -70
20 -95 -5z"
/>
</g>
</svg>
</Container>
);
};
export default Dots;