GRADIENT
.ART
css
Sign In
<div id="root">
<div class="pool-of-museum-light ga-shared"></div>
<div class="specimen-mounting-ring ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(118px, 100px) scale(calc(max(0, 564) / max(0.000001, 800)), calc(max(0, 576) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
<div class="chrysomela-complete-specimen ga-shared">
<div class="six-articulated-legs ga-shared">
<div class="left-leg-1-articulated ga-shared">
<div class="obsidian-titanium-exoskeleton-6 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
<div class="polished-outer-edge-6 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
</div>
<div class="left-leg-2-articulated ga-shared">
<div class="obsidian-titanium-exoskeleton-5 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
<div class="polished-outer-edge-5 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
</div>
<div class="left-leg-3-articulated ga-shared">
<div class="obsidian-titanium-exoskeleton-4 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
<div class="polished-outer-edge-4 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
</div>
<div class="right-leg-1-articulated ga-shared">
<div class="obsidian-titanium-exoskeleton-3 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
<div class="polished-outer-edge-3 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
</div>
<div class="right-leg-2-articulated ga-shared">
<div class="obsidian-titanium-exoskeleton-2 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
<div class="polished-outer-edge-2 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
</div>
<div class="right-leg-3-articulated ga-shared">
<div class="obsidian-titanium-exoskeleton ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
<div class="polished-outer-edge ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
</div>
</div>
<div class="revealed-anatomy ga-shared">
<div class="underwing-abdomen ga-shared"></div>
<div class="abdominal-segment-1 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(333px, 318px) scale(calc(max(0, 134) / max(0.000001, 800)), calc(max(0, 55) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
<div class="abdominal-segment-2 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(333px, 356px) scale(calc(max(0, 134) / max(0.000001, 800)), calc(max(0, 55) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
<div class="abdominal-segment-3 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(333px, 394px) scale(calc(max(0, 134) / max(0.000001, 800)), calc(max(0, 55) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
<div class="abdominal-segment-4 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(333px, 432px) scale(calc(max(0, 134) / max(0.000001, 800)), calc(max(0, 55) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
<div class="abdominal-segment-5 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(333px, 470px) scale(calc(max(0, 134) / max(0.000001, 800)), calc(max(0, 55) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
</div>
<div class="flight-membranes ga-shared"></div>
<div class="chromatic-wing-assembly ga-shared">
<div class="left-wing-case-open-me ga-shared">
<div class="gold-specular-ridge-2 ga-shared"></div>
<div class="engraved-wing-veins-2 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(278px, 277px) scale(calc(max(0, 123) / max(0.000001, 800)), calc(max(0, 280) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
</div>
<div class="right-wing-case-open-me ga-shared">
<div class="gold-specular-ridge ga-shared"></div>
<div class="engraved-wing-veins ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(399px, 277px) scale(calc(max(0, 123) / max(0.000001, 800)), calc(max(0, 280) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
</div>
</div>
<div class="thorax-and-sensory-crown ga-shared">
<div class="antennae ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
<div class="head-carapace ga-shared"></div>
<div class="left-onyx-eye ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(350px, 204px) scale(calc(max(0, 25) / max(0.000001, 800)), calc(max(0, 30) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
<div class="right-onyx-eye ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(425px, 204px) scale(calc(max(0, 25) / max(0.000001, 800)), calc(max(0, 30) / max(0.000001, 800))); transform-box: view-box;">
<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">
<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>
</g>
</svg>
</div>
</div>
</div>
<div class="specimen-title 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:hidden" role="img" aria-label="C H R Y S O M E L A">
<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>
</div>
<div class="cabinet-annotation 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:hidden" 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">
<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>
</div>
</div>@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;
position: relative;
isolation: isolate;
overflow: hidden;
}
#root .ga-shared {
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 .pool-of-museum-light {
background: radial-gradient(ellipse, rgb(35 71 71) 0%, rgb(18 46 52) 55%, rgb(8 25 31) 100%) 0 0 / 800px 800px no-repeat, linear-gradient(rgb(11 34 41), rgb(11 34 41)) 0 0 / 800px 800px no-repeat;
}
#root .chrysomela-complete-specimen {
filter: drop-shadow(0 16px 12px rgb(2 12 19 / 0.65));
}
#root .underwing-abdomen {
background: radial-gradient(ellipse, rgb(205 178 123) 0%, rgb(114 94 60) 28.28%, rgb(25 44 46) 60.1%, rgb(6 28 32) 70.7%, transparent 70.8%, transparent 100%) 320px 270px / 160px 307px no-repeat;
}
#root .flight-membranes {
filter: opacity(calc(((var(--wing-spread) * 100) / 48) * 1%));
background: radial-gradient(ellipse, rgb(228 189 123 / 0.7) 0%, rgb(167 226 200 / 0.28) 53.03%, rgb(231 211 159 / 0.8) 70.7%, transparent 70.8%, transparent 100%) 397px 290px / 187px 272px no-repeat, radial-gradient(ellipse, rgb(228 189 123 / 0.7) 0%, rgb(167 226 200 / 0.28) 53.03%, rgb(231 211 159 / 0.8) 70.7%, transparent 70.8%, transparent 100%) 216px 290px / 187px 272px no-repeat;
}
#root .chromatic-wing-assembly {
filter: brightness(calc(var(--metallic-sheen) * 1%)) hue-rotate(calc(var(--shell-hue) * 1deg));
}
#root .left-wing-case-open-me {
transform: translate(calc((((0 - 1) * var(--wing-spread)) / 2) * 1px), 0) rotate(calc(((0 - 1) * var(--wing-spread)) * 1deg));
transform-origin: 50% 50%;
filter: drop-shadow(-3px 8px 5px rgb(6 30 35 / 0.7));
}
#root .gold-specular-ridge-2 {
background: radial-gradient(ellipse, rgb(242 238 212 / 0.8) 0%, rgb(204 243 214 / 0.35) 31.82%, transparent 70.7%, transparent 70.8%, transparent 100%) 285px 285px / 29px 251px no-repeat, radial-gradient(ellipse, rgb(201 239 210) 0%, rgb(107 216 178) 19.09%, rgb(31 146 145) 33.94%, rgb(22 78 108) 48.08%, rgb(133 97 168) 59.39%, rgb(226 186 155) 65.75%, rgb(41 88 107) 69.29%, rgb(12 36 42) 70.7%, transparent 70.8%, transparent 100%) 274px 268px / 131px 304px no-repeat;
}
#root .right-wing-case-open-me {
transform: translate(calc(((1 * var(--wing-spread)) / 2) * 1px), 0) rotate(calc((1 * var(--wing-spread)) * 1deg));
transform-origin: 50% 50%;
filter: drop-shadow(3px 8px 5px rgb(6 30 35 / 0.7));
}
#root .gold-specular-ridge {
background: radial-gradient(ellipse, rgb(242 238 212 / 0.8) 0%, rgb(204 243 214 / 0.35) 31.82%, transparent 70.7%, transparent 70.8%, transparent 100%) 402px 285px / 29px 251px no-repeat, radial-gradient(ellipse, rgb(201 239 210) 0%, rgb(107 216 178) 19.09%, rgb(31 146 145) 33.94%, rgb(22 78 108) 48.08%, rgb(133 97 168) 59.39%, rgb(226 186 155) 65.75%, rgb(41 88 107) 69.29%, rgb(12 36 42) 70.7%, transparent 70.8%, transparent 100%) 395px 268px / 131px 304px no-repeat;
}
#root .head-carapace {
background: radial-gradient(ellipse, rgb(77 143 133) 0%, rgb(24 59 68) 49.49%, rgb(181 202 161) 67.16%, rgb(10 34 41) 70.7%, transparent 70.8%, transparent 100%) 354px 185px / 92px 77px no-repeat, radial-gradient(ellipse, rgb(150 215 190) 0%, rgb(50 119 112) 28.28%, rgb(23 62 69) 53.73%, rgb(183 197 153) 67.87%, rgb(11 32 40) 70.7%, transparent 70.8%, transparent 100%) 332px 230px / 136px 104px no-repeat;
}
#root .specimen-title {
left: 180px;
width: max(0px, 440px);
top: 462px;
height: max(0px, 440px);
}
#root .cabinet-annotation {
left: 210px;
width: max(0px, 380px);
top: 531.5px;
height: max(0px, 380px);
} Comments (0)
Customize
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.
Chrysomela | Iridescent Mechanical Beetle
Yoav Kadosh
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.
Colors
Views
153
Code size
27.6 KB
Layers
50
<iframe
src="https://gra.dient.art/embed/4tsf6i8ak9"
title="Chrysomela | Iridescent Mechanical Beetle | GradientArt"
width="800"
height="800"
style="border: 0; max-width: 100%; aspect-ratio: 800 / 800; height: auto;"
loading="lazy"
></iframe>Layers (50)
Cabinet annotation
text
Specimen title
text
Chrysomela / complete specimen
Folder
Thorax and sensory crown
Folder
Right onyx eye
shape
Left onyx eye
shape
Head carapace
radial
Pronotum
radial
Antennae
shape
Chromatic wing assembly
Folder
Right wing case / open me
Folder
Engraved wing veins
shape
Gold specular ridge
radial
Iridescent enamel
radial
Left wing case / open me
Folder
Engraved wing veins
shape
Gold specular ridge
radial
Iridescent enamel
radial
Flight membranes
Folder
Right amber membrane
radial
Left amber membrane
radial
Revealed anatomy
Folder
Abdominal segment 5
shape
Abdominal segment 4
shape
Abdominal segment 3
shape
Abdominal segment 2
shape
Abdominal segment 1
shape
Underwing abdomen
radial
Six articulated legs
Folder
Right leg 3 / articulated
Folder
Polished outer edge
shape
Obsidian titanium exoskeleton
shape
Right leg 2 / articulated
Folder
Polished outer edge
shape
Obsidian titanium exoskeleton
shape
Right leg 1 / articulated
Folder
Polished outer edge
shape
Obsidian titanium exoskeleton
shape
Left leg 3 / articulated
Folder
Polished outer edge
shape
Obsidian titanium exoskeleton
shape
Left leg 2 / articulated
Folder
Polished outer edge
shape
Obsidian titanium exoskeleton
shape
Left leg 1 / articulated
Folder
Polished outer edge
shape
Obsidian titanium exoskeleton
shape
Specimen mounting ring
shape
Pool of museum light
radial
Midnight specimen cabinet
solid
GRADIENT
.ART
css