MushroomFleet TiledSVG: Tiled Grid SVG Creation
Create complex SVG graphics by decomposing the canvas into a tile grid, designing each tile with focused detail, then assembling into a unified image.
Core Method
- Plan - Define canvas size, grid density, and map subject to tiles
- Define - Create color palette with gradients/patterns in
<defs> - Build - Construct each tile as a
<g>group with local coordinates - Layer - Add depth within tiles: shadows → base → details → highlights
- Assemble - Position tiles with
transform="translate(x, y)"
Grid Selection
| Complexity | Grid | Tiles | Use Case |
|---|---|---|---|
| Simple | 4×4 | 16 | Icons, symbols |
| Medium | 6×6 | 36 | Simple characters, objects |
| Detailed | 8×8 | 64 | Scenes, detailed characters |
| Complex | 9×9+ | 81+ | Full illustrations, landscapes |
Formula: tile_size = canvas_size / grid_count
Step 1: Reference Mapping
Map subject onto grid with annotations:
House Scene (9×9):
┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
│ S │ S │ S │ S │ S │ S │ S │ ☀ │ S │ S=Sky
├───┼───┼───┼───┼───┼───┼───┼───┼───┤
│ ☁ │ S │ S │ S │ S │ S │ S │ S │ ☁ │ ☁=Cloud
├───┼───┼───┼───┼───┼───┼───┼───┼───┤
│ S │ S │ C │ R │ R │ R │ R │ S │ S │ C=Chimney R=Roof
├───┼───┼───┼───┼───┼───┼───┼───┼───┤
│ S │ T │ W │ H │ H │ H │ W │ T │ S │ T=Tree W=Window
├───┼───┼───┼───┼───┼───┼───┼───┼───┤
│ G │ T │ H │ D │ D │ D │ H │ T │ G │ D=Door H=House
├───┼───┼───┼───┼───┼───┼───┼───┼───┤
│ G │ G │ G │ P │ P │ P │ G │ G │ G │ G=Grass P=Path
├───┼───┼───┼───┼───┼───┼───┼───┼───┤
│ F │ G │ G │ P │ P │ P │ G │ G │ F │ F=Flowers
├───┼───┼───┼───┼───┼───┼───┼───┼───┤
│ G │ F │ G │ P │ P │ P │ G │ F │ G │
├───┼───┼───┼───┼───┼───┼───┼───┼───┤
│ G │ G │ G │ P │ P │ P │ G │ G │ G │
└───┴───┴───┴───┴───┴───┴───┴───┴───┘
Step 2: Color Palette in Defs
Define all gradients, patterns, and filters before drawing:
<defs>
<!-- Semantic grouping -->
<linearGradient id="sky-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0d47a1"/>
<stop offset="60%" stop-color="#64b5f6"/>
<stop offset="100%" stop-color="#e3f2fd"/>
</linearGradient>
<radialGradient id="sun-core" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="70%" stop-color="#ffeb3b"/>
<stop offset="100%" stop-color="#ffc107"/>
</radialGradient>
<linearGradient id="foliage-main" .../>
<linearGradient id="trunk-main" .../>
<linearGradient id="wall-main" .../>
<linearGradient id="roof-main" .../>
<pattern id="grass-blades" width="12" height="12" patternUnits="userSpaceOnUse">
<path d="M 2,12 Q 2,8 3,6" stroke="#2e7d32" stroke-width="1.5" fill="none"/>
<path d="M 6,12 Q 5,7 7,4" stroke="#388e3c" stroke-width="1" fill="none"/>
</pattern>
</defs>
Step 3: Tile Construction
Each tile is a <g> group positioned by transform. Use local coordinates (0-100 for 100px tiles):
<!-- Row-Column naming: tile-{row}-{col} -->
<!-- Position formula: translate(col * tileSize, row * tileSize) -->
<g id="tile-3-3" transform="translate(300, 300)">
<!-- Layer 1: Base shape -->
<rect width="100" height="100" fill="url(#wall-main)"/>
<!-- Layer 2: Window frame -->
<rect x="15" y="15" width="70" height="70" fill="#5d4037"/>
<!-- Layer 3: Window glass -->
<rect x="20" y="20" width="60" height="60" fill="url(#window-glass)"/>
<!-- Layer 4: Window cross -->
<rect x="48" y="20" width="4" height="60" fill="#eceff1"/>
<rect x="20" y="48" width="60" height="4" fill="#eceff1"/>
<!-- Layer 5: Reflection highlight -->
<rect x="22" y="22" width="24" height="24" fill="#fff" opacity="0.3"/>
</g>
Step 4: Layering Order
Within each tile, build depth back-to-front:
- Background/Base - Fill shapes, base colors
- Shadows - Dark shapes with low opacity
- Main elements - Primary subject shapes
- Details - Texture lines, patterns, small elements
- Highlights - White/light shapes with transparency
<g id="tile-tree-foliage" transform="translate(100, 300)">
<!-- 1. Shadow mass -->
<ellipse cx="50" cy="70" rx="50" ry="40" fill="#2e7d32" opacity="0.4"/>
<!-- 2. Main foliage -->
<ellipse cx="50" cy="55" rx="48" ry="38" fill="url(#foliage-main)"/>
<ellipse cx="30" cy="45" rx="35" ry="30" fill="url(#foliage-main)"/>
<ellipse cx="70" cy="50" rx="30" ry="25" fill="#4caf50"/>
<!-- 3. Highlight spots -->
<ellipse cx="25" cy="38" rx="12" ry="10" fill="#a5d6a7" opacity="0.6"/>
<ellipse cx="60" cy="35" rx="10" ry="8" fill="#c8e6c9" opacity="0.5"/>
</g>
Step 5: Cross-Tile Continuity
Elements spanning multiple tiles must align at edges:
<!-- Path crossing tiles 5-3, 5-4, 5-5 -->
<!-- tile-5-3: Path exits right -->
<g id="tile-5-3" transform="translate(300, 500)">
<path d="M 30,0 Q 25,50 35,100" fill="url(#path-main)"/>
<rect x="30" y="0" width="70" height="100" fill="url(#path-main)"/>
</g>
<!-- tile-5-4: Path continues full width -->
<g id="tile-5-4" transform="translate(400, 500)">
<rect x="0" y="0" width="100" height="100" fill="url(#path-main)"/>
</g>
<!-- tile-5-5: Path enters left -->
<g id="tile-5-5" transform="translate(500, 500)">
<rect x="0" y="0" width="70" height="100" fill="url(#path-main)"/>
<path d="M 70,0 Q 75,50 65,100" fill="url(#path-main)"/>
</g>
SVG Structure Template
<svg viewBox="0 0 900 900" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- All gradients, patterns, filters -->
</defs>
<!-- Background -->
<rect width="900" height="900" fill="url(#sky-gradient)"/>
<!-- Tiles by row -->
<g id="row-0">
<g id="tile-0-0" transform="translate(0, 0)">...</g>
<g id="tile-0-1" transform="translate(100, 0)">...</g>
<!-- ... -->
</g>
<g id="row-1">
<g id="tile-1-0" transform="translate(0, 100)">...</g>
<!-- ... -->
</g>
<!-- Continue for all rows -->
</svg>
Detail Techniques
Organic Shapes (Foliage, Clouds)
Stack multiple ellipses with varying positions and opacities:
<ellipse cx="50" cy="50" rx="40" ry="30" fill="#4caf50"/>
<ellipse cx="30" cy="40" rx="30" ry="25" fill="#66bb6a"/>
<ellipse cx="70" cy="45" rx="25" ry="20" fill="#81c784"/>
Texture Overlays
Apply patterns with low opacity over base fills:
<rect width="100" height="100" fill="url(#hill-gradient)"/>
<rect width="100" height="100" fill="url(#grass-blades)" opacity="0.4"/>
Architectural Details
Use rectangles with inset shadows for depth:
<!-- Door panel -->
<rect x="10" y="15" width="35" height="30" fill="url(#door-panel)" rx="2"/>
<!-- Inset shadow -->
<rect x="13" y="18" width="29" height="24" fill="#4e342e"/>
Small Details (Wildlife, Flowers)
Group related shapes with local transforms:
<!-- Butterfly -->
<g transform="translate(60, 40) rotate(-15)">
<ellipse cx="0" cy="0" rx="2" ry="7" fill="#5d4037"/>
<ellipse cx="-10" cy="-4" rx="10" ry="7" fill="#ff9800"/>
<ellipse cx="10" cy="-4" rx="10" ry="7" fill="#ff9800"/>
</g>
Iteration Process
- Rough Pass - Block in major shapes per tile
- Structure Pass - Add architectural/structural elements
- Detail Pass - Internal details, textures, small elements
- Edge Pass - Verify cross-tile alignment
- Polish Pass - Highlights, shadows, final adjustments
Common Gradient Types
| Element | Gradient Type | Direction |
|---|---|---|
| Sky | Linear | Top to bottom |
| Sun/Lights | Radial | Center out |
| Walls | Linear | Left to right or top to bottom |
| Foliage | Radial | Upper-center out |
| Ground | Linear | Top to bottom |
| Cylindrical (trunks) | Linear | Left to right |