Gemini 3.7 Flash: Model Card, API Pricing, and Sample Coding Outputs
Google's documented limits, capabilities, pricing, and two clearly scoped archived code examples.
Co-Founder & Lead Programmer of AcceleratedLogic AI
Model ID, limits, and supported inputs
gemini-3.7-flash. Its model page documents a 1,048,576-token input limit and a 65,536-token output limit. Inputs include text, images, video, audio, and PDF; output is text. The page lists function calling, code execution, file search, search grounding, structured output, and URL context among its supported capabilities. Computer use is marked Preview.minimal is not accepted for this model. Image generation and audio generation are not listed as supported outputs. These details are version-sensitive; consult the live model page before configuring a production integration.API pricing and data terms
Archived code-generation examples
SVG sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photorealistic 3D Glass Sphere with Origami Crane</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: radial-gradient(circle at 50% 30%, #16192b 0%, #090a10 70%, #030407 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.container {
position: relative;
width: 100vw;
height: 100vh;
max-width: 1000px;
max-height: 1000px;
display: flex;
justify-content: center;
align-items: center;
}
svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.8));
}
</style>
</head>
<body>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="100%" height="100%">
<defs>
<!-- Ground & Ambient Shadows -->
<radialGradient id="groundFloor" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#000000" stop-opacity="0.7"/>
<stop offset="40%" stop-color="#000000" stop-opacity="0.4"/>
<stop offset="75%" stop-color="#04060a" stop-opacity="0.1"/>
<stop offset="100%" stop-color="#04060a" stop-opacity="0"/>
</radialGradient>
<radialGradient id="contactShadow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#000000" stop-opacity="0.95"/>
<stop offset="25%" stop-color="#000000" stop-opacity="0.7"/>
<stop offset="60%" stop-color="#020408" stop-opacity="0.2"/>
<stop offset="100%" stop-color="#020408" stop-opacity="0"/>
</radialGradient>
<!-- Caustic Glow Under Glass -->
<radialGradient id="causticGround" cx="45%" cy="45%" r="50%">
<stop offset="0%" stop-color="#6df0ff" stop-opacity="0.55"/>
<stop offset="25%" stop-color="#2d8bba" stop-opacity="0.3"/>
<stop offset="55%" stop-color="#c58bff" stop-opacity="0.12"/>
<stop offset="85%" stop-color="#0a1828" stop-opacity="0.03"/>
<stop offset="100%" stop-color="#000000" stop-opacity="0"/>
</radialGradient>
<!-- Sphere Environment Base & Rim Backing -->
<radialGradient id="sphereBackdrop" cx="38%" cy="32%" r="68%">
<stop offset="0%" stop-color="#1b2438" stop-opacity="0.25"/>
<stop offset="45%" stop-color="#0a101d" stop-opacity="0.5"/>
<stop offset="75%" stop-color="#04070f" stop-opacity="0.75"/>
<stop offset="92%" stop-color="#152942" stop-opacity="0.85"/>
<stop offset="100%" stop-color="#4ce8ff" stop-opacity="0.95"/>
</radialGradient>
<!-- Dark Inner Absorption Gradient (Thickness) -->
<radialGradient id="glassThickness" cx="50%" cy="50%" r="50%">
<stop offset="70%" stop-color="#000000" stop-opacity="0"/>
<stop offset="88%" stop-color="#020914" stop-opacity="0.35"/>
<stop offset="96%" stop-color="#08223c" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#3ae7ff" stop-opacity="0.9"/>
</radialGradient>
<!-- Inner Caustic Orb -->
<radialGradient id="innerCausticGlow" cx="42%" cy="65%" r="45%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.45"/>
<stop offset="25%" stop-color="#55e1ff" stop-opacity="0.25"/>
<stop offset="55%" stop-color="#9d4edd" stop-opacity="0.1"/>
<stop offset="100%" stop-color="#000000" stop-opacity="0"/>
</radialGradient>
<!-- Front Glass Fresnel Reflection Envelope -->
<radialGradient id="fresnelFront" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.15"/>
<stop offset="40%" stop-color="#ffffff" stop-opacity="0.02"/>
<stop offset="75%" stop-color="#4aa8ff" stop-opacity="0.08"/>
<stop offset="94%" stop-color="#70e5ff" stop-opacity="0.4"/>
<stop offset="98%" stop-color="#ffffff" stop-opacity="0.85"/>
<stop offset="100%" stop-color="#2675a8" stop-opacity="0.2"/>
</radialGradient>
<!-- Primary Key Light Highlight (Softbox Studio Reflection) -->
<linearGradient id="mainSoftbox" x1="0%" y1="0%" x2="70%" y2="80%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.95"/>
<stop offset="20%" stop-color="#eaf9ff" stop-opacity="0.8"/>
<stop offset="55%" stop-color="#80d4ff" stop-opacity="0.25"/>
<stop offset="85%" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
<!-- Secondary Backlight Highlight -->
<linearGradient id="secondaryGlow" x1="100%" y1="100%" x2="20%" y2="20%">
<stop offset="0%" stop-color="#845ec2" stop-opacity="0.6"/>
<stop offset="35%" stop-color="#d65db1" stop-opacity="0.2"/>
<stop offset="70%" stop-color="#ff6f91" stop-opacity="0"/>
</linearGradient>
<!-- Bottom Ground Bounce / Refraction Arch -->
<linearGradient id="bottomBounce" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#4eedff" stop-opacity="0.75"/>
<stop offset="20%" stop-color="#005b99" stop-opacity="0.4"/>
<stop offset="60%" stop-color="#001829" stop-opacity="0"/>
</linearGradient>
<!-- ================= ORIGAMI CRANE GRADIENTS ================= -->
<!-- Paper Textures and Realistic Light/Shade Facets -->
<!-- Left Wing Main Top (Keylight Lit) -->
<linearGradient id="p_left_wing_top" x1="30%" y1="10%" x2="80%" y2="90%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="45%" stop-color="#e3ecf5"/>
<stop offset="100%" stop-color="#adc4d9"/>
</linearGradient>
<!-- Left Wing Outer Fold -->
<linearGradient id="p_left_wing_mid" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#e1ebf5"/>
<stop offset="50%" stop-color="#bacddb"/>
<stop offset="100%" stop-color="#7d9cb8"/>
</linearGradient>
<!-- Left Wing Underside Shadow -->
<linearGradient id="p_left_wing_under" x1="0%" y1="30%" x2="100%" y2="70%">
<stop offset="0%" stop-color="#46627f"/>
<stop offset="60%" stop-color="#2d4359"/>
<stop offset="100%" stop-color="#1d2e3f"/>
</linearGradient>
<!-- Right Wing Back Turn -->
<linearGradient id="p_right_wing_top" x1="10%" y1="0%" x2="90%" y2="100%">
<stop offset="0%" stop-color="#c2daf0"/>
<stop offset="50%" stop-color="#8aa6bf"/>
<stop offset="100%" stop-color="#46627a"/>
</linearGradient>
<linearGradient id="p_right_wing_back" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#799cb8"/>
<stop offset="100%" stop-color="#3c5770"/>
</linearGradient>
<!-- Body Facets -->
<linearGradient id="p_body_front_left" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="60%" stop-color="#d6e4f0"/>
<stop offset="100%" stop-color="#9ab5cc"/>
</linearGradient>
<linearGradient id="p_body_front_right" x1="0%" y1="0%" x2="80%" y2="100%">
<stop offset="0%" stop-color="#bacfe3"/>
<stop offset="60%" stop-color="#7d9db8"/>
<stop offset="100%" stop-color="#4e6d87"/>
</linearGradient>
<linearGradient id="p_body_keel_dark" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#334b61"/>
<stop offset="100%" stop-color="#1c2d3d"/>
</linearGradient>
<linearGradient id="p_body_top_crease" x1="0%" y1="0%" x2="100%" y2="50%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#c9dded"/>
</linearGradient>
<!-- Tail Facets -->
<linearGradient id="p_tail_left" x1="20%" y1="0%" x2="80%" y2="100%">
<stop offset="0%" stop-color="#dbe8f5"/>
<stop offset="50%" stop-color="#9abddb"/>
<stop offset="100%" stop-color="#557591"/>
</linearGradient>
<linearGradient id="p_tail_underside" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3a566f"/>
<stop offset="100%" stop-color="#1a2b38"/>
</linearGradient>
<!-- Neck Facets -->
<linearGradient id="p_neck_left" x1="30%" y1="0%" x2="70%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="40%" stop-color="#d6e5f2"/>
<stop offset="100%" stop-color="#95b5cf"/>
</linearGradient>
<linearGradient id="p_neck_right" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#8cb0cc"/>
<stop offset="70%" stop-color="#4b6d87"/>
<stop offset="100%" stop-color="#2c4457"/>
</linearGradient>
<!-- Head & Beak Facets -->
<linearGradient id="p_head_crown" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="60%" stop-color="#c5ddf0"/>
<stop offset="100%" stop-color="#80a5c4"/>
</linearGradient>
<linearGradient id="p_head_side" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a4c6e3"/>
<stop offset="100%" stop-color="#3a5870"/>
</linearGradient>
<linearGradient id="p_beak_tip" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffb88c"/>
<stop offset="100%" stop-color="#de6262"/>
</linearGradient>
<!-- Internal Crane Warm Subsurface Glow -->
<radialGradient id="craneSubsurface" cx="45%" cy="45%" r="50%">
<stop offset="0%" stop-color="#ffeedd" stop-opacity="0.3"/>
<stop offset="60%" stop-color="#8adfff" stop-opacity="0.1"/>
<stop offset="100%" stop-color="#000000" stop-opacity="0"/>
</radialGradient>
<!-- Filters for Realistic Optics -->
<!-- Deep Blur for Distant Dropped Shadows -->
<filter id="blurGround" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="38"/>
</filter>
<filter id="blurContact" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
</filter>
<filter id="blurCaustic" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="18"/>
</filter>
<filter id="craneInternalShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="10"/>
<feOffset dx="12" dy="25"/>
<feComponentTransfer><feFuncA type="linear" slope="0.45"/></feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="6" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Sphere Clip Path to Contain Internal Elements -->
<clipPath id="sphereInteriorClip">
<circle cx="500" cy="460" r="260"/>
</clipPath>
</defs>
<!-- ================= 1. GROUND SHADOWS & CAUSTICS ================= -->
<g id="groundPlane">
<!-- Broad ambient ground shadow -->
<ellipse cx="500" cy="775" rx="360" ry="85" fill="url(#groundFloor)" filter="url(#blurGround)"/>
<!-- Vibrant caustic focus pool beneath the sphere -->
<ellipse cx="485" cy="765" rx="210" ry="52" fill="url(#causticGround)" filter="url(#blurCaustic)" style="mix-blend-mode: screen;"/>
<ellipse cx="480" cy="760" rx="120" ry="28" fill="#a6f5ff" opacity="0.45" filter="url(#blurContact)" style="mix-blend-mode: screen;"/>
<ellipse cx="475" cy="758" rx="55" ry="14" fill="#ffffff" opacity="0.75" filter="url(#blurContact)" style="mix-blend-mode: screen;"/>
<!-- Tight contact occlusion shadow right at touch point -->
<ellipse cx="500" cy="720" rx="85" ry="14" fill="url(#contactShadow)" filter="url(#blurContact)"/>
<ellipse cx="500" cy="720" rx="42" ry="6" fill="#000000" opacity="0.95"/>
</g>
<!-- ================= 2. GLASS SPHERE BACK LAYER ================= -->
<g id="sphereBackground">
<!-- Base Outer Rim Boundary -->
<circle cx="500" cy="460" r="260" fill="url(#sphereBackdrop)"/>
<!-- Inner Backlight/Internal Caustic Core -->
<circle cx="500" cy="460" r="258" fill="url(#innerCausticGlow)" style="mix-blend-mode: screen;"/>
</g>
<!-- ================= 3. INTERNAL 3D ORIGAMI CRANE (Inside Glass) ================= -->
<g id="internalScene" clip-path="url(#sphereInteriorClip)">
<!-- Ambient Internal Light Field -->
<radialGradient id="craneBackGlow" cx="420" cy="400" r="250" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#48a6ff" stop-opacity="0.3"/>
<stop offset="50%" stop-color="#733add" stop-opacity="0.1"/>
<stop offset="100%" stop-color="#000000" stop-opacity="0"/>
</radialGradient>
<circle cx="500" cy="460" r="260" fill="url(#craneBackGlow)" style="mix-blend-mode: screen;"/>
<!-- Internal Crane Drop Shadow on Back Inner Glass Wall -->
<g opacity="0.55" transform="translate(18, 32) scale(0.96) skewX(-4)" filter="url(#blurContact)">
<path d="M 500,485 L 340,360 L 260,335 L 310,380 L 445,475 L 430,555 L 485,595 L 500,600 L 515,595 L 570,555 L 555,475 L 690,380 L 740,335 L 660,360 Z" fill="#030c17"/>
</g>
<!-- THE 3D ORIGAMI CRANE -->
<g id="origamiCrane" filter="url(#craneInternalShadow)">
<!-- === REAR PARTS (Distant / Shadowed Facets) === -->
<!-- Tail - Underside / Back Fold -->
<polygon points="500,485 555,475 675,370 540,515" fill="url(#p_tail_underside)"/>
<!-- Tail - Left/Upper Plane (Facing Light) -->
<polygon points="500,485 675,370 705,355 530,520" fill="url(#p_tail_left)" stroke="#9bc7e8" stroke-width="0.35" stroke-linejoin="round"/>
<!-- Right Wing (Distant Wing - Tilted Away in Perspective) -->
<!-- Right Wing Lower Hull Fold -->
<polygon points="500,485 540,515 680,260" fill="url(#p_right_wing_back)"/>
<!-- Right Wing Main Triangular Blade -->
<polygon points="500,460 500,485 680,260" fill="url(#p_right_wing_top)" stroke="#8cbfe6" stroke-width="0.4"/>
<!-- Right Wing Secondary Upper Facet -->
<polygon points="500,460 680,260 625,245" fill="#a4cbe8" opacity="0.9"/>
<!-- === CENTRAL BODY STRUCTURE === -->
<!-- Body Under-Keel Keystones (Shadow Anchor) -->
<polygon points="500,580 470,525 500,545" fill="url(#p_body_keel_dark)"/>
<polygon points="500,580 530,525 500,545" fill="#131e28"/>
<!-- Body Low Side Triangles -->
<polygon points="445,490 470,525 500,545 470,490" fill="#4d6b85"/>
<polygon points="555,490 530,525 500,545 530,490" fill="#2d4254"/>
<!-- Body Central Diamond - Left Half (Main Lit Plane) -->
<polygon points="500,460 445,490 470,530 500,575" fill="url(#p_body_front_left)" stroke="#ffffff" stroke-width="0.5" stroke-linejoin="round"/>
<!-- Body Central Diamond - Right Half (Shaded Plane) -->
<polygon points="500,460 555,490 530,530 500,575" fill="url(#p_body_front_right)" stroke="#a1c3de" stroke-width="0.5" stroke-linejoin="round"/>
<!-- Center Dorsal Ridge Pyramid -->
<polygon points="500,460 470,490 500,505" fill="url(#p_body_top_crease)"/>
<polygon points="500,460 530,490 500,505" fill="#88a8c4"/>
<!-- === FOREGROUND LEFT WING (Spectacular Fold Dynamics) === -->
<!-- Left Wing Underside Drop Triangle -->
<polygon points="500,460 445,490 310,230" fill="url(#p_left_wing_under)"/>
<!-- Left Wing Main Facet (Reflecting Vast Light) -->
<polygon points="500,460 460,450 280,210 310,230" fill="url(#p_left_wing_top)" stroke="#ffffff" stroke-width="0.6" stroke-linejoin="round"/>
<!-- Left Wing Outer Crisp Edge Blade -->
<polygon points="460,450 280,210 245,220 375,385" fill="url(#p_left_wing_mid)" stroke="#e1f0fa" stroke-width="0.4"/>
<!-- Left Wing Inner Accordion Gusset -->
<polygon points="445,490 460,450 375,385 410,465" fill="#698ca8"/>
<!-- === NECK, HEAD AND BEAK === -->
<!-- Neck Base Trunk -->
<polygon points="500,485 460,480 370,390 435,465" fill="#7599b8"/>
<!-- Neck Long Column - Left Lit Edge -->
<polygon points="460,480 370,390 340,320 375,335" fill="url(#p_neck_left)" stroke="#ffffff" stroke-width="0.4" stroke-linejoin="round"/>
<!-- Neck Long Column - Right Shaded Flange -->
<polygon points="500,485 435,465 375,335 405,345" fill="url(#p_neck_right)" stroke="#5d83a1" stroke-width="0.3"/>
<!-- Head Reverse Fold Peak -->
<polygon points="340,320 375,335 345,305 315,310" fill="url(#p_head_crown)" stroke="#ffffff" stroke-width="0.4"/>
<polygon points="375,335 405,345 355,315 345,305" fill="url(#p_head_side)"/>
<!-- Folded Beak Drooping Forward -->
<polygon points="315,310 345,305 285,325" fill="url(#p_beak_tip)" stroke="#ffe1cc" stroke-width="0.3"/>
<polygon points="345,305 355,315 285,325" fill="#ab3c3c"/>
<!-- Micro Edge Highlights (Origami Paper Crease Crispness) -->
<polyline points="280,210 500,460 680,260" fill="none" stroke="#ffffff" stroke-width="0.9" opacity="0.85" filter="url(#softGlow)"/>
<polyline points="285,325 345,305 375,335 460,480 500,575" fill="none" stroke="#ffffff" stroke-width="0.75" opacity="0.7"/>
<polyline points="500,460 500,575" fill="none" stroke="#ffffff" stroke-width="0.8" opacity="0.9"/>
<polyline points="705,355 500,485" fill="none" stroke="#e0f2fe" stroke-width="0.6" opacity="0.6"/>
<!-- Delicate Origami Paper Texture / Translucency Sheen -->
<ellipse cx="440" cy="420" rx="90" ry="120" fill="url(#craneSubsurface)" style="mix-blend-mode: screen; pointer-events: none;"/>
</g>
<!-- Internal Caustic Rings & Spherical Internal Aberration Rays -->
<path d="M 280,420 Q 320,620 500,680 Q 660,630 710,450 C 660,600 520,650 350,560 Z" fill="#2be7ff" opacity="0.25" style="mix-blend-mode: screen;" filter="url(#blurContact)"/>
<path d="M 320,380 Q 400,670 600,640 C 460,660 360,540 320,380 Z" fill="#b04eff" opacity="0.2" style="mix-blend-mode: screen;" filter="url(#blurContact)"/>
<!-- Internal Floating Micro Refraction Specks -->
<circle cx="360" cy="480" r="2.5" fill="#ffffff" opacity="0.6" filter="url(#softGlow)"/>
<circle cx="580" cy="380" r="1.8" fill="#ffffff" opacity="0.7" filter="url(#softGlow)"/>
<circle cx="420" cy="270" r="1.5" fill="#aae7ff" opacity="0.5"/>
<circle cx="630" cy="510" r="2" fill="#88f4ff" opacity="0.6"/>
<circle cx="490" cy="620" r="2.2" fill="#ffffff" opacity="0.4" filter="url(#softGlow)"/>
</g>
<!-- ================= 4. GLASS THICKNESS & FRONT REFRACTIONS ================= -->
<!-- 3D Glass Shell Body Absorptive Thickness Ring -->
<circle cx="500" cy="460" r="260" fill="url(#glassThickness)" style="mix-blend-mode: multiply;"/>
<circle cx="500" cy="460" r="260" fill="url(#glassThickness)" opacity="0.6" style="mix-blend-mode: color-dodge;"/>
<!-- Front Fresnel Translucent Skin -->
<circle cx="500" cy="460" r="260" fill="url(#fresnelFront)" style="mix-blend-mode: screen;"/>
<!-- ================= 5. CURVED SPECULAR GLOSS & REFLECTIONS (The 3D Glass Polish) ================= -->
<!-- Glass Bottom Ambient Ground Bounce Light Arc -->
<path d="M 290,560 C 330,680 430,718 500,718 C 570,718 670,680 710,560 C 665,660 580,698 500,698 C 420,698 335,660 290,560 Z" fill="url(#bottomBounce)" style="mix-blend-mode: screen;"/>
<path d="M 370,660 C 430,705 570,705 630,660 C 575,688 425,688 370,660 Z" fill="#ffffff" opacity="0.65" filter="url(#blurContact)" style="mix-blend-mode: screen;"/>
<!-- Glass Rim Thin Edge Highlight (Surround Fresnel Rim) -->
<circle cx="500" cy="460" r="258.5" fill="none" stroke="url(#mainSoftbox)" stroke-width="2.5" opacity="0.85" style="mix-blend-mode: screen;"/>
<!-- Secondary Magenta/Violet Edge Rim Light (Right Flank) -->
<path d="M 680,280 C 745,350 765,470 730,570 C 715,500 710,400 660,330 Z" fill="url(#secondaryGlow)" opacity="0.7" style="mix-blend-mode: screen;" filter="url(#softGlow)"/>
<!-- PRIMARY STUDIO SOFTBOX REFLECTION (Top-Left Curved Specular) -->
<g style="mix-blend-mode: screen;">
<!-- Big Smooth Curved Window Highlight -->
<path d="M 310,285 C 335,225 400,195 470,205 C 430,225 385,255 360,305 C 345,335 340,380 345,415 C 325,375 320,325 310,285 Z" fill="url(#mainSoftbox)" filter="url(#blurContact)"/>
<!-- Intense Hotspot Center Flare inside Softbox -->
<path d="M 345,265 C 365,225 415,212 455,218 C 425,232 390,252 375,285 C 365,308 362,342 366,365 C 352,335 348,295 345,265 Z" fill="#ffffff" opacity="0.95" filter="url(#softGlow)"/>
<!-- Super Hot Tiny Specular Apex Core -->
<ellipse cx="378" cy="265" rx="18" ry="32" transform="rotate(-30 378 265)" fill="#ffffff"/>
<circle cx="378" cy="265" r="45" fill="#8ae3ff" opacity="0.5" filter="url(#blurContact)"/>
</g>
<!-- Secondary Overhead Pinpoint Light Spot -->
<ellipse cx="490" cy="212" rx="45" ry="6" fill="#ffffff" opacity="0.4" filter="url(#softGlow)" style="mix-blend-mode: screen;"/>
<ellipse cx="262" cy="450" rx="4" ry="38" transform="rotate(8 262 450)" fill="#78d5ff" opacity="0.5" filter="url(#softGlow)" style="mix-blend-mode: screen;"/>
<!-- Subtle Front Diagonal Sheen Visor (Gives Spherical Glass Volume) -->
<path d="M 275,360 C 360,250 560,240 700,310 C 600,270 410,280 300,420 C 285,400 280,380 275,360 Z" fill="#ffffff" opacity="0.12" style="mix-blend-mode: screen;" filter="url(#blurContact)"/>
</svg>
</div>
</body>
</html>
Procedural globe sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Procedural Globe</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
}
body {
background-color: #030308;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #ffffff;
width: 100vw;
height: 100vh;
}
#canvas-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/* Glassmorphism UI Overlay */
.ui-panel {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: rgba(13, 17, 28, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
padding: 16px 24px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(64, 150, 255, 0.1);
min-width: 280px;
z-index: 10;
}
.ui-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #8da2c0;
}
.ui-header span#speed-display {
color: #4facfe;
font-weight: 600;
font-family: monospace;
font-size: 0.95rem;
}
.slider-container {
display: flex;
align-items: center;
gap: 12px;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 3px;
background: #1e293b;
outline: none;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #00f2fe;
box-shadow: 0 0 10px #00f2fe, 0 0 20px rgba(0, 242, 254, 0.4);
cursor: pointer;
transition: transform 0.1s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #00f2fe;
border: none;
box-shadow: 0 0 10px #00f2fe, 0 0 20px rgba(0, 242, 254, 0.4);
cursor: pointer;
}
.info-hint {
position: absolute;
top: 20px;
left: 20px;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.4);
pointer-events: none;
letter-spacing: 0.04em;
}
</style>
<!-- Three.js and OrbitControls via CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<div id="canvas-container"></div>
<div class="info-hint">DRAG TO ROTATE • SCROLL TO ZOOM</div>
<div class="ui-panel">
<div class="ui-header">
<span>Rotation Speed</span>
<span id="speed-display">1.0x</span>
</div>
<div class="slider-container">
<input type="range" id="rotation-slider" min="0" max="4" step="0.1" value="1.0">
</div>
</div>
<script>
// --- FAST 3D SIMPLEX NOISE GENERATOR ---
// Generates seamless procedural continents directly on spherical coordinates
const SimplexNoise = (function() {
const F3 = 1.0 / 3.0, G3 = 1.0 / 6.0;
const p = new Uint8Array(256);
for (let i = 0; i < 256; i++) p[i] = Math.floor(Math.random() * 256);
const perm = new Uint8Array(512), permMod12 = new Uint8Array(512);
for (let i = 0; i < 512; i++) {
perm[i] = p[i & 255];
permMod12[i] = (perm[i] % 12);
}
const grad3 = new Float32Array([
1,1,0, -1,1,0, 1,-1,0, -1,-1,0,
1,0,1, -1,0,1, 1,0,-1, -1,0,-1,
0,1,1, 0,-1,1, 0,1,-1, 0,-1,-1
]);
return {
noise: function(xin, yin, zin) {
let n0, n1, n2, n3;
const s = (xin + yin + zin) * F3;
const i = Math.floor(xin + s), j = Math.floor(yin + s), k = Math.floor(zin + s);
const t = (i + j + k) * G3;
const X0 = i - t, Y0 = j - t, Z0 = k - t;
const x0 = xin - X0, y0 = yin - Y0, z0 = zin - Z0;
let i1, j1, k1, i2, j2, k2;
if (x0 >= y0) {
if (y0 >= z0) { i1=1; j1=0; k1=0; i2=1; j2=1; k2=0; }
else if (x0 >= z0) { i1=1; j1=0; k1=0; i2=1; j2=0; k2=1; }
else { i1=0; j1=0; k1=1; i2=1; j2=0; k2=1; }
} else {
if (y0 < z0) { i1=0; j1=0; k1=1; i2=0; j2=1; k2=1; }
else if (x0 < z0) { i1=0; j1=1; k1=0; i2=0; j2=1; k2=1; }
else { i1=0; j1=1; k1=0; i2=1; j2=1; k2=0; }
}
const x1 = x0 - i1 + G3, y1 = y0 - j1 + G3, z1 = z0 - k1 + G3;
const x2 = x0 - i2 + 2.0 * G3, y2 = y0 - j2 + 2.0 * G3, z2 = z0 - k2 + 2.0 * G3;
const x3 = x0 - 1.0 + 3.0 * G3, y3 = y0 - 1.0 + 3.0 * G3, z3 = z0 - 1.0 + 3.0 * G3;
const ii = i & 255, jj = j & 255, kk = k & 255;
let t0 = 0.6 - x0*x0 - y0*y0 - z0*z0;
if (t0 < 0) n0 = 0.0;
else {
const gi0 = permMod12[ii + perm[jj + perm[kk]]] * 3;
t0 *= t0;
n0 = t0 * t0 * (grad3[gi0]*x0 + grad3[gi0+1]*y0 + grad3[gi0+2]*z0);
}
let t1 = 0.6 - x1*x1 - y1*y1 - z1*z1;
if (t1 < 0) n1 = 0.0;
else {
const gi1 = permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]] * 3;
t1 *= t1;
n1 = t1 * t1 * (grad3[gi1]*x1 + grad3[gi1+1]*y1 + grad3[gi1+2]*z1);
}
let t2 = 0.6 - x2*x2 - y2*y2 - z2*z2;
if (t2 < 0) n2 = 0.0;
else {
const gi2 = permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]] * 3;
t2 *= t2;
n2 = t2 * t2 * (grad3[gi2]*x2 + grad3[gi2+1]*y2 + grad3[gi2+2]*z2);
}
let t3 = 0.6 - x3*x3 - y3*y3 - z3*z3;
if (t3 < 0) n3 = 0.0;
else {
const gi3 = permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]] * 3;
t3 *= t3;
n3 = t3 * t3 * (grad3[gi3]*x3 + grad3[gi3+1]*y3 + grad3[gi3+2]*z3);
}
return 32.0 * (n0 + n1 + n2 + n3);
}
};
})();
// Fractal Brownian Motion
function fbm(x, y, z, octaves = 5) {
let val = 0, amp = 0.5, freq = 1.0;
for (let i = 0; i < octaves; i++) {
val += amp * SimplexNoise.noise(x * freq, y * freq, z * freq);
freq *= 2.0;
amp *= 0.5;
}
return val;
}
// --- PROCEDURAL TEXTURE GENERATION ---
function createGlobeTexture() {
const width = 2048, height = 1024;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const imgData = ctx.createImageData(width, height);
const data = imgData.data;
for (let y = 0; y < height; y++) {
const lat = ((y / height) - 0.5) * Math.PI; // -PI/2 to PI/2
const sinLat = Math.sin(lat);
const cosLat = Math.cos(lat);
const absLat = Math.abs(lat) / (Math.PI / 2); // 0 at equator, 1 at poles
for (let x = 0; x < width; x++) {
const lon = (x / width) * Math.PI * 2; // 0 to 2PI
const nx = cosLat * Math.sin(lon);
const ny = sinLat;
const nz = cosLat * Math.cos(lon);
// Generate spherical elevation
let n = fbm(nx * 1.5, ny * 1.5, nz * 1.5, 6);
let elevation = (n + 1) * 0.5; // 0.0 to 1.0
// Polar ice caps
let iceFactor = Math.pow(absLat, 4) * 1.6;
let isIce = (elevation + iceFactor) > 0.85;
let r, g, b;
if (isIce && absLat > 0.65) {
// Ice caps
r = 230 + Math.random() * 25;
g = 240 + Math.random() * 15;
b = 255;
} else if (elevation < 0.48) {
// Deep Ocean
r = 5; g = 18; b = 48;
} else if (elevation < 0.52) {
// Shallow Coast / Shelf
r = 15; g = 65; b = 95;
} else if (elevation < 0.54) {
// Sand / Beach
r = 185; g = 170; b = 120;
} else if (elevation < 0.68) {
// Lowlands / Forests
r = 28; g = 95; b = 48;
} else if (elevation < 0.80) {
// Highlands / Hills
r = 85; g = 72; b = 50;
} else {
// Mountains / Peaks
r = 180; g = 180; b = 190;
}
// Night lights / city emission subtle boost
const idx = (y * width + x) * 4;
data[idx] = r;
data[idx + 1] = g;
data[idx + 2] = b;
data[idx + 3] = 255;
}
}
ctx.putImageData(imgData, 0, 0);
return new THREE.CanvasTexture(canvas);
}
function createCloudTexture() {
const width = 1024, height = 512;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const imgData = ctx.createImageData(width, height);
const data = imgData.data;
for (let y = 0; y < height; y++) {
const lat = ((y / height) - 0.5) * Math.PI;
const sinLat = Math.sin(lat);
const cosLat = Math.cos(lat);
for (let x = 0; x < width; x++) {
const lon = (x / width) * Math.PI * 2;
const nx = cosLat * Math.sin(lon);
const ny = sinLat;
const nz = cosLat * Math.cos(lon);
let cloud = fbm(nx * 2.2 + 10.0, ny * 2.2 + 10.0, nz * 2.2 + 10.0, 5);
cloud = (cloud + 1) * 0.5;
let density = Math.max(0, (cloud - 0.48) / 0.52);
const idx = (y * width + x) * 4;
data[idx] = 255;
data[idx + 1] = 255;
data[idx + 2] = 255;
data[idx + 3] = Math.floor(density * 220);
}
}
ctx.putImageData(imgData, 0, 0);
return new THREE.CanvasTexture(canvas);
}
// --- SCENE SETUP ---
const container = document.getElementById('canvas-container');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 4, 11);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.1;
container.appendChild(renderer.domElement);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.minDistance = 5.5;
controls.maxDistance = 25;
controls.rotateSpeed = 0.8;
// --- LIGHTING ---
const sunLight = new THREE.DirectionalLight(0xfff5e6, 2.0);
sunLight.position.set(20, 10, 15);
scene.add(sunLight);
const ambientLight = new THREE.AmbientLight(0x0d1b2a, 0.8);
scene.add(ambientLight);
const blueBackLight = new THREE.DirectionalLight(0x1d4ed8, 1.2);
blueBackLight.position.set(-15, -10, -15);
scene.add(blueBackLight);
// --- GLOBE ROOT GROUP ---
const globeGroup = new THREE.Group();
scene.add(globeGroup);
// 1. Earth Mesh
const earthRadius = 3.0;
const earthGeo = new THREE.SphereGeometry(earthRadius, 64, 64);
const earthTex = createGlobeTexture();
const earthMat = new THREE.MeshStandardMaterial({
map: earthTex,
roughness: 0.7,
metalness: 0.1,
});
const earthMesh = new THREE.Mesh(earthGeo, earthMat);
globeGroup.add(earthMesh);
// 2. Cloud Mesh
const cloudTex = createCloudTexture();
const cloudGeo = new THREE.SphereGeometry(earthRadius + 0.04, 64, 64);
const cloudMat = new THREE.MeshStandardMaterial({
map: cloudTex,
transparent: true,
opacity: 0.75,
blending: THREE.NormalBlending,
depthWrite: false,
roughness: 1.0
});
const cloudMesh = new THREE.Mesh(cloudGeo, cloudMat);
globeGroup.add(cloudMesh);
// 3. Atmosphere Glow Mesh (Custom Fresnel Shader)
const atmosphereVertexShader = `
varying vec3 vNormal;
varying vec3 vPosition;
void main() {
vNormal = normalize(normalMatrix * normal);
vPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
const atmosphereFragmentShader = `
varying vec3 vNormal;
varying vec3 vPosition;
void main() {
vec3 viewDir = normalize(-vPosition);
float intensity = pow(1.0 - max(0.0, dot(vNormal, viewDir)), 3.2);
vec3 glowColor = vec3(0.18, 0.58, 1.0);
gl_FragColor = vec4(glowColor, intensity * 0.85);
}
`;
const atmosGeo = new THREE.SphereGeometry(earthRadius + 0.35, 64, 64);
const atmosMat = new THREE.ShaderMaterial({
vertexShader: atmosphereVertexShader,
fragmentShader: atmosphereFragmentShader,
blending: THREE.AdditiveBlending,
side: THREE.BackSide,
transparent: true,
depthWrite: false
});
const atmosMesh = new THREE.Mesh(atmosGeo, atmosMat);
globeGroup.add(atmosMesh);
// 4. Orbiting Particle Rings
function createGlowSprite() {
const canvas = document.createElement('canvas');
canvas.width = 64;
canvas.height = 64;
const ctx = canvas.getContext('2d');
const grad = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);
grad.addColorStop(0, 'rgba(255, 255, 255, 1)');
grad.addColorStop(0.2, 'rgba(0, 242, 254, 0.8)');
grad.addColorStop(0.6, 'rgba(79, 70, 229, 0.3)');
grad.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, 64, 64);
return new THREE.CanvasTexture(canvas);
}
const particleCount = 1800;
const particleGeo = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);
const color1 = new THREE.Color(0x00f2fe);
const color2 = new THREE.Color(0x9d4edd);
for (let i = 0; i < particleCount; i++) {
const angle = Math.random() * Math.PI * 2;
const radius = 4.2 + (Math.random() - 0.5) * 1.6;
const spreadY = (Math.random() - 0.5) * 0.45;
positions[i * 3] = Math.cos(angle) * radius;
positions[i * 3 + 1] = spreadY;
positions[i * 3 + 2] = Math.sin(angle) * radius;
const mixedColor = color1.clone().lerp(color2, Math.random());
colors[i * 3] = mixedColor.r;
colors[i * 3 + 1] = mixedColor.g;
colors[i * 3 + 2] = mixedColor.b;
}
particleGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
particleGeo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
const particleMat = new THREE.PointsMaterial({
size: 0.16,
map: createGlowSprite(),
vertexColors: true,
transparent: true,
blending: THREE.AdditiveBlending,
depthWrite: false
});
const particleRing = new THREE.Points(particleGeo, particleMat);
particleRing.rotation.x = THREE.MathUtils.degToRad(35);
particleRing.rotation.z = THREE.MathUtils.degToRad(15);
scene.add(particleRing);
// 5. Starfield Background
const starsGeo = new THREE.BufferGeometry();
const starsCount = 1200;
const starPositions = new Float32Array(starsCount * 3);
for (let i = 0; i < starsCount * 3; i += 3) {
starPositions[i] = (Math.random() - 0.5) * 200;
starPositions[i + 1] = (Math.random() - 0.5) * 200;
starPositions[i + 2] = (Math.random() - 0.5) * 200;
}
starsGeo.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
const starsMat = new THREE.PointsMaterial({
size: 0.4,
color: 0x88aaff,
transparent: true,
opacity: 0.6
});
const starField = new THREE.Points(starsGeo, starsMat);
scene.add(starField);
// --- INTERACTIVITY & UI ---
const slider = document.getElementById('rotation-slider');
const speedDisplay = document.getElementById('speed-display');
let speedMultiplier = 1.0;
slider.addEventListener('input', (e) => {
speedMultiplier = parseFloat(e.target.value);
speedDisplay.textContent = speedMultiplier.toFixed(1) + 'x';
});
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// --- ANIMATION LOOP ---
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
const baseRot = 0.15 * speedMultiplier * delta;
// Earth and cloud rotation
globeGroup.rotation.y += baseRot;
cloudMesh.rotation.y += baseRot * 0.35; // Cloud differential drift
// Ring rotation (inclined orbit counter-rotation)
particleRing.rotation.y -= baseRot * 0.7;
// Controls update
controls.update();
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
A practical evaluation plan
Read Next
Claude Sonnet 5.5 Browser Coding Check: Glass Crane, Globe & Wizard Game
A concise hands-on look at three Claude Sonnet 5.5 Medium HTML artifacts: a glass-and-origami SVG, an interactive procedural globe, and a floating-island wizard game.
GPT-6 Luna Browser Coding Test: Aetherfall, Pelagic & Glass Crane
A hands-on look at three GPT-6 Luna creative-coding artifacts: the Aetherfall wizard game, Pelagic procedural globe, and glass origami crane, with interactive previews and scope notes.
GPT-6 Sol Browser Coding Test: Floating Isles, Blue Horizon & Glass Crane
Explore three supplied GPT-6 Sol browser artifacts: Floating Isles wizard quest, Blue Horizon procedural globe, and a glass-sphere origami crane, embedded as isolated previews.