<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chrysomela | Iridescent Mechanical Beetle</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat%3Aital%2Cwght%400%2C400&display=swap");
#root {
--wing-spread: 12;
--shell-hue: 0;
--metallic-sheen: 115;
width: 800px;
height: 800px;
background: none;
position: relative;
overflow: hidden;
isolation: isolate;
}
#root .ga-node-0 {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-node-44 {
position: absolute;
inset: 0;
isolation: isolate;
background: radial-gradient(ellipse at 50% 50%, rgb(35 71 71 / 1) 0%, rgb(18 46 52 / 1) 55%, rgb(8 25 31 / 1) 100%) 0px 0px / 800px 800px no-repeat no-repeat, linear-gradient(rgb(11 34 41 / 1), rgb(11 34 41 / 1)) 0px 0px / 800px 800px no-repeat no-repeat;
}
#root .ga-node-43 {
position: absolute;
pointer-events: none;
left: 118px;
width: max(0px, 564px);
top: 100px;
height: max(0px, 576px);
}
#root .ga-node-3 {
position: absolute;
inset: 0;
isolation: isolate;
filter: drop-shadow(0px 16px 12px rgb(2 12 19 / 0.65));
}
#root .ga-node-24 {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-node-40 {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-node-42 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-41 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-37 {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-node-39 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-38 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-34 {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-node-36 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-35 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-31 {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-node-33 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-32 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-28 {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-node-30 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-29 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-25 {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-node-27 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-26 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-17 {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-node-23 {
position: absolute;
inset: 0;
isolation: isolate;
background: radial-gradient(ellipse at 50% 50%, rgb(205 178 123 / 1) 0%, rgb(114 94 60 / 1) 28.28%, rgb(25 44 46 / 1) 60.1%, rgb(6 28 32 / 1) 70.7%, rgb(0 0 0 / 0) 70.8%, rgb(0 0 0 / 0) 100%) 320px 270px / 160px 307px no-repeat no-repeat;
}
#root .ga-node-22 {
position: absolute;
pointer-events: none;
left: 333px;
width: max(0px, 134px);
top: 318px;
height: max(0px, 55px);
}
#root .ga-node-21 {
position: absolute;
pointer-events: none;
left: 333px;
width: max(0px, 134px);
top: 356px;
height: max(0px, 55px);
}
#root .ga-node-20 {
position: absolute;
pointer-events: none;
left: 333px;
width: max(0px, 134px);
top: 394px;
height: max(0px, 55px);
}
#root .ga-node-19 {
position: absolute;
pointer-events: none;
left: 333px;
width: max(0px, 134px);
top: 432px;
height: max(0px, 55px);
}
#root .ga-node-18 {
position: absolute;
pointer-events: none;
left: 333px;
width: max(0px, 134px);
top: 470px;
height: max(0px, 55px);
}
#root .ga-node-16 {
position: absolute;
inset: 0;
isolation: isolate;
filter: opacity(calc(calc(((var(--wing-spread) * 100) / 48)) * 1%));
background: radial-gradient(ellipse at 50% 50%, rgb(228 189 123 / 0.7) 0%, rgb(167 226 200 / 0.28) 53.03%, rgb(231 211 159 / 0.8) 70.7%, rgb(0 0 0 / 0) 70.8%, rgb(0 0 0 / 0) 100%) 397px 290px / 187px 272px no-repeat no-repeat, radial-gradient(ellipse at 50% 50%, rgb(228 189 123 / 0.7) 0%, rgb(167 226 200 / 0.28) 53.03%, rgb(231 211 159 / 0.8) 70.7%, rgb(0 0 0 / 0) 70.8%, rgb(0 0 0 / 0) 100%) 216px 290px / 187px 272px no-repeat no-repeat;
}
#root .ga-node-9 {
position: absolute;
inset: 0;
isolation: isolate;
filter: brightness(calc(var(--metallic-sheen) * 1%)) hue-rotate(calc(var(--shell-hue) * 1deg));
}
#root .ga-node-13 {
position: absolute;
inset: 0;
isolation: isolate;
transform: translate(calc(calc((((0 - 1) * var(--wing-spread)) / 2)) * 1px), 0px) rotate(calc(calc(((0 - 1) * var(--wing-spread))) * 1deg));
transform-origin: 50% 50%;
filter: drop-shadow(-3px 8px 5px rgb(6 30 35 / 0.7));
}
#root .ga-node-15 {
position: absolute;
inset: 0;
isolation: isolate;
background: radial-gradient(ellipse at 50% 50%, rgb(242 238 212 / 0.8) 0%, rgb(204 243 214 / 0.35) 31.82%, rgb(0 0 0 / 0) 70.7%, rgb(0 0 0 / 0) 70.8%, rgb(0 0 0 / 0) 100%) 285px 285px / 29px 251px no-repeat no-repeat, radial-gradient(ellipse at 50% 50%, rgb(201 239 210 / 1) 0%, rgb(107 216 178 / 1) 19.09%, rgb(31 146 145 / 1) 33.94%, rgb(22 78 108 / 1) 48.08%, rgb(133 97 168 / 1) 59.39%, rgb(226 186 155 / 1) 65.75%, rgb(41 88 107 / 1) 69.29%, rgb(12 36 42 / 1) 70.7%, rgb(0 0 0 / 0) 70.8%, rgb(0 0 0 / 0) 100%) 274px 268px / 131px 304px no-repeat no-repeat;
}
#root .ga-node-14 {
position: absolute;
pointer-events: none;
left: 278px;
width: max(0px, 123px);
top: 277px;
height: max(0px, 280px);
}
#root .ga-node-10 {
position: absolute;
inset: 0;
isolation: isolate;
transform: translate(calc(calc(((1 * var(--wing-spread)) / 2)) * 1px), 0px) rotate(calc(calc((1 * var(--wing-spread))) * 1deg));
transform-origin: 50% 50%;
filter: drop-shadow(3px 8px 5px rgb(6 30 35 / 0.7));
}
#root .ga-node-12 {
position: absolute;
inset: 0;
isolation: isolate;
background: radial-gradient(ellipse at 50% 50%, rgb(242 238 212 / 0.8) 0%, rgb(204 243 214 / 0.35) 31.82%, rgb(0 0 0 / 0) 70.7%, rgb(0 0 0 / 0) 70.8%, rgb(0 0 0 / 0) 100%) 402px 285px / 29px 251px no-repeat no-repeat, radial-gradient(ellipse at 50% 50%, rgb(201 239 210 / 1) 0%, rgb(107 216 178 / 1) 19.09%, rgb(31 146 145 / 1) 33.94%, rgb(22 78 108 / 1) 48.08%, rgb(133 97 168 / 1) 59.39%, rgb(226 186 155 / 1) 65.75%, rgb(41 88 107 / 1) 69.29%, rgb(12 36 42 / 1) 70.7%, rgb(0 0 0 / 0) 70.8%, rgb(0 0 0 / 0) 100%) 395px 268px / 131px 304px no-repeat no-repeat;
}
#root .ga-node-11 {
position: absolute;
pointer-events: none;
left: 399px;
width: max(0px, 123px);
top: 277px;
height: max(0px, 280px);
}
#root .ga-node-4 {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-node-8 {
position: absolute;
pointer-events: none;
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-7 {
position: absolute;
inset: 0;
isolation: isolate;
background: radial-gradient(ellipse at 50% 50%, rgb(77 143 133 / 1) 0%, rgb(24 59 68 / 1) 49.49%, rgb(181 202 161 / 1) 67.16%, rgb(10 34 41 / 1) 70.7%, rgb(0 0 0 / 0) 70.8%, rgb(0 0 0 / 0) 100%) 354px 185px / 92px 77px no-repeat no-repeat, radial-gradient(ellipse at 50% 50%, rgb(150 215 190 / 1) 0%, rgb(50 119 112 / 1) 28.28%, rgb(23 62 69 / 1) 53.73%, rgb(183 197 153 / 1) 67.87%, rgb(11 32 40 / 1) 70.7%, rgb(0 0 0 / 0) 70.8%, rgb(0 0 0 / 0) 100%) 332px 230px / 136px 104px no-repeat no-repeat;
}
#root .ga-node-6 {
position: absolute;
pointer-events: none;
left: 350px;
width: max(0px, 25px);
top: 204px;
height: max(0px, 30px);
}
#root .ga-node-5 {
position: absolute;
pointer-events: none;
left: 425px;
width: max(0px, 25px);
top: 204px;
height: max(0px, 30px);
}
#root .ga-node-2 {
position: absolute;
pointer-events: none;
left: 180px;
width: max(0px, 440px);
top: 462px;
height: max(0px, 440px);
}
#root .ga-node-1 {
position: absolute;
pointer-events: none;
left: 210px;
width: max(0px, 380px);
top: 531.5px;
height: max(0px, 380px);
}
</style>
</head>
<body>
<div id="root">
<div class="ga-node-0">
<div class="ga-node-44"></div>
<div class="ga-node-43">
<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">
<defs>
<pattern id="ga-svg-43" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(115 155 140 / 0.22)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-43)"/>
</svg>
</div>
<div class="ga-node-3">
<div class="ga-node-24">
<div class="ga-node-40">
<div class="ga-node-42">
<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">
<defs>
<pattern id="ga-svg-42" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="rgb(38 71 76 / 1)" stroke="rgb(217 183 120 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M86.25 73 L67.25 56.75 L55.75 72 L45.25 73 L54.5 75.5 L68.5 60.25 L85.25 76Z"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-42)"/>
</svg>
</div>
<div class="ga-node-41">
<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">
<defs>
<pattern id="ga-svg-41" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(159 180 164 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M84.5 73.5 L67.75 58 L55.25 73.25 L46.75 73.75"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-41)"/>
</svg>
</div>
</div>
<div class="ga-node-37">
<div class="ga-node-39">
<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">
<defs>
<pattern id="ga-svg-39" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="rgb(38 71 76 / 1)" stroke="rgb(217 183 120 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M86.25 93 L67.25 89.75 L55.75 105 L45.25 106 L54.5 108.5 L68.5 93.25 L85.25 96Z"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-39)"/>
</svg>
</div>
<div class="ga-node-38">
<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">
<defs>
<pattern id="ga-svg-38" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(159 180 164 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M84.5 93.5 L67.75 91 L55.25 106.25 L46.75 106.75"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-38)"/>
</svg>
</div>
</div>
<div class="ga-node-34">
<div class="ga-node-36">
<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">
<defs>
<pattern id="ga-svg-36" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="rgb(38 71 76 / 1)" stroke="rgb(217 183 120 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M86.25 113 L67.25 122.75 L55.75 138 L45.25 139 L54.5 141.5 L68.5 126.25 L85.25 116Z"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-36)"/>
</svg>
</div>
<div class="ga-node-35">
<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">
<defs>
<pattern id="ga-svg-35" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(159 180 164 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M84.5 113.5 L67.75 124 L55.25 139.25 L46.75 139.75"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-35)"/>
</svg>
</div>
</div>
<div class="ga-node-31">
<div class="ga-node-33">
<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">
<defs>
<pattern id="ga-svg-33" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="rgb(38 71 76 / 1)" stroke="rgb(217 183 120 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M113.75 73 L132.75 56.75 L144.25 72 L154.75 73 L145.5 75.5 L131.5 60.25 L114.75 76Z"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-33)"/>
</svg>
</div>
<div class="ga-node-32">
<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">
<defs>
<pattern id="ga-svg-32" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(159 180 164 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M115.5 73.5 L132.25 58 L144.75 73.25 L153.25 73.75"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-32)"/>
</svg>
</div>
</div>
<div class="ga-node-28">
<div class="ga-node-30">
<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">
<defs>
<pattern id="ga-svg-30" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="rgb(38 71 76 / 1)" stroke="rgb(217 183 120 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M113.75 93 L132.75 89.75 L144.25 105 L154.75 106 L145.5 108.5 L131.5 93.25 L114.75 96Z"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-30)"/>
</svg>
</div>
<div class="ga-node-29">
<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">
<defs>
<pattern id="ga-svg-29" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(159 180 164 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M115.5 93.5 L132.25 91 L144.75 106.25 L153.25 106.75"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-29)"/>
</svg>
</div>
</div>
<div class="ga-node-25">
<div class="ga-node-27">
<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">
<defs>
<pattern id="ga-svg-27" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="rgb(38 71 76 / 1)" stroke="rgb(217 183 120 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M113.75 113 L132.75 122.75 L144.25 138 L154.75 139 L145.5 141.5 L131.5 126.25 L114.75 116Z"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-27)"/>
</svg>
</div>
<div class="ga-node-26">
<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">
<defs>
<pattern id="ga-svg-26" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(159 180 164 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M115.5 113.5 L132.25 124 L144.75 139.25 L153.25 139.75"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-26)"/>
</svg>
</div>
</div>
</div>
<div class="ga-node-17">
<div class="ga-node-23"></div>
<div class="ga-node-22">
<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">
<defs>
<pattern id="ga-svg-22" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(208 188 131 / 0.75)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89" ry="89"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-22)"/>
</svg>
</div>
<div class="ga-node-21">
<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">
<defs>
<pattern id="ga-svg-21" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(208 188 131 / 0.75)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89" ry="89"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-21)"/>
</svg>
</div>
<div class="ga-node-20">
<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">
<defs>
<pattern id="ga-svg-20" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(208 188 131 / 0.75)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89" ry="89"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-20)"/>
</svg>
</div>
<div class="ga-node-19">
<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">
<defs>
<pattern id="ga-svg-19" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(208 188 131 / 0.75)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89" ry="89"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-19)"/>
</svg>
</div>
<div class="ga-node-18">
<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">
<defs>
<pattern id="ga-svg-18" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(208 188 131 / 0.75)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89" ry="89"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-18)"/>
</svg>
</div>
</div>
<div class="ga-node-16"></div>
<div class="ga-node-9">
<div class="ga-node-13">
<div class="ga-node-15"></div>
<div class="ga-node-14">
<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">
<defs>
<pattern id="ga-svg-14" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(180 230 211 / 0.32)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M100 16 C30 65 25 130 100 184 M109 18 C56 70 52 130 109 181 M118 24 C82 75 80 124 118 173"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-14)"/>
</svg>
</div>
</div>
<div class="ga-node-10">
<div class="ga-node-12"></div>
<div class="ga-node-11">
<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">
<defs>
<pattern id="ga-svg-11" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(180 230 211 / 0.32)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M100 16 C30 65 25 130 100 184 M109 18 C56 70 52 130 109 181 M118 24 C82 75 80 124 118 173"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-11)"/>
</svg>
</div>
</div>
</div>
<div class="ga-node-4">
<div class="ga-node-8">
<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">
<defs>
<pattern id="ga-svg-8" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="none" stroke="rgb(217 183 120 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M91 59 Q76 45 70 35 M109 59 Q124 45 130 35"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-8)"/>
</svg>
</div>
<div class="ga-node-7"></div>
<div class="ga-node-6">
<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">
<defs>
<pattern id="ga-svg-6" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="rgb(4 11 16 / 1)" stroke="rgb(121 175 153 / 1)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89" ry="89"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-6)"/>
</svg>
</div>
<div class="ga-node-5">
<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">
<defs>
<pattern id="ga-svg-5" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<g fill="rgb(4 11 16 / 1)" stroke="rgb(121 175 153 / 1)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89" ry="89"/>
</g>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-5)"/>
</svg>
</div>
</div>
</div>
<div class="ga-node-2">
<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="C H R Y S O M E L A">
<defs>
<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="10" font-weight="400" letter-spacing="0" text-anchor="middle" fill="rgb(211 228 206 / 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="103.5">C H R Y S O M E L A</tspan></text>
</svg>
</pattern>
</defs>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-2)"/>
</svg>
</div>
<div class="ga-node-1">
<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="T I T A N I U M / I N T E R F E R E N C E S T U D Y">
<defs>
<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="5" font-weight="400" letter-spacing="0" text-anchor="middle" fill="rgb(147 185 174 / 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.75">T I T A N I U M / I N T E R F E R E N C E S T U D Y</tspan></text>
</svg>
</pattern>
</defs>
<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.
Open the jewel-like wing cases to reveal the flight membranes.
Shift the iridescent enamel through the color spectrum.
Tune the polished wing highlights.
A jewel-box study in titanium, jade and interference color. Open Wing spread to reveal amber flight membranes and a segmented abdomen; rotate Shell hue and tune Metallic sheen. Every leg and wing is a nested, editable assembly.