Zimeng Xiong
66 lines
3.6 KiB
XML
66 lines
3.6 KiB
XML
<svg width="100%" height="100%" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<style>
|
|
.stroke-main { stroke: #E2E8F0; }
|
|
.fill-teal { fill: #134E4A; } /* teal-900 */
|
|
.stroke-teal { stroke: #2DD4BF; } /* teal-400 */
|
|
.fill-orange { fill: #7C2D12; } /* orange-900 */
|
|
.stroke-orange { stroke: #FB923C; } /* orange-400 */
|
|
.fill-purple { fill: #581C87; } /* purple-900 */
|
|
.stroke-purple { stroke: #A78BFA; } /* purple-400 */
|
|
.stroke-red { stroke: #F87171; } /* red-400 */
|
|
.fill-pencil-body { fill: #FACC15; } /* yellow-400 */
|
|
.fill-pencil-eraser { fill: #F472B6; } /* pink-400 */
|
|
.fill-pencil-collar { fill: #475569; } /* slate-600 */
|
|
.fill-pencil-tip { fill: #E2E8F0; }
|
|
</style>
|
|
<defs>
|
|
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="8"></feGaussianBlur>
|
|
<feOffset dx="4" dy="8" result="offsetblur"></feOffset>
|
|
<feComponentTransfer>
|
|
<feFuncA type="linear" slope="0.2"></feFuncA>
|
|
</feComponentTransfer>
|
|
<feMerge>
|
|
<feMergeNode></feMergeNode>
|
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
<!-- Group: The Dashboard Grid (2x2) -->
|
|
<g class="stroke-main" stroke-width="32" stroke-linecap="round" stroke-linejoin="round">
|
|
<!-- Top Left: Bar Chart -->
|
|
<rect class="fill-teal" x="40" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
|
|
<path class="stroke-teal" d="M100 180 V 140"></path>
|
|
<path class="stroke-teal" d="M140 180 V 100"></path>
|
|
<path class="stroke-teal" d="M180 180 V 160"></path>
|
|
<!-- Top Right: Pie Chart -->
|
|
<rect class="fill-orange" x="272" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
|
|
<circle class="stroke-orange" cx="372" cy="140" r="50" stroke-width="24"></circle>
|
|
<!-- Slice -->
|
|
<path class="stroke-orange" d="M372 140 L 405 105" stroke-width="12"></path>
|
|
<!-- Bottom Left: List/Text -->
|
|
<rect class="fill-purple" x="40" y="272" width="200" height="200" rx="32" stroke-width="24"></rect>
|
|
<line class="stroke-purple" x1="80" y1="332" x2="200" y2="332"></line>
|
|
<line class="stroke-purple" x1="80" y1="372" x2="160" y2="372"></line>
|
|
<line class="stroke-purple" x1="80" y1="412" x2="180" y2="412"></line>
|
|
<!-- Bottom Right: The "Creation" Zone -->
|
|
<!-- Dashed placeholder for the item being created -->
|
|
<rect class="stroke-red" x="272" y="272" width="200" height="200" rx="32" fill="none"
|
|
stroke-width="24" stroke-dasharray="30 30"></rect>
|
|
</g>
|
|
<!-- The Pencil (Floating over the bottom right) -->
|
|
<g transform="translate(380, 380) rotate(-45)" filter="url(#softShadow)">
|
|
<!-- Body -->
|
|
<path class="fill-pencil-body stroke-main" d="M-25 -100 L-25 80 L0 120 L25 80 L25 -100 Z"
|
|
stroke-width="24" stroke-linejoin="round"></path>
|
|
<!-- Eraser -->
|
|
<path class="fill-pencil-eraser stroke-main"
|
|
d="M-25 -100 L-25 -130 C-25 -150, 25 -150, 25 -130 L25 -100 Z" stroke-width="24"
|
|
stroke-linejoin="round"></path>
|
|
<!-- Collar -->
|
|
<rect class="fill-pencil-collar stroke-main" x="-25" y="-100" width="50" height="30"
|
|
stroke-width="24" stroke-linejoin="round"></rect>
|
|
<!-- Tip Lead -->
|
|
<path class="fill-pencil-tip" d="M-8 108 L0 120 L8 108 Z"></path>
|
|
</g>
|
|
</svg> |