
Pixel Art SVG
Prompt
Pixel Art SVG of a cute mario on stage 1-1
Of course! Here is a handcrafted SVG of a cute, pixel-art Mario in a scene reminiscent of World 1-1. This SVG is pure vector code, so you can scale it to any size without losing the sharp, pixel-perfect quality. The `shape-rendering="crispEdges"` attribute is used to ensure the pixels stay sharp and don't get anti-aliased by browsers. ### The Pixel Art SVG ### SVG Code You can copy this code and save it as an `.svg` file (e.g., `mario-1-1.svg`) and open it in any modern web browser or vector editor like Inkscape or Adobe Illustrator. ```xml <svg width="480" height="450" viewBox="0 0 320 300" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"> <title>Pixel Art SVG of a cute mario on stage 1-1</title> <desc>A pixel art scene featuring a cute Mario in World 1-1 with a question block, brick blocks, a cloud, and a bush. Created with SVG rectangles.</desc> <!-- Define Colors --> <defs> <style> .sky { fill: #5C94FC; } .mario-red { fill: #D93628; } .mario-blue { fill: #1E50A0; } .mario-skin { fill: #FDC898; } .mario-brown { fill: #783C10; } .block-yellow { fill: #FCD834; } .block-brick { fill: #C46C18; } .block-outline { fill: #000000; } .ground-green { fill: #00A800; } .ground-dirt { fill: #E47824; } .cloud-white { fill: #FFFFFF; } </style> </defs> <!-- Background --> <rect class="sky" width="100%" height="100%"/> <!-- Scenery (Cloud) --> <g id="cloud"> <rect class="cloud-white" x="40" y="50" width="10" height="10"/> <rect class="cloud-white" x="50" y="40" width="30" height="20"/> <rect class="cloud-white" x="80" y="50" width="10" height="10"/> </g> <!-- Scenery (Bush) --> <g id="bush"> <rect class="ground-green" x="220" y="190" width="50" height="10"/> <rect class="ground-green" x="230" y="180" width="30" height="10"/> </g> <!-- Ground --> <g id="ground"> <!-- Top green layer --> <rect class="ground-green" y="200" width="320" height="20"/> <!-- Dirt layer --> <rect class="ground-dirt" y="220" width="320" height="80"/> </g> <!-- World Blocks --> <g id="blocks"> <!-- ? Block --> <g id="question-block"> <rect class="block-yellow" x="140" y="120" width="40" height="40"/> <!-- ? symbol --> <rect class="block-outline" x="150" y="130" width="20" height="10"/> <rect class="block-outline" x="160" y="140" width="10" height="10"/> <rect class="block-outline" x="160" y="150" width="10" height="10"/> <rect class="block-outline" x="150" y="150" width="10" height="10"/> </g> <!-- Brick Blocks --> <g id="brick-blocks"> <rect class="block-brick" x="100" y="120" width="40" height="40"/> <rect class="block-brick" x="180" y="120" width="40" height="40"/> <rect class="block-brick" x="220" y="120" width="40" height="40"/> <!-- Mortar lines --> <rect class="block-outline" x="100" y="130" width="40" height="10"/> <rect class="block-outline" x="110" y="120" width="10" height="10"/> <rect class="block-outline" x="130" y="120" width="10" height="10"/> <rect class="block-outline" x="100" y="140" width="10" height="20"/> <rect class="block-outline" x="120" y="140" width="10" height="20"/> <rect class="block-outline" x="180" y="130" width="40" height="10"/> <rect class="block-outline" x="190" y="120" width="10" height="10"/> <rect class="block-outline" x="210" y="120" width="10" height="10"/> <rect class="block-outline" x="180" y="140" width="10" height="20"/> <rect class="block-outline" x="200" y="140" width="10" height="20"/> <rect class="block-outline" x="220" y="130" width="40" height="10"/> <rect class="block-outline" x="230" y="120" width="10" height="10"/> <rect class="block-outline" x="250" y="120" width="10" height="10"/> <rect class="block-outline" x="220" y="140" width="10" height="20"/> <rect class="block-outline" x="240" y="140" width="10" height="20"/> </g> </g> <!-- Mario --> <g id="mario" transform="translate(60, 140)"> <!-- Hat --> <rect class="mario-red" x="10" y="0" width="40" height="10"/> <rect class="mario-red" x="0" y="10" width="50" height="10"/> <!-- Hair & Face --> <rect class="mario-brown" x="0" y="20" width="10" height="20"/> <rect class="mario-skin" x="10" y="20" width="30" height="10"/> <rect class="mario-brown" x="10" y="30" width="20" height="10"/> <!-- Moustache --> <rect class="mario-skin" x="30" y="30" width="10" height="10"/> <rect class="mario-brown" x="40" y="20" width="10" height="10"/> <!-- Sideburn --> <!-- Body --> <rect class="mario-blue" x="10" y="40" width="10" height="10"/> <rect class="mario-red" x="20" y="40" width="20" height="10"/> <rect class="mario-blue" x="40" y="40" width="10" height="10"/> <rect class="mario-blue" x="0" y="50" width="50" height="10"/> <!-- Arm (Left) --> <rect class="mario-red" x="-10" y="40" width="10" height="10"/> <rect class="mario-skin" x="-10" y="50" width="10" height="10"/> <!-- Arm (Right) --> <rect class="mario-red" x="50" y="40" width="10" height="10"/> <rect class="mario-skin" x="50" y="50" width="10" height="10"/> <!-- Legs & Feet --> <rect class="mario-brown" x="0" y="60" width="20" height="10"/> <rect class="mario-brown" x="30" y="60" width="20" height="10"/> </g> </svg> ``` ### How an SVG for Pixel Art Works: * **`<svg>` tag:** Defines the canvas. `viewBox="0 0 320 300"` creates an internal coordinate system of 320x300 units. Each "pixel" in this design is a 10x10 unit square. * **`shape-rendering="crispEdges"`:** This is the magic attribute. It tells the browser not to smooth the edges of shapes, preserving the sharp, blocky look essential for pixel art. * **`<defs>` and `<style>`:** This section defines CSS-like classes for the colors. This makes the code much cleaner and easier to modify if you want to change the color palette. * **`<rect>` tag:** The building block of this entire image. Each "pixel" is a `<rect>` element with an `x` and `y` position, a `width` and `height` (both 10), and a `class` for its color. * **`<g>` tag:** The 'group' tag is used to organize elements. I've grouped Mario, the blocks, the ground, and the scenery to keep the code readable. The `transform` attribute on Mario's group allows me to move the entire character easily without changing the coordinates of each individual pixel.
Drag to resize
Here's a pixel art SVG of cute Mario on World 1-1: ```svg <svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> <!-- Sky background --> <rect width="400" height="300" fill="#5C94FC"/> <!-- Ground --> <rect x="0" y="240" width="400" height="60" fill="#228B22"/> <!-- Ground blocks --> <rect x="0" y="240" width="32" height="16" fill="#8B4513" stroke="#654321" stroke-width="1"/> <rect x="32" y="240" width="32" height="16" fill="#8B4513" stroke="#654321" stroke-width="1"/> <rect x="64" y="240" width="32" height="16" fill="#8B4513" stroke="#654321" stroke-width="1"/> <rect x="96" y="240" width="32" height="16" fill="#8B4513" stroke="#654321" stroke-width="1"/> <rect x="128" y="240" width="32" height="16" fill="#8B4513" stroke="#654321" stroke-width="1"/> <rect x="160" y="240" width="32" height="16" fill="#8B4513" stroke="#654321" stroke-width="1"/> <rect x="192" y="240" width="32" height="16" fill="#8B4513" stroke="#654321" stroke-width="1"/> <rect x="224" y="240" width="32" height="16" fill="#8B4513" stroke="#654321" stroke-width="1"/> <rect x="256" y="240" width="32" height="16" fill="#8B4513" stroke="#654321" stroke-width="1"/> <rect x="288" y="240" width="32" height="16" fill="#8B4513" stroke="#654321" stroke-width="1"/> <rect x="320" y="240" width="32" height="16" fill="#8B4513" stroke="#654321" stroke-width="1"/> <rect x="352" y="240" width="32" height="16" fill="#8B4513" stroke="#654321" stroke-width="1"/> <!-- Clouds --> <g transform="translate(300, 60)"> <rect x="0" y="8" width="8" height="8" fill="white"/> <rect x="8" y="0" width="24" height="8" fill="white"/> <rect x="32" y="8" width="8" height="8" fill="white"/> <rect x="0" y="16" width="40" height="8" fill="white"/> <rect x="8" y="24" width="24" height="8" fill="white"/> </g> <!-- Pipe --> <g transform="translate(320, 192)"> <rect x="0" y="0" width="32" height="8" fill="#228B22"/> <rect x="4" y="8" width="24" height="40" fill="#228B22"/> <rect x="0" y="0" width="32" height="4" fill="#32CD32"/> <rect x="4" y="8" width="4" height="40" fill="#32CD32"/> </g> <!-- Mario --> <g transform="translate(80, 192)"> <!-- Hat --> <rect x="8" y="0" width="32" height="8" fill="#FF0000"/> <rect x="4" y="8" width="40" height="8" fill="#FF0000"/> <!-- Face --> <rect x="12" y="16" width="24" height="8" fill="#FFDBAC"/> <rect x="8" y="24" width="32" height="8" fill="#FFDBAC"/> <!-- Eyes --> <rect x="16" y="20" width="4" height="4" fill="#000000"/> <rect x="28" y="20" width="4" height="4" fill="#000000"/> <!-- Nose --> <rect x="24" y="24" width="4" height="4" fill="#FF0000"/> <!-- Mustache --> <rect x="16" y="28" width="16" height="4" fill="#8B4513"/> <!-- Shirt --> <rect x="8" y="32" width="32" height="16" fill="#FF0000"/> <rect x="12" y="36" width="8" height="4" fill="#FFD700"/> <rect x="28" y="36" width="8" height="4" fill="#FFD700"/> <!-- Overalls --> <rect x="12" y="32" width="24" height="4" fill="#0000FF"/> <rect x="16" y="36" width="4" height="8" fill="#0000FF"/> <rect x="28" y="36" width="4" height="8" fill="#0000FF"/> <!-- Arms --> <rect x="0" y="32" width="8" height="12" fill="#FFDBAC"/> <rect x="40" y="32" width="8" height="12" fill="#FFDBAC"/> <!-- Gloves --> <rect x="0" y="44" width="8" height="8" fill="#FFFFFF"/> <rect x="40" y="44" width="8" height="8" fill="#FFFFFF"/> <!-- Legs --> <rect x="12" y="48" width="8" height="12" fill="#0000FF"/> <rect x="28" y="48" width="8" height="12" fill="#0000FF"/> <!-- Shoes --> <rect x="8" y="60" width="16" height="8" fill="#8B4513"/> <rect x="24" y="60" width="16" height="8" fill="#8B4513"/> </g> <!-- Goomba --> <g transform="translate(250, 208)"> <!-- Body --> <rect x="4" y="16" width="24" height="16" fill="#8B4513"/> <rect x="0" y="8" width="32" height="16" fill="#8B4513"/> <!-- Eyes --> <rect x="8" y="12" width="4" height="4" fill="#000000"/> <rect x="20" y="12" width="4" height="4" fill="#000000"/> <!-- Eyebrows --> <rect x="6" y="8" width="8" height="4" fill="#654321"/> <rect x="18" y="8" width="8" height="4" fill="#654321"/> <!-- Feet --> <rect x="0" y="32" width="12" height="8" fill="#8B4513"/> <rect x="20" y="32" width="12" height="8" fill="#8B4513"/> </g> <!-- Question block --> <g transform="translate(160, 160)"> <rect x="0" y="0" width="32" height="32" fill="#FFD700" stroke="#FFA500" stroke-width="2"/> <rect x="4" y="4" width="24" height="24" fill="#FFFF00"/> <!-- Question mark --> <rect x="12" y="8" width="8" height="4" fill="#8B4513"/> <rect x="16" y="12" width="4" height="4" fill="#8B4513"/> <rect x="16" y="20" width="4" height="4" fill="#8B4513"/> </g> <!-- Small bush --> <g transform="translate(20, 216)"> <rect x="8" y="8" width="8" height="8" fill="#228B22"/> <rect x="0" y="16" width="24" height="8" fill="#228B22"/> <rect x="4" y="24" width="16" height="8" fill="#228B22"/> </g> </svg> ``` This pixel art SVG recreates the classic World 1-1 scene with: - Cute Mario in his classic red and blue outfit - The iconic blue sky and green ground - Brown ground blocks - A green pipe - A Goomba enemy - A question block with the "?" symbol - A fluffy white cloud - A small green bush The style maintains the blocky, pixelated aesthetic of the original 8-bit Super Mario Bros. game while keeping Mario looking cute and friendly!
Drag to resize
Sure! Below is a **pixel art-style SVG** of a **cute Mario** standing on **Stage 1-1** (inspired by the iconic mushroom platform level from Super Mario Bros). This SVG mimics the blocky, pixelated look using square shapes. You can copy and paste this code into an `.svg` file or directly into an HTML document to view it in a browser. --- ### 🎮 Pixel Art SVG: Cute Mario on Stage 1-1 ```xml <svg width="320" height="240" viewBox="0 0 320 240" xmlns="http://www.w3.org/2000/svg"> <!-- Background --> <rect width="320" height="240" fill="#87CEEB"/> <!-- Ground Blocks --> <rect x="0" y="200" width="320" height="40" fill="#8B4513"/> <rect x="0" y="180" width="20" height="20" fill="#8B4513"/> <rect x="40" y="180" width="20" height="20" fill="#8B4513"/> <rect x="80" y="180" width="20" height="20" fill="#8B4513"/> <rect x="120" y="180" width="20" height="20" fill="#8B4513"/> <rect x="160" y="180" width="20" height="20" fill="#8B4513"/> <rect x="200" y="180" width="20" height="20" fill="#8B4513"/> <rect x="240" y="180" width="20" height="20" fill="#8B4513"/> <rect x="280" y="180" width="20" height="20" fill="#8B4513"/> <rect x="300" y="180" width="20" height="20" fill="#8B4513"/> <!-- Mario (Pixel Style) --> <!-- Feet --> <rect x="100" y="160" width="10" height="10" fill="#FF0000"/> <!-- Red Pants --> <rect x="110" y="160" width="10" height="10" fill="#8B4513"/> <!-- Brown Shoes --> <rect x="120" y="160" width="10" height="10" fill="#8B4513"/> <rect x="130" y="160" width="10" height="10" fill="#FF0000"/> <!-- Body --> <rect x="100" y="130" width="10" height="10" fill="#FF0000"/> <rect x="110" y="130" width="10" height="10" fill="#FF0000"/> <rect x="120" y="130" width="10" height="10" fill="#FF0000"/> <rect x="130" y="130" width="10" height="10" fill="#FF0000"/> <rect x="100" y="140" width="10" height="10" fill="#FF0000"/> <rect x="110" y="140" width="10" height="10" fill="#FFD700"/> <!-- Yellow Shirt --> <rect x="120" y="140" width="10" height="10" fill="#FFD700"/> <rect x="130" y="140" width="10" height="10" fill="#FF0000"/> <rect x="100" y="150" width="10" height="10" fill="#FF0000"/> <rect x="110" y="150" width="10" height="10" fill="#FFD700"/> <rect x="120" y="150" width="10" height="10" fill="#FFD700"/> <rect x="130" y="150" width="10" height="10" fill="#FF0000"/> <!-- Head --> <rect x="110" y="110" width="10" height="10" fill="#F5DEB3"/> <!-- Skin Tone --> <rect x="120" y="110" width="10" height="10" fill="#F5DEB3"/> <rect x="110" y="120" width="10" height="10" fill="#F5DEB3"/> <rect x="120" y="120" width="10" height="10" fill="#F5DEB3"/> <!-- Hat --> <rect x="105" y="100" width="30" height="10" fill="#FF0000"/> <rect x="110" y="90" width="20" height="10" fill="#FF0000"/> <!-- Eyes --> <rect x="115" y="115" width="5" height="5" fill="#000000"/> <rect x="125" y="115" width="5" height="5" fill="#000000"/> <!-- Pipe (Optional Decoration) --> <rect x="260" y="140" width="20" height="40" fill="#00FF00"/> <rect x="250" y="120" width="40" height="20" fill="#00FF00"/> </svg> ``` --- ### 🖼️ What’s Included: - Simple blocky Mario with red hat, yellow shirt, and brown shoes. - Ground with brown blocks to simulate the iconic level layout. - Blue sky background. - Decorative green pipe at the side. Let me know if you'd like to: - Add enemies (Goomba, Koopa), - Add coins (`?` blocks), - Animate Mario, - Or use more authentic colors/fonts! 🎮 Feel free to customize it further!
Drag to resize
Below is a tiny, hand-crafted, fan-made pixel-art scene—inspired by a certain mustachioed plumber’s first adventure—drawn directly in SVG. Nothing here is taken from Nintendo’s original sprites; it’s an original reinterpretation using a simple 24 × 16 grid (each “pixel” is a 10 px square). Copy the code into an .svg file and open it in any browser or vector program: ```svg <?xml version="1.0" encoding="UTF-8"?> <svg viewBox="0 0 240 160" width="240" height="160" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"> <!-- Sky background --> <rect width="240" height="160" fill="#8ED1FF"/> <!-- Question blocks --> <rect x="90" y="50" width="10" height="10" fill="#F9E65B"/> <rect x="90" y="60" width="10" height="10" fill="#F9E65B"/> <rect x="120" y="60" width="10" height="10" fill="#F9E65B"/> <!-- Mario (hat & shirt: red) --> <rect x="50" y="70" width="10" height="10" fill="#E53D2E"/> <rect x="60" y="70" width="10" height="10" fill="#E53D2E"/> <rect x="70" y="70" width="10" height="10" fill="#E53D2E"/> <rect x="80" y="70" width="10" height="10" fill="#E53D2E"/> <!-- Mario (face & hands: skin tone) --> <rect x="50" y="80" width="10" height="10" fill="#FFD7B4"/> <rect x="60" y="80" width="10" height="10" fill="#FFD7B4"/> <rect x="70" y="80" width="10" height="10" fill="#FFD7B4"/> <rect x="80" y="90" width="10" height="10" fill="#FFD7B4"/> <!-- Mario (hair/moustache) --> <rect x="60" y="90" width="10" height="10" fill="#663300"/> <rect x="70" y="90" width="10" height="10" fill="#663300"/> <rect x="50" y="100" width="10" height="10" fill="#663300"/> <rect x="60" y="100" width="10" height="10" fill="#663300"/> <rect x="70" y="100" width="10" height="10" fill="#663300"/> <!-- Mario (overalls: blue) --> <rect x="40" y="110" width="10" height="10" fill="#1550FF"/> <rect x="50" y="110" width="10" height="10" fill="#1550FF"/> <rect x="60" y="110" width="10" height="10" fill="#1550FF"/> <rect x="70" y="110" width="10" height="10" fill="#1550FF"/> <!-- Mario (boots: brown) --> <rect x="50" y="120" width="10" height="10" fill="#5A3D0C"/> <rect x="60" y="120" width="10" height="10" fill="#5A3D0C"/> <rect x="50" y="130" width="10" height="10" fill="#5A3D0C"/> <rect x="60" y="130" width="10" height="10" fill="#5A3D0C"/> <!-- Warp pipe --> <rect x="150" y="80" width="10" height="10" fill="#2BBF3C"/> <rect x="160" y="80" width="10" height="10" fill="#2BBF3C"/> <rect x="150" y="90" width="10" height="10" fill="#2BBF3C"/> <rect x="160" y="90" width="10" height="10" fill="#2BBF3C"/> <rect x="140" y="100" width="10" height="10" fill="#2BBF3C"/> <rect x="150" y="100" width="10" height="10" fill="#2BBF3C"/> <rect x="160" y="100" width="10" height="10" fill="#2BBF3C"/> <rect x="170" y="100" width="10" height="10" fill="#2BBF3C"/> <rect x="140" y="110" width="10" height="10" fill="#2BBF3C"/> <rect x="150" y="110" width="10" height="10" fill="#2BBF3C"/> <rect x="160" y="110" width="10" height="10" fill="#2BBF3C"/> <rect x="170" y="110" width="10" height="10" fill="#2BBF3C"/> <!-- Ground (grass top) --> <rect y="140" width="240" height="10" fill="#4CAF50"/> <!-- Ground (dirt) --> <rect y="150" width="240" height="10" fill="#A2592A"/> </svg> ``` Feel free to tweak colors, move pixels, or expand the scene—SVG is just text, so it’s easy to edit. Have fun!
Drag to resize
```svg <svg viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg" style="image-rendering: pixelated"> <!-- Sky --> <rect x="0" y="0" width="640" height="320" fill="#5C94FC"/> <!-- Hills background --> <rect x="0" y="320" width="640" height="160" fill="#00A000"/> <path d="M 0 320 Q 80 240 160 320 Q 240 260 320 320 Q 400 260 480 320 Q 560 240 640 320 L 640 480 L 0 480 Z" fill="#008800"/> <!-- Clouds --> <rect x="100" y="60" width="120" height="40" fill="#FFFFFF"/> <rect x="80" y="80" width="160" height="20" fill="#FFFFFF"/> <rect x="400" y="120" width="80" height="20" fill="#FFFFFF"/> <rect x="380" y="140" width="120" height="20" fill="#FFFFFF"/> <!-- Ground blocks row 1 --> <rect x="0" y="400" width="640" height="80" fill="#B82800"/> <!-- Brick blocks --> <rect x="200" y="280" width="40" height="40" fill="#FFA000"/> <rect x="240" y="280" width="40" height="40" fill="#FFA000"/> <rect x="280" y="280" width="40" height="40" fill="#FFA000"/> <!-- Pipe --> <rect x="480" y="360" width="80" height="120" fill="#00B800"/> <rect x="480" y="340" width="80" height="20" fill="#00A000"/> <rect x="500" y="340" width="60" height="10" fill="#00C800"/> <!-- Mario --> <!-- Body --> <rect x="300" y="360" width="30" height="15" fill="#E80000"/> <rect x="300" y="375" width="30" height="15" fill="#868686"/> <rect x="300" y="390" width="30" height="15" fill="#000066"/> <!-- Arms --> <rect x="285" y="375" width="15" height="15" fill="#FDB889"/> <rect x="330" y="375" width="15" height="15" fill="#FDB889"/> <!-- Head --> <rect x="300" y="315" width="30" height="45" fill="#FDB889"/> <!-- Hat --> <rect x="290" y="300" width="50" height="15" fill="#E80000"/> <rect x="300" y="285" width="30" height="15" fill="#E80000"/> <!-- Eyes --> <rect x="305" y="330" width="10" height="10" fill="#000000"/> <rect x="315" y="330" width="10" height="10" fill="#000000"/> <!-- Mustache --> <rect x="300" y="345" width="30" height="5" fill="#8B4513"/> <rect x="295" y="345" width="5" height="5" fill="#8B4513"/> <rect x="330" y="345" width="5" height="5" fill="#8B4513"/> <!-- Boots --> <rect x="300" y="405" width="12" height="15" fill="#8B4513"/> <rect x="318" y="405" width="12" height="15" fill="#8B4513"/> <!-- Question block --> <rect x="360" y="240" width="40" height="40" fill="#FD9813"/> <text x="370" y="265" font-family="monospace" font-size="20" fill="#FFFFFF">?</text> <rect x="360" y="240" width="40" height="5" fill="#FDCC00"/> <rect x="360" y="240" width="5" height="40" fill="#FDCC00"/> <rect x="395" y="240" width="5" height="40" fill="#C87900"/> <rect x="360" y="275" width="40" height="5" fill="#C87900"/> </svg> ```
Drag to resize
Below is a simple SVG representation of pixel art inspired by a cute version of Mario on Stage 1-1 from *Super Mario Bros.*. I've stylized it as "cute" with a chibi-like Mario (big head, small body, exaggerated features) standing on the classic ground with a hill, bush, cloud, question block, and a pipe in the background. This is rendered using SVG rectangles to mimic a pixel art grid (each "pixel" is a 10x10 unit square for simplicity). You can copy-paste this SVG code into an HTML file (e.g., wrap it in `<html><body>...</body></html>`) or an SVG editor like Inkscape to view or edit it. It should display as a 320x240 pixel art scene. ```svg <svg width="320" height="240" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 240"> <!-- Background sky (light blue) --> <rect x="0" y="0" width="320" height="240" fill="#5C94FC" /> <!-- Ground (brown bricks) --> <rect x="0" y="200" width="320" height="40" fill="#8B4513" /> <rect x="0" y="200" width="10" height="10" fill="#A0522D" /> <rect x="10" y="200" width="10" height="10" fill="#A0522D" /> <rect x="20" y="200" width="10" height="10" fill="#A0522D" /> <!-- Pattern repeats... (simplified for brevity) --> <rect x="0" y="210" width="320" height="10" fill="#8B4513" /> <rect x="0" y="220" width="320" height="10" fill="#A0522D" /> <rect x="0" y="230" width="320" height="10" fill="#8B4513" /> <!-- Hill (green) --> <rect x="40" y="160" width="30" height="10" fill="#228B22" /> <rect x="30" y="170" width="50" height="10" fill="#228B22" /> <rect x="20" y="180" width="70" height="10" fill="#228B22" /> <rect x="10" y="190" width="90" height="10" fill="#228B22" /> <!-- Bush (green) --> <rect x="100" y="180" width="20" height="10" fill="#32CD32" /> <rect x="90" y="190" width="40" height="10" fill="#32CD32" /> <!-- Cloud (white) --> <rect x="200" y="50" width="40" height="10" fill="#FFFFFF" /> <rect x="190" y="60" width="60" height="10" fill="#FFFFFF" /> <rect x="200" y="70" width="40" height="10" fill="#FFFFFF" /> <!-- Question Block (yellow with ?) --> <rect x="150" y="140" width="20" height="20" fill="#FFD700" /> <rect x="152" y="142" width="2" height="2" fill="#000000" /> <!-- ? dot --> <rect x="152" y="146" width="2" height="4" fill="#000000" /> <!-- ? stem --> <rect x="154" y="152" width="2" height="2" fill="#000000" /> <!-- ? base --> <rect x="156" y="150" width="2" height="2" fill="#000000" /> <!-- ? hook --> <!-- Pipe (green) --> <rect x="250" y="150" width="30" height="50" fill="#008000" /> <rect x="240" y="140" width="50" height="10" fill="#008000" /> <!-- Cute Mario (chibi style: big head, small body) --> <!-- Hat (red) --> <rect x="80" y="130" width="30" height="10" fill="#FF0000" /> <rect x="70" y="140" width="50" height="10" fill="#FF0000" /> <!-- Face (skin tone) --> <rect x="80" y="150" width="30" height="20" fill="#FFDAB9" /> <!-- Eyes (white with black pupils) --> <rect x="85" y="152" width="5" height="5" fill="#FFFFFF" /> <rect x="100" y="152" width="5" height="5" fill="#FFFFFF" /> <rect x="87" y="154" width="1" height="1" fill="#000000" /> <rect x="102" y="154" width="1" height="1" fill="#000000" /> <!-- Mustache (black) --> <rect x="90" y="160" width="10" height="5" fill="#000000" /> <!-- Overalls (blue) --> <rect x="85" y="170" width="20" height="20" fill="#0000FF" /> <!-- Shirt (red) --> <rect x="80" y="170" width="30" height="10" fill="#FF0000" /> <!-- Arms (red sleeves, skin hands) --> <rect x="70" y="170" width="10" height="10" fill="#FF0000" /> <rect x="110" y="170" width="10" height="10" fill="#FF0000" /> <rect x="65" y="180" width="10" height="10" fill="#FFDAB9" /> <rect x="115" y="180" width="10" height="10" fill="#FFDAB9" /> <!-- Legs (blue) --> <rect x="85" y="190" width="10" height="10" fill="#0000FF" /> <rect x="95" y="190" width="10" height="10" fill="#0000FF" /> <!-- Shoes (brown) --> <rect x="80" y="200" width="15" height="10" fill="#8B4513" /> <rect x="95" y="200" width="15" height="10" fill="#8B4513" /> </svg> ``` ### How to Use/View This: - **Preview**: Paste the code into an online SVG viewer (e.g., search for "SVG viewer online") or save it as `mario-pixel.svg` and open in a browser. - **Customization**: This is a basic 32x24 grid approximation. You can scale it up by changing the `width` and `height` attributes. For more detail, you could add more "pixels" or use a tool to refine it. - **Why SVG for Pixel Art?**: SVGs are scalable and lightweight, perfect for vector-based pixel art that doesn't blur when zoomed. If you want variations (e.g., animated, more detailed, or a different pose/scene), let me know!
Drag to resize