<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chromatic Silk</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat%3Aital%2Cwght%400%2C400&display=swap");
#root {
--twist: -24;
--tension: 0.8;
--dye: 0;
width: 800px;
height: 670px;
background: none;
position: relative;
overflow: hidden;
isolation: isolate;
}
#root .ga-fill {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-paint {
position: absolute;
inset: 0;
pointer-events: none;
}
#root .ga-svg {
position: absolute;
pointer-events: none;
}
#root .ga-node-47 {
background: radial-gradient(ellipse at 50% 50%, rgb(143 190 201 / 0.5) 0%, rgb(143 190 201 / 0.498566) 2.41%, rgb(143 190 201 / 0.494385) 4.77%, rgb(143 190 201 / 0.48764) 7.09%, rgb(143 190 201 / 0.478516) 9.38%, rgb(143 190 201 / 0.467194) 11.64%, rgb(143 190 201 / 0.453857) 13.86%, rgb(143 190 201 / 0.43869) 16.05%, rgb(143 190 201 / 0.421875) 18.22%, rgb(143 190 201 / 0.403595) 20.37%, rgb(143 190 201 / 0.384033) 22.5%, rgb(143 190 201 / 0.363373) 24.61%, rgb(143 190 201 / 0.341797) 26.7%, rgb(143 190 201 / 0.319489) 28.79%, rgb(143 190 201 / 0.296631) 30.86%, rgb(143 190 201 / 0.273407) 32.93%, rgb(143 190 201 / 0.25) 35%, rgb(143 190 201 / 0.226593) 37.07%, rgb(143 190 201 / 0.203369) 39.14%, rgb(143 190 201 / 0.180511) 41.21%, rgb(143 190 201 / 0.158203) 43.3%, rgb(143 190 201 / 0.136627) 45.39%, rgb(143 190 201 / 0.115967) 47.5%, rgb(143 190 201 / 0.096405) 49.63%, rgb(143 190 201 / 0.078125) 51.78%, rgb(143 190 201 / 0.06131) 53.95%, rgb(143 190 201 / 0.046143) 56.14%, rgb(143 190 201 / 0.032806) 58.36%, rgb(143 190 201 / 0.021484) 60.62%, rgb(143 190 201 / 0.01236) 62.91%, rgb(143 190 201 / 0.005615) 65.23%, rgb(143 190 201 / 0.001434) 67.59%, rgb(143 190 201 / 0) 70%) -300px 150px / 1000px 850px no-repeat, radial-gradient(ellipse at 50% 50%, rgb(228 169 129 / 0.5) 0%, rgb(228 169 129 / 0.498566) 2.41%, rgb(228 169 129 / 0.494385) 4.77%, rgb(228 169 129 / 0.48764) 7.09%, rgb(228 169 129 / 0.478516) 9.38%, rgb(228 169 129 / 0.467194) 11.64%, rgb(228 169 129 / 0.453857) 13.86%, rgb(228 169 129 / 0.43869) 16.05%, rgb(228 169 129 / 0.421875) 18.22%, rgb(228 169 129 / 0.403595) 20.37%, rgb(228 169 129 / 0.384033) 22.5%, rgb(228 169 129 / 0.363373) 24.61%, rgb(228 169 129 / 0.341797) 26.7%, rgb(228 169 129 / 0.319489) 28.79%, rgb(228 169 129 / 0.296631) 30.86%, rgb(228 169 129 / 0.273407) 32.93%, rgb(228 169 129 / 0.25) 35%, rgb(228 169 129 / 0.226593) 37.07%, rgb(228 169 129 / 0.203369) 39.14%, rgb(228 169 129 / 0.180511) 41.21%, rgb(228 169 129 / 0.158203) 43.3%, rgb(228 169 129 / 0.136627) 45.39%, rgb(228 169 129 / 0.115967) 47.5%, rgb(228 169 129 / 0.096405) 49.63%, rgb(228 169 129 / 0.078125) 51.78%, rgb(228 169 129 / 0.06131) 53.95%, rgb(228 169 129 / 0.046143) 56.14%, rgb(228 169 129 / 0.032806) 58.36%, rgb(228 169 129 / 0.021484) 60.62%, rgb(228 169 129 / 0.01236) 62.91%, rgb(228 169 129 / 0.005615) 65.23%, rgb(228 169 129 / 0.001434) 67.59%, rgb(228 169 129 / 0) 70%) 140px -300px / 1060px 1060px no-repeat, linear-gradient(rgb(241 231 223 / 1), rgb(241 231 223 / 1)) 0px 0px / 800px 800px no-repeat;
}
#root .ga-node-4 {
transform: translate(6.791097504584769px, -55.70427081709005px) rotate(340deg) scale(1.3476420454545452, 0.835474006116208);
transform-origin: 50% 50%;
filter: hue-rotate(calc(var(--dye) * 1deg)) drop-shadow(5px 16px 14px rgb(74 48 79 / 0.22));
}
#root .ga-node-46 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-45 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-44 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-43 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-42 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-41 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-40 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-39 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-38 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-37 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-36 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-35 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-34 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-33 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-32 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-31 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-30 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-29 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-28 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-27 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-26 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-25 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-24 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-23 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-22 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-21 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-20 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-19 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-18 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-17 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-16 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-15 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-14 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-13 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-12 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-11 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-10 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-9 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-8 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-7 {
left: 4px;
width: max(0px, 792px);
top: 44px;
height: max(0px, 650px);
}
#root .ga-node-6 {
left: 4px;
width: max(0px, 792px);
top: 40px;
height: max(0px, 650px);
}
#root .ga-node-5 {
left: 4px;
width: max(0px, 792px);
top: 42px;
height: max(0px, 650px);
}
#root .ga-node-3 {
left: 0px;
width: max(0px, 200px);
top: 0px;
height: max(0px, 200px);
}
#root .ga-node-2 {
left: 211px;
width: max(0px, 378px);
top: -143px;
height: max(0px, 378px);
}
#root .ga-node-1 {
left: 150px;
width: max(0px, 500px);
top: 384px;
height: max(0px, 500px);
}
</style>
</head>
<body>
<div id="root">
<div class="ga-node-0 ga-fill">
<div class="ga-node-48 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="position:absolute;inset:0;pointer-events:none" aria-hidden="true">
<defs>
<pattern id="ga-svg-5" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 138.7 C62 119.69999999999999 29 186.7 96 170.7 C154 150.7 129 130.7 194 147.7"/>
</g>
</pattern>
<pattern id="ga-svg-6" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(202 203 221 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 138.7 C62 119.69999999999999 29 186.7 96 170.7 C154 150.7 129 130.7 194 147.7"/>
</g>
</pattern>
<pattern id="ga-svg-7" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(184 186 209 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 138.7 C62 119.69999999999999 29 186.7 96 170.7 C154 150.7 129 130.7 194 147.7"/>
</g>
</pattern>
<pattern id="ga-svg-8" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 129.8 C62 110.80000000000001 29 177.8 96 161.8 C154 141.8 129 121.80000000000001 194 138.8"/>
</g>
</pattern>
<pattern id="ga-svg-9" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(165 154 191 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 129.8 C62 110.80000000000001 29 177.8 96 161.8 C154 141.8 129 121.80000000000001 194 138.8"/>
</g>
</pattern>
<pattern id="ga-svg-10" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(135 120 170 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 129.8 C62 110.80000000000001 29 177.8 96 161.8 C154 141.8 129 121.80000000000001 194 138.8"/>
</g>
</pattern>
<pattern id="ga-svg-11" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 120.9 C62 101.9 29 168.9 96 152.9 C154 132.9 129 112.9 194 129.9"/>
</g>
</pattern>
<pattern id="ga-svg-12" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(125 115 153 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 120.9 C62 101.9 29 168.9 96 152.9 C154 132.9 129 112.9 194 129.9"/>
</g>
</pattern>
<pattern id="ga-svg-13" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(81 68 119 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 120.9 C62 101.9 29 168.9 96 152.9 C154 132.9 129 112.9 194 129.9"/>
</g>
</pattern>
<pattern id="ga-svg-14" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 112 C62 93 29 160 96 144 C154 124 129 104 194 121"/>
</g>
</pattern>
<pattern id="ga-svg-15" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(108 101 129 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 112 C62 93 29 160 96 144 C154 124 129 104 194 121"/>
</g>
</pattern>
<pattern id="ga-svg-16" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(59 50 87 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 112 C62 93 29 160 96 144 C154 124 129 104 194 121"/>
</g>
</pattern>
<pattern id="ga-svg-17" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 103.10000000000001 C62 84.10000000000001 29 151.10000000000002 96 135.10000000000002 C154 115.10000000000001 129 95.10000000000001 194 112.10000000000001"/>
</g>
</pattern>
<pattern id="ga-svg-18" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(149 104 128 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 103.10000000000001 C62 84.10000000000001 29 151.10000000000002 96 135.10000000000002 C154 115.10000000000001 129 95.10000000000001 194 112.10000000000001"/>
</g>
</pattern>
<pattern id="ga-svg-19" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(113 54 86 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 103.10000000000001 C62 84.10000000000001 29 151.10000000000002 96 135.10000000000002 C154 115.10000000000001 129 95.10000000000001 194 112.10000000000001"/>
</g>
</pattern>
<pattern id="ga-svg-20" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 94.2 C62 75.2 29 142.2 96 126.2 C154 106.2 129 86.2 194 103.2"/>
</g>
</pattern>
<pattern id="ga-svg-21" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(195 123 130 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 94.2 C62 75.2 29 142.2 96 126.2 C154 106.2 129 86.2 194 103.2"/>
</g>
</pattern>
<pattern id="ga-svg-22" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(175 79 88 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 94.2 C62 75.2 29 142.2 96 126.2 C154 106.2 129 86.2 194 103.2"/>
</g>
</pattern>
<pattern id="ga-svg-23" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 85.30000000000001 C62 66.30000000000001 29 133.3 96 117.30000000000001 C154 97.30000000000001 129 77.30000000000001 194 94.30000000000001"/>
</g>
</pattern>
<pattern id="ga-svg-24" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(225 169 146 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 85.30000000000001 C62 66.30000000000001 29 133.3 96 117.30000000000001 C154 97.30000000000001 129 77.30000000000001 194 94.30000000000001"/>
</g>
</pattern>
<pattern id="ga-svg-25" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(215 140 109 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 85.30000000000001 C62 66.30000000000001 29 133.3 96 117.30000000000001 C154 97.30000000000001 129 77.30000000000001 194 94.30000000000001"/>
</g>
</pattern>
<pattern id="ga-svg-26" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 76.4 C62 57.400000000000006 29 124.4 96 108.4 C154 88.4 129 68.4 194 85.4"/>
</g>
</pattern>
<pattern id="ga-svg-27" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(239 204 166 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 76.4 C62 57.400000000000006 29 124.4 96 108.4 C154 88.4 129 68.4 194 85.4"/>
</g>
</pattern>
<pattern id="ga-svg-28" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(234 187 136 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 76.4 C62 57.400000000000006 29 124.4 96 108.4 C154 88.4 129 68.4 194 85.4"/>
</g>
</pattern>
<pattern id="ga-svg-29" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 67.5 C62 48.5 29 115.5 96 99.5 C154 79.5 129 59.5 194 76.5"/>
</g>
</pattern>
<pattern id="ga-svg-30" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(248 239 204 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 67.5 C62 48.5 29 115.5 96 99.5 C154 79.5 129 59.5 194 76.5"/>
</g>
</pattern>
<pattern id="ga-svg-31" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(245 233 187 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 67.5 C62 48.5 29 115.5 96 99.5 C154 79.5 129 59.5 194 76.5"/>
</g>
</pattern>
<pattern id="ga-svg-32" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 58.6 C62 39.6 29 106.6 96 90.6 C154 70.6 129 50.6 194 67.6"/>
</g>
</pattern>
<pattern id="ga-svg-33" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(191 235 219 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 58.6 C62 39.6 29 106.6 96 90.6 C154 70.6 129 50.6 194 67.6"/>
</g>
</pattern>
<pattern id="ga-svg-34" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(169 228 207 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 58.6 C62 39.6 29 106.6 96 90.6 C154 70.6 129 50.6 194 67.6"/>
</g>
</pattern>
<pattern id="ga-svg-35" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 49.7 C62 30.700000000000003 29 97.7 96 81.7 C154 61.7 129 41.7 194 58.7"/>
</g>
</pattern>
<pattern id="ga-svg-36" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(128 206 204 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 49.7 C62 30.700000000000003 29 97.7 96 81.7 C154 61.7 129 41.7 194 58.7"/>
</g>
</pattern>
<pattern id="ga-svg-37" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(85 189 187 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 49.7 C62 30.700000000000003 29 97.7 96 81.7 C154 61.7 129 41.7 194 58.7"/>
</g>
</pattern>
<pattern id="ga-svg-38" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 40.8 C62 21.799999999999997 29 88.8 96 72.8 C154 52.8 129 32.8 194 49.8"/>
</g>
</pattern>
<pattern id="ga-svg-39" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(92 168 180 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 40.8 C62 21.799999999999997 29 88.8 96 72.8 C154 52.8 129 32.8 194 49.8"/>
</g>
</pattern>
<pattern id="ga-svg-40" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(37 139 155 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 40.8 C62 21.799999999999997 29 88.8 96 72.8 C154 52.8 129 32.8 194 49.8"/>
</g>
</pattern>
<pattern id="ga-svg-41" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 31.9 C62 12.899999999999999 29 79.9 96 63.9 C154 43.9 129 23.9 194 40.9"/>
</g>
</pattern>
<pattern id="ga-svg-42" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(88 132 149 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 31.9 C62 12.899999999999999 29 79.9 96 63.9 C154 43.9 129 23.9 194 40.9"/>
</g>
</pattern>
<pattern id="ga-svg-43" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(32 91 114 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 31.9 C62 12.899999999999999 29 79.9 96 63.9 C154 43.9 129 23.9 194 40.9"/>
</g>
</pattern>
<pattern id="ga-svg-44" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(255 248 230 / 0.17279999999999998)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 23 C62 4 29 71 96 55 C154 35 129 15 194 32"/>
</g>
</pattern>
<pattern id="ga-svg-45" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(79 109 128 / 1)" stroke-width="5" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 23 C62 4 29 71 96 55 C154 35 129 15 194 32"/>
</g>
</pattern>
<pattern id="ga-svg-46" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="none" stroke="rgb(20 60 86 / 1)" stroke-width="9" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M6 23 C62 4 29 71 96 55 C154 35 129 15 194 32"/>
</g>
</pattern>
</defs>
</svg>
</div>
<div class="ga-node-47 ga-fill"></div>
<div class="ga-node-4 ga-fill">
<div class="ga-node-46 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-46)"/>
</svg>
</div>
<div class="ga-node-45 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-45)"/>
</svg>
</div>
<div class="ga-node-44 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-44)"/>
</svg>
</div>
<div class="ga-node-43 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-43)"/>
</svg>
</div>
<div class="ga-node-42 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-42)"/>
</svg>
</div>
<div class="ga-node-41 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-41)"/>
</svg>
</div>
<div class="ga-node-40 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-40)"/>
</svg>
</div>
<div class="ga-node-39 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-39)"/>
</svg>
</div>
<div class="ga-node-38 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-38)"/>
</svg>
</div>
<div class="ga-node-37 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-37)"/>
</svg>
</div>
<div class="ga-node-36 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-36)"/>
</svg>
</div>
<div class="ga-node-35 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-35)"/>
</svg>
</div>
<div class="ga-node-34 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-34)"/>
</svg>
</div>
<div class="ga-node-33 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-33)"/>
</svg>
</div>
<div class="ga-node-32 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-32)"/>
</svg>
</div>
<div class="ga-node-31 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-31)"/>
</svg>
</div>
<div class="ga-node-30 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-30)"/>
</svg>
</div>
<div class="ga-node-29 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-29)"/>
</svg>
</div>
<div class="ga-node-28 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-28)"/>
</svg>
</div>
<div class="ga-node-27 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-27)"/>
</svg>
</div>
<div class="ga-node-26 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-26)"/>
</svg>
</div>
<div class="ga-node-25 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-25)"/>
</svg>
</div>
<div class="ga-node-24 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-24)"/>
</svg>
</div>
<div class="ga-node-23 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-23)"/>
</svg>
</div>
<div class="ga-node-22 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-22)"/>
</svg>
</div>
<div class="ga-node-21 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-21)"/>
</svg>
</div>
<div class="ga-node-20 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-20)"/>
</svg>
</div>
<div class="ga-node-19 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-19)"/>
</svg>
</div>
<div class="ga-node-18 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-18)"/>
</svg>
</div>
<div class="ga-node-17 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-17)"/>
</svg>
</div>
<div class="ga-node-16 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-16)"/>
</svg>
</div>
<div class="ga-node-15 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-15)"/>
</svg>
</div>
<div class="ga-node-14 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-14)"/>
</svg>
</div>
<div class="ga-node-13 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-13)"/>
</svg>
</div>
<div class="ga-node-12 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-12)"/>
</svg>
</div>
<div class="ga-node-11 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-11)"/>
</svg>
</div>
<div class="ga-node-10 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-10)"/>
</svg>
</div>
<div class="ga-node-9 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-9)"/>
</svg>
</div>
<div class="ga-node-8 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-8)"/>
</svg>
</div>
<div class="ga-node-7 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-7)"/>
</svg>
</div>
<div class="ga-node-6 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-6)"/>
</svg>
</div>
<div class="ga-node-5 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-5)"/>
</svg>
</div>
</div>
<div class="ga-node-3 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="noise">
<pattern id="ga-svg-3" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<filter id="ga-svg-3-content" x="0" y="0" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.72" numOctaves="3" seed="901" stitchTiles="stitch"/>
<feColorMatrix type="saturate" values="0"/>
<feComponentTransfer>
<feFuncR type="linear" slope="1.6" intercept="-0.30000000000000004"/>
<feFuncG type="linear" slope="1.6" intercept="-0.30000000000000004"/>
<feFuncB type="linear" slope="1.6" intercept="-0.30000000000000004"/>
</feComponentTransfer>
<feComponentTransfer color-interpolation-filters="sRGB">
<feFuncR type="linear" slope="0.4392156862745098"/>
<feFuncG type="linear" slope="0.34901960784313724"/>
<feFuncB type="linear" slope="0.3176470588235294"/>
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
</filter>
<rect width="100%" height="100%" filter="url(#ga-svg-3-content)" opacity="0.065"/>
</svg>
</pattern>
<rect style="x: calc(-200px * 0 / max(0.000001, 200)); width: calc(200px * 800 / max(0.000001, 200)); y: calc(-200px * 0 / max(0.000001, 200)); height: calc(200px * 670 / max(0.000001, 200));" fill="url(#ga-svg-3)"/>
</svg>
</div>
<div class="ga-node-2 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="CHROMATIC / SILK">
<pattern id="ga-svg-2" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<text font-family=""Montserrat"" font-size="7" font-weight="400" letter-spacing="0.5" text-anchor="middle" fill="rgb(59 82 97 / 1)" stroke="rgb(30 50 80 / 1)" stroke-width="0" stroke-linejoin="round" paint-order="stroke fill" xml:space="preserve" transform="rotate(0 100 100)"><tspan x="100" y="102.45">CHROMATIC / SILK</tspan></text>
</svg>
</pattern>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-2)"/>
</svg>
</div>
<div class="ga-node-1 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="FOURTEEN STRANDS. ONE CONTINUOUS GESTURE.">
<pattern id="ga-svg-1" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<text font-family=""Montserrat"" font-size="4" font-weight="400" letter-spacing="0.5" text-anchor="middle" fill="rgb(121 106 109 / 1)" stroke="rgb(30 50 80 / 1)" stroke-width="0" stroke-linejoin="round" paint-order="stroke fill" xml:space="preserve" transform="rotate(0 100 100)"><tspan x="100" y="101.4">FOURTEEN STRANDS. ONE CONTINUOUS GESTURE.</tspan></text>
</svg>
</pattern>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-1)"/>
</svg>
</div>
</div>
</div>
</body>
</html>Try different values. Your changes stay in this preview and never change the saved project.
Rotate all fourteen strands around the center of the canvas.
Compress or unfurl the woven gesture.
Recolor the entire silk spectrum while preserving the shading.
Fourteen individually layered ribbons weave one flowing gesture above a porcelain ground. Twist the composition, change its tension, and dye the entire spectrum at once. Nested transforms, SVG paths, colored shadows and subtle grain remain fully editable.