Ling 3.1 Flash: Free HTML Benchmark and Availability Results
OpenRouter chat produced a detailed glass-crane SVG, while globe requests hit provider rate limits and the game retry returned no visible HTML.
Co-Founder & Lead Programmer of AcceleratedLogic AI
Model and route facts
| Checked October 3, 2026 | OpenRouter route |
|---|---|
| Model ID |
inclusionai/ling-3.1-flash
|
| Input / output token price | $0 / $0 |
| Context | 262,144 tokens |
| Listed output maximum | 32,768 tokens |
| Inputs / output | Text / text |
| Architecture in model description | MoE: 560B total, 25B active parameters |
Method and settings
Test 1: Glass sphere and origami crane
Original SVG comparison: Ling 3.1 Flash on the left and Apodex 1.1 Mini on the right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glass Sphere · Origami Crane</title>
<style>
html, body {
margin: 0; height: 100%;
background: #070a11;
display: flex; align-items: center; justify-content: center;
}
svg { width: min(92vmin, 800px); height: auto; display: block; }
.floaty { animation: floatY 7s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.pulse { animation: opPulse 6s ease-in-out infinite; }
@keyframes opPulse { 0%,100% { opacity: .65; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .floaty, .pulse { animation: none; } }
</style>
</head>
<body>
<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-label="Photorealistic glass sphere containing a 3D origami crane">
<title>Glass Sphere with Origami Crane</title>
<desc>A photorealistic 3D glass sphere with realistic refraction, reflections, specular highlights and caustics, containing a detailed folded origami crane.</desc>
<defs>
<!-- ======== Gradients ======== -->
<radialGradient id="bgGrad" cx="50%" cy="32%" r="90%">
<stop offset="0%" stop-color="#3b4a63"/>
<stop offset="45%" stop-color="#232d40"/>
<stop offset="100%" stop-color="#0b0f18"/>
</radialGradient>
<linearGradient id="floorGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#26314a"/>
<stop offset="100%" stop-color="#0a0e16"/>
</linearGradient>
<radialGradient id="glassFresnel" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="70%" stop-color="#cfe0ff" stop-opacity="0.02"/>
<stop offset="88%" stop-color="#cfe0ff" stop-opacity="0.10"/>
<stop offset="100%" stop-color="#eaf3ff" stop-opacity="0.28"/>
</radialGradient>
<radialGradient id="glassLens" cx="34%" cy="26%" r="85%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.10"/>
<stop offset="35%" stop-color="#ffffff" stop-opacity="0.02"/>
<stop offset="70%" stop-color="#0a1020" stop-opacity="0.05"/>
<stop offset="100%" stop-color="#0a1020" stop-opacity="0.16"/>
</radialGradient>
<radialGradient id="innerShade" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#05080f" stop-opacity="0"/>
<stop offset="78%" stop-color="#05080f" stop-opacity="0"/>
<stop offset="93%" stop-color="#05080f" stop-opacity="0.22"/>
<stop offset="100%" stop-color="#03060c" stop-opacity="0.5"/>
</radialGradient>
<radialGradient id="specGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.95"/>
<stop offset="60%" stop-color="#ffffff" stop-opacity="0.35"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<radialGradient id="causticGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#dff2ff" stop-opacity="0.85"/>
<stop offset="55%" stop-color="#9fd0ff" stop-opacity="0.35"/>
<stop offset="100%" stop-color="#9fd0ff" stop-opacity="0"/>
</radialGradient>
<radialGradient id="vigGrad" cx="50%" cy="46%" r="75%">
<stop offset="0%" stop-color="#020408" stop-opacity="0"/>
<stop offset="62%" stop-color="#020408" stop-opacity="0"/>
<stop offset="100%" stop-color="#020408" stop-opacity="0.55"/>
</radialGradient>
<!-- Paper gradients (lit from top-left) -->
<linearGradient id="paperHi" x1="0" y1="0" x2="0.8" y2="1">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="55%" stop-color="#eef1f7"/>
<stop offset="100%" stop-color="#ccd3e0"/>
</linearGradient>
<linearGradient id="paperMid" x1="0.2" y1="0" x2="0.8" y2="1">
<stop offset="0%" stop-color="#f6f8fb"/>
<stop offset="60%" stop-color="#dbe1ea"/>
<stop offset="100%" stop-color="#b3bcc9"/>
</linearGradient>
<linearGradient id="paperShade" x1="0" y1="0" x2="0.7" y2="1">
<stop offset="0%" stop-color="#e4e8ef"/>
<stop offset="60%" stop-color="#c2c9d5"/>
<stop offset="100%" stop-color="#98a1b1"/>
</linearGradient>
<linearGradient id="paperWarm" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#fffdf4"/>
<stop offset="55%" stop-color="#f3ecdc"/>
<stop offset="100%" stop-color="#d9cfba"/>
</linearGradient>
<!-- ======== Filters ======== -->
<filter id="blur2"><feGaussianBlur stdDeviation="2"/></filter>
<filter id="blur4"><feGaussianBlur stdDeviation="4"/></filter>
<filter id="blur8"><feGaussianBlur stdDeviation="8"/></filter>
<filter id="blur14"><feGaussianBlur stdDeviation="14"/></filter>
<filter id="craneShadow" x="-40%" y="-40%" width="180%" height="180%">
<feDropShadow dx="10" dy="22" stdDeviation="12" flood-color="#16233a" flood-opacity="0.5"/>
</filter>
<filter id="ghostBlur" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="2.5"/>
</filter>
<filter id="paperGrain" x="-5%" y="-5%" width="110%" height="110%">
<feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" seed="7" result="noise"/>
<feColorMatrix in="noise" type="matrix" values="0 0 0 0 0.55 0 0 0 0 0.55 0 0 0 0 0.6 0 0 0 0.22 0" result="grain"/>
<feComposite in="grain" in2="SourceGraphic" operator="in" result="grainIn"/>
<feBlend in="SourceGraphic" in2="grainIn" mode="multiply"/>
</filter>
<!-- ======== Clip ======== -->
<clipPath id="sphereClip"><circle cx="400" cy="380" r="255"/></clipPath>
<!-- ======== Environment (reused for refraction) ======== -->
<g id="envScene">
<polygon points="150,-20 430,-20 600,720 220,720" fill="#9db8e2" opacity="0.10" filter="url(#blur14)"/>
<ellipse cx="240" cy="170" rx="230" ry="150" fill="#7d9cc9" opacity="0.45" filter="url(#blur14)"/>
<ellipse cx="610" cy="540" rx="210" ry="160" fill="#3d4f74" opacity="0.5" filter="url(#blur14)"/>
<ellipse cx="580" cy="140" rx="150" ry="100" fill="#a9c2e8" opacity="0.3" filter="url(#blur14)"/>
</g>
<!-- ======== Origami Crane (faceted, with crease strokes) ======== -->
<g id="crane" filter="url(#paperGrain)" stroke-linejoin="round">
<!-- legs -->
<polygon points="388,466 393,466 395,528 390,528" fill="url(#paperShade)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<polygon points="407,466 412,466 417,528 412,528" fill="url(#paperShade)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<polygon points="386,528 400,528 392,537" fill="url(#paperShade)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<polygon points="406,528 420,528 413,537" fill="url(#paperShade)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<!-- tail -->
<polygon points="344,404 296,274 306,268" fill="url(#paperShade)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<polygon points="306,268 376,388 344,404" fill="url(#paperMid)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<!-- body facets -->
<polygon points="400,358 342,414 400,428" fill="url(#paperWarm)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<polygon points="400,358 458,414 400,428" fill="url(#paperMid)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<polygon points="342,414 400,470 400,428" fill="url(#paperMid)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<polygon points="458,414 400,470 400,428" fill="url(#paperShade)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<!-- ambient occlusion at fold roots -->
<polygon points="366,398 352,415 342,414" fill="#3a4356" opacity="0.18"/>
<polygon points="434,398 448,415 458,414" fill="#3a4356" opacity="0.18"/>
<polygon points="424,400 448,392 458,414" fill="#3a4356" opacity="0.15"/>
<polygon points="344,404 376,388 342,414" fill="#3a4356" opacity="0.15"/>
<!-- wings -->
<polygon points="262,268 366,398 352,415" fill="url(#paperHi)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<polygon points="262,268 352,415 338,432" fill="url(#paperMid)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<polygon points="538,268 448,415 434,398" fill="url(#paperMid)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<polygon points="538,268 462,432 448,415" fill="url(#paperShade)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<!-- neck -->
<polygon points="424,400 436,396 466,299 458,296" fill="url(#paperHi)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<polygon points="436,396 448,392 474,302 466,299" fill="url(#paperMid)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<!-- head + beak -->
<polygon points="458,296 474,302 492,287 477,277" fill="url(#paperHi)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<polygon points="458,296 474,302 480,289" fill="url(#paperMid)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<polygon points="492,287 516,280 491,293" fill="url(#paperShade)" stroke="#8a93a3" stroke-width="1" stroke-opacity="0.4"/>
<!-- crease lines -->
<line x1="280" y1="310" x2="346" y2="404" stroke="#7d8590" stroke-width="0.8" opacity="0.35"/>
<line x1="520" y1="310" x2="454" y2="404" stroke="#7d8590" stroke-width="0.8" opacity="0.35"/>
<line x1="322" y1="340" x2="299" y2="272" stroke="#6a7280" stroke-width="0.9" opacity="0.4"/>
<line x1="477" y1="277" x2="492" y2="287" stroke="#6a7280" stroke-width="0.8" opacity="0.4"/>
<!-- lit edge highlights -->
<line x1="262" y1="268" x2="366" y2="398" stroke="#ffffff" stroke-width="1.4" opacity="0.55"/>
<line x1="538" y1="268" x2="434" y2="398" stroke="#ffffff" stroke-width="1.2" opacity="0.35"/>
<line x1="424" y1="400" x2="458" y2="296" stroke="#ffffff" stroke-width="1.2" opacity="0.5"/>
<line x1="296" y1="274" x2="344" y2="404" stroke="#ffffff" stroke-width="1.1" opacity="0.4"/>
<line x1="400" y1="358" x2="342" y2="414" stroke="#ffffff" stroke-width="1" opacity="0.45"/>
<line x1="492" y1="287" x2="516" y2="280" stroke="#ffffff" stroke-width="0.9" opacity="0.4"/>
</g>
</defs>
<!-- ======== Background ======== -->
<rect width="800" height="800" fill="url(#bgGrad)"/>
<use href="#envScene" xlink:href="#envScene"/>
<ellipse cx="400" cy="740" rx="440" ry="125" fill="url(#floorGrad)"/>
<ellipse cx="400" cy="618" rx="520" ry="9" fill="#6d84ad" opacity="0.12" filter="url(#blur8)"/>
<ellipse cx="400" cy="652" rx="225" ry="30" fill="#02040a" opacity="0.6" filter="url(#blur14)"/>
<!-- ======== Glass Sphere ======== -->
<g>
<!-- Interior: refracted (inverted) background -->
<g clip-path="url(#sphereClip)">
<g transform="translate(400 380) scale(1.04 -1.04) translate(-400 -380)" opacity="0.55" filter="url(#blur4)">
<rect x="0" y="0" width="800" height="800" fill="url(#bgGrad)"/>
<use href="#envScene" xlink:href="#envScene"/>
<ellipse cx="400" cy="735" rx="430" ry="120" fill="url(#floorGrad)"/>
</g>
<!-- inner rim shading for depth -->
<circle cx="400" cy="380" r="255" fill="url(#innerShade)"/>
<!-- ambient bounce light inside -->
<ellipse cx="400" cy="410" rx="170" ry="150" fill="#7ea6dd" opacity="0.14" filter="url(#blur14)"/>
<!-- crane cast shadow on inner back wall + refracted ghost crane + main crane -->
<g class="floaty">
<ellipse cx="400" cy="562" rx="105" ry="20" fill="#04070d" opacity="0.45" filter="url(#blur8)"/>
<use href="#crane" xlink:href="#crane" opacity="0.13" filter="url(#ghostBlur)" transform="translate(0 760) scale(1 -1)"/>
<use href="#crane" xlink:href="#crane" filter="url(#craneShadow)"/>
</g>
<!-- interior caustic (light focused through glass) -->
<ellipse cx="400" cy="548" rx="145" ry="42" fill="url(#causticGrad)" opacity="0.55" filter="url(#blur8)"/>
<ellipse cx="400" cy="540" rx="75" ry="22" fill="#eaf7ff" opacity="0.5" filter="url(#blur4)"/>
</g>
<!-- glass body -->
<circle cx="400" cy="380" r="255" fill="url(#glassFresnel)"/>
<circle cx="400" cy="380" r="255" fill="url(#glassLens)"/>
<!-- specular highlights -->
<g clip-path="url(#sphereClip)">
<ellipse class="pulse" cx="318" cy="250" rx="100" ry="64" fill="url(#specGrad)" filter="url(#blur8)" transform="rotate(-28 318 250)"/>
<ellipse cx="298" cy="220" rx="38" ry="20" fill="url(#specGrad)" filter="url(#blur2)" transform="rotate(-28 298 220)"/>
<circle cx="270" cy="190" r="7" fill="#ffffff" opacity="0.85" filter="url(#blur2)"/>
<ellipse cx="470" cy="585" rx="95" ry="20" fill="#ffffff" opacity="0.07" filter="url(#blur8)"/>
</g>
<!-- rim light arcs (dash segments on the circle path) -->
<circle cx="400" cy="380" r="255" fill="none" stroke="#eaf4ff" stroke-opacity="0.25" stroke-width="7" stroke-linecap="round" stroke-dasharray="150 1452" transform="rotate(125 400 380)" filter="url(#blur4)"/>
<circle cx="400" cy="380" r="255" fill="none" stroke="#ffffff" stroke-opacity="0.18" stroke-width="5" stroke-linecap="round" stroke-dasharray="110 1492" transform="rotate(20 400 380)" filter="url(#blur4)"/>
<circle cx="400" cy="380" r="255" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="4" stroke-linecap="round" stroke-dasharray="85 1517" transform="rotate(205 400 380)" filter="url(#blur2)"/>
<circle cx="400" cy="380" r="249" fill="none" stroke="#ffffff" stroke-opacity="0.55" stroke-width="2" stroke-linecap="round" stroke-dasharray="60 1504" transform="rotate(218 400 380)" filter="url(#blur2)"/>
<!-- chromatic aberration fringes -->
<circle cx="402" cy="379" r="253.5" fill="none" stroke="#86dcff" stroke-opacity="0.22" stroke-width="1.6" filter="url(#blur2)"/>
<circle cx="398" cy="381" r="256.5" fill="none" stroke="#ff9ed8" stroke-opacity="0.18" stroke-width="1.6" filter="url(#blur2)"/>
<!-- glass edge strokes -->
<circle cx="400" cy="380" r="256" fill="none" stroke="#ffffff" stroke-opacity="0.14" stroke-width="3"/>
<circle cx="400" cy="380" r="253" fill="none" stroke="#0a1220" stroke-opacity="0.3" stroke-width="1.5"/>
<circle cx="400" cy="380" r="255" fill="none" stroke="#cfe0f8" stroke-opacity="0.4" stroke-width="1"/>
</g>
<!-- ======== Floor: reflection + caustic in front of sphere ======== -->
<ellipse cx="400" cy="688" rx="180" ry="42" fill="#8fb8e8" opacity="0.08" filter="url(#blur14)"/>
<ellipse cx="400" cy="660" rx="120" ry="16" fill="url(#causticGrad)" opacity="0.45" filter="url(#blur8)"/>
<ellipse cx="400" cy="656" rx="55" ry="8" fill="#eaf6ff" opacity="0.3" filter="url(#blur4)"/>
<!-- ======== Dust / bokeh ======== -->
<g fill="#cfe2ff">
<circle cx="140" cy="150" r="2.5" opacity="0.3" filter="url(#blur2)"/>
<circle cx="660" cy="220" r="2" opacity="0.25" filter="url(#blur2)"/>
<circle cx="700" cy="480" r="3" opacity="0.2" filter="url(#blur2)"/>
<circle cx="110" cy="420" r="2" opacity="0.22" filter="url(#blur2)"/>
<circle cx="250" cy="640" r="2.5" opacity="0.18" filter="url(#blur2)"/>
<circle cx="580" cy="660" r="2" opacity="0.2" filter="url(#blur2)"/>
<circle cx="620" cy="120" r="1.8" opacity="0.3" filter="url(#blur2)"/>
<circle cx="180" cy="600" r="1.6" opacity="0.2" filter="url(#blur2)"/>
<circle cx="690" cy="340" r="10" opacity="0.12" filter="url(#blur4)"/>
<circle cx="120" cy="260" r="12" opacity="0.1" filter="url(#blur4)"/>
</g>
<!-- ======== Vignette + caption ======== -->
<rect width="800" height="800" fill="url(#vigGrad)"/>
<text x="400" y="772" text-anchor="middle" font-family="Georgia, 'Times New Roman', serif" font-size="14" letter-spacing="5" fill="#7e92b6" opacity="0.75">GLASS SPHERE · ORIGAMI CRANE</text>
<text x="400" y="791" text-anchor="middle" font-family="Georgia, 'Times New Roman', serif" font-size="9" letter-spacing="3" fill="#5a6c8c" opacity="0.6">HAND-CRAFTED IN SVG</text>
</svg>
</body>
</html>
Test 2: Procedural globe
Test 3: Wizard game
What this session establishes
Read Next
Apodex 1.1 Mini Free: HTML Artifacts and Runtime Results
Three original browser artifacts from OpenRouter chat, with an SVG result, a globe import failure and retry, and a wizard game with a confirmed restart defect.
Pareto 26.10 Preview: Pricing, Context, and Vendor Benchmarks
A source-based look at Unbiased’s composite-model preview, its lower token rates, preliminary evaluations, and the implications of a changing serving stack.
Claude Sonnet 5.5: API Specs, Effort, and Costs
Anthropic’s Sonnet 5.5 announcement, current OpenRouter route limits, and how to interpret vendor speed and cost-per-task claims.