SVG
Viewer
8BCvvQvb
N/A
Send feedback
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Optimize
1.96 KB
1.13 KB
-42%
Prettify
Preferences
Clear
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 160" height="160" width="280"> <defs> <style> @keyframes blink { 50% { opacity: 0; } } /* 노트북 스타일 */ .laptop-base { fill: #CFD8DC; } /* 밝은 회색 베이스 */ .laptop-lid { fill: #90A4AE; } /* 약간 더 어두운 회색 뚜껑(화면 뒷면) */ .screen-bezel { fill: #455A64; rx: 2; ry: 2;} /* 어두운 화면 베젤 */ .terminal-bg { fill: #1C1E20; } /* 거의 검은색 터미널 배경 */ .terminal-text { font-family: 'Fira Code', 'Consolas', monospace; /* 코딩용 폰트 느낌 */ font-size: 14px; fill: #00E676; /* 밝은 녹색 텍스트 */ text-anchor: start; } .prompt { font-weight: bold; } .initials { fill: #FFFFFF; font-weight: bold; } /* 흰색 이니셜 */ .cursor { font-weight: bold; animation: blink 1s step-end infinite; } /* 맥주잔 스타일 */ .mug-glass { fill: #FFA726; /* 주황색 맥주 */ stroke: #E65100; stroke-width: 1; } /* 진한 주황색 테두리 */ .mug-foam { fill: #FFF3E0; /* 크리미한 거품색 */ stroke: #FFCC80; stroke-width: 1;} /* 연한 주황색 테두리 */ .mug-handle { fill: none; stroke: #FFCC80; stroke-width: 6; } /* 손잡이 */ </style> </defs> <g transform="translate(20, 25)"> <rect class="laptop-lid" ry="8" rx="8" height="100" width="130" y="0" x="0"></rect> <path class="laptop-base" d="M 10 100 L 120 100 Q 125 100, 128 105 L 135 110 L -5 110 L 2 105 Q 5 100, 10 100 Z"></path> <rect class="screen-bezel" height="80" width="110" y="10" x="10"></rect> <rect class="terminal-bg" height="70" width="100" y="15" x="15"></rect> <text class="terminal-text" y="55" x="25"> <tspan class="prompt">></tspan> <tspan dx="5" class="initials">H.P</tspan> <tspan dx="5" class="cursor">_</tspan> </text> </g> <g transform="translate(100, 15)"> <path d="M 15 40 Q 25 25, 45 30 T 65 30 T 85 40 Z" class="mug-foam"></path> <path d="M 20 40 L 20 120 Q 20 130, 30 130 L 70 130 Q 80 130, 80 120 L 80 40 Z" class="mug-glass"></path> <path d="M 80 60 C 100 70, 100 100, 80 110" class="mug-handle"></path> </g> </svg>
Upload
Copy
Download
Share
>
H.P
_
Preview
React
React Native
PNG
Data URI
>
H.P
_
100%
Download
SVG
Viewer
Edit
Export
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Optimize
1.96 KB
1.13 KB
-42%
Prettify
Preferences
Clear
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 160" height="160" width="280"> <defs> <style> @keyframes blink { 50% { opacity: 0; } } /* 노트북 스타일 */ .laptop-base { fill: #CFD8DC; } /* 밝은 회색 베이스 */ .laptop-lid { fill: #90A4AE; } /* 약간 더 어두운 회색 뚜껑(화면 뒷면) */ .screen-bezel { fill: #455A64; rx: 2; ry: 2;} /* 어두운 화면 베젤 */ .terminal-bg { fill: #1C1E20; } /* 거의 검은색 터미널 배경 */ .terminal-text { font-family: 'Fira Code', 'Consolas', monospace; /* 코딩용 폰트 느낌 */ font-size: 14px; fill: #00E676; /* 밝은 녹색 텍스트 */ text-anchor: start; } .prompt { font-weight: bold; } .initials { fill: #FFFFFF; font-weight: bold; } /* 흰색 이니셜 */ .cursor { font-weight: bold; animation: blink 1s step-end infinite; } /* 맥주잔 스타일 */ .mug-glass { fill: #FFA726; /* 주황색 맥주 */ stroke: #E65100; stroke-width: 1; } /* 진한 주황색 테두리 */ .mug-foam { fill: #FFF3E0; /* 크리미한 거품색 */ stroke: #FFCC80; stroke-width: 1;} /* 연한 주황색 테두리 */ .mug-handle { fill: none; stroke: #FFCC80; stroke-width: 6; } /* 손잡이 */ </style> </defs> <g transform="translate(20, 25)"> <rect class="laptop-lid" ry="8" rx="8" height="100" width="130" y="0" x="0"></rect> <path class="laptop-base" d="M 10 100 L 120 100 Q 125 100, 128 105 L 135 110 L -5 110 L 2 105 Q 5 100, 10 100 Z"></path> <rect class="screen-bezel" height="80" width="110" y="10" x="10"></rect> <rect class="terminal-bg" height="70" width="100" y="15" x="15"></rect> <text class="terminal-text" y="55" x="25"> <tspan class="prompt">></tspan> <tspan dx="5" class="initials">H.P</tspan> <tspan dx="5" class="cursor">_</tspan> </text> </g> <g transform="translate(100, 15)"> <path d="M 15 40 Q 25 25, 45 30 T 65 30 T 85 40 Z" class="mug-foam"></path> <path d="M 20 40 L 20 120 Q 20 130, 30 130 L 70 130 Q 80 130, 80 120 L 80 40 Z" class="mug-glass"></path> <path d="M 80 60 C 100 70, 100 100, 80 110" class="mug-handle"></path> </g> </svg>
Upload
Copy
Download
Share
>
H.P
_
Preview
React
React Native
PNG
Data URI
>
H.P
_
100%
Download