69 lines
3.3 KiB
XML
69 lines
3.3 KiB
XML
<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Monitor Base -->
|
|
<rect x="50" y="100" width="28" height="8" rx="2" fill="#444"/>
|
|
<rect x="58" y="95" width="12" height="15" fill="#444"/>
|
|
|
|
<!-- Monitor Frame -->
|
|
<rect x="16" y="20" width="96" height="80" rx="4" fill="#2a2a2a" stroke="#1a1a1a" stroke-width="2"/>
|
|
|
|
<!-- Screen -->
|
|
<rect x="22" y="26" width="84" height="68" rx="2" fill="#0f1419"/>
|
|
|
|
<!-- Code Lines -->
|
|
<!-- Line 1: function declaration -->
|
|
<rect x="26" y="32" width="8" height="2" fill="#ff7b72"/> <!-- red keyword -->
|
|
<rect x="36" y="32" width="20" height="2" fill="#79c0ff"/> <!-- blue function name -->
|
|
<rect x="58" y="32" width="2" height="2" fill="#f0f6fc"/> <!-- white parentheses -->
|
|
<rect x="62" y="32" width="12" height="2" fill="#a5a5a5"/> <!-- gray params -->
|
|
<rect x="76" y="32" width="2" height="2" fill="#f0f6fc"/> <!-- white brace -->
|
|
|
|
<!-- Line 2: variable -->
|
|
<rect x="30" y="38" width="6" height="2" fill="#ff7b72"/> <!-- red var -->
|
|
<rect x="38" y="38" width="16" height="2" fill="#f0f6fc"/> <!-- white variable -->
|
|
<rect x="56" y="38" width="2" height="2" fill="#ff7b72"/> <!-- red equals -->
|
|
<rect x="60" y="38" width="14" height="2" fill="#a5f3fc"/> <!-- cyan string -->
|
|
|
|
<!-- Line 3: if statement -->
|
|
<rect x="30" y="44" width="4" height="2" fill="#ff7b72"/> <!-- red if -->
|
|
<rect x="36" y="44" width="2" height="2" fill="#f0f6fc"/> <!-- white parentheses -->
|
|
<rect x="40" y="44" width="18" height="2" fill="#f0f6fc"/> <!-- white condition -->
|
|
<rect x="60" y="44" width="2" height="2" fill="#f0f6fc"/> <!-- white brace -->
|
|
|
|
<!-- Line 4: return statement -->
|
|
<rect x="34" y="50" width="10" height="2" fill="#ff7b72"/> <!-- red return -->
|
|
<rect x="46" y="50" width="16" height="2" fill="#f0f6fc"/> <!-- white value -->
|
|
|
|
<!-- Line 5: closing brace -->
|
|
<rect x="30" y="56" width="2" height="2" fill="#f0f6fc"/>
|
|
|
|
<!-- Line 6: comment -->
|
|
<rect x="26" y="62" width="2" height="2" fill="#8b949e"/> <!-- gray // -->
|
|
<rect x="30" y="62" width="28" height="2" fill="#8b949e"/> <!-- gray comment text -->
|
|
|
|
<!-- Line 7: for loop -->
|
|
<rect x="26" y="68" width="6" height="2" fill="#ff7b72"/> <!-- red for -->
|
|
<rect x="34" y="68" width="2" height="2" fill="#f0f6fc"/> <!-- white parentheses -->
|
|
<rect x="38" y="68" width="20" height="2" fill="#f0f6fc"/> <!-- white loop condition -->
|
|
<rect x="60" y="68" width="2" height="2" fill="#f0f6fc"/> <!-- white brace -->
|
|
|
|
<!-- Line 8: console.log -->
|
|
<rect x="30" y="74" width="12" height="2" fill="#79c0ff"/> <!-- blue console -->
|
|
<rect x="44" y="74" width="6" height="2" fill="#f0f6fc"/> <!-- white .log -->
|
|
<rect x="52" y="74" width="14" height="2" fill="#a5f3fc"/> <!-- cyan string -->
|
|
|
|
<!-- Cursor/Caret -->
|
|
<rect x="68" y="74" width="1" height="3" fill="#00ff00" opacity="0.8">
|
|
<animate attributeName="opacity" values="0.8;0;0.8" dur="1s" repeatCount="indefinite"/>
|
|
</rect>
|
|
|
|
<!-- Screen Reflection/Shine Effect -->
|
|
<rect x="22" y="26" width="84" height="20" rx="2" fill="url(#screenGlow)" opacity="0.1"/>
|
|
|
|
<!-- Definitions -->
|
|
<defs>
|
|
<linearGradient id="screenGlow" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.3"/>
|
|
<stop offset="100%" style="stop-color:#ffffff;stop-opacity:0"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg> |