ground truth
Only CSS: Flex Breeze

css4ssource ↗
model outputs
Gemini 3 Flash Preview →
A 0.88T 0.50
Qwen3-VL-8B-Instruct (no output)
A —T —
GPT-5.4 →
A 0.94T 0.43
Claude Sonnet 4.6 →
A 0.85T 0.52
LLaMA 4 Scout →
A 0.40T 0.30
1<div class="title">BREEZE</div><div class="wavy"><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div><div class="waveline"><div class="bar -top"></div><div class="bar -middle"></div><div class="bar -bottom"></div></div></div>