SVG
Viewer
VhcGxnIR
N/A
Send feedback
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Optimize
2.5 KB
1.9 KB
-24%
Prettify
Preferences
Clear
<svg viewBox="0 0 300 300" aria-describedby="desc" aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" height="300" width="300"> <title>Boy Eating Sandwich</title> <desc id="desc">A simple cartoon illustration of a boy holding a multi-layered sandwich near his mouth, as if about to take a bite.</desc> <defs> #F5D3A9 #5D4037 #4A90E2 #333333 #333333 #D2B48C #90EE90 #FF6347 </defs> <style> .outline { stroke: var(--outlineColor, #333); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sandwich-outline { stroke: var(--outlineColor, #333); stroke-width: 1; } </style> <g id="boy"> <rect class="outline" fill="var(--shirtColor, #4A90E2)" rx="15" height="130" width="100" y="120" x="100"></rect> <g id="left-arm"> <path class="outline" fill="none" stroke-width="20" stroke="var(--shirtColor, #4A90E2)" d="M 110 135 Q 90 160 85 190"></path> <circle class="outline" fill="var(--skinTone, #F5D3A9)" r="10" cy="195" cx="80"></circle> </g> <g> <circle class="outline" fill="var(--skinTone, #F5D3A9)" r="40" cy="80" cx="150"></circle> <path class="outline" fill="var(--hairColor, #5D4037)" d="M115,75 Q110,45 150,40 Q190,45 185,75 Q190,85 175,90 L125,90 Q110,85 115,75 Z"></path> <circle fill="var(--eyeColor, #333)" r="4" cy="75" cx="135"></circle> <circle fill="var(--eyeColor, #333)" r="4" cy="75" cx="165"></circle> <path stroke-width="2" stroke="var(--outlineColor, #333)" fill="none" d="M 145 95 Q 150 103 155 95"></path> </g> <g transform="translate(10, 0)" id="sandwich"> <rect class="sandwich-outline" fill="var(--breadColor, #D2B48C)" rx="3" height="10" width="45" y="98" x="160"></rect> <rect class="sandwich-outline" fill="var(--lettuceColor, #90EE90)" rx="2" height="5" width="49" y="93" x="158"></rect> <rect class="sandwich-outline" fill="var(--tomatoColor, #FF6347)" rx="2" height="5" width="45" y="88" x="160"></rect> <rect class="sandwich-outline" fill="var(--breadColor, #D2B48C)" rx="3" height="10" width="45" y="78" x="160"></rect> </g> <g id="right-arm"> <path class="outline" fill="none" stroke-width="20" stroke="var(--shirtColor, #4A90E2)" d="M 190 135 Q 215 140 200 110"></path> <circle class="outline" fill="var(--skinTone, #F5D3A9)" r="12" cy="105" cx="190"></circle> </g> </g> </svg>
Upload
Copy
Download
Share
Boy Eating Sandwich
A simple cartoon illustration of a boy holding a multi-layered sandwich near his mouth, as if about to take a bite.
#F5D3A9 #5D4037 #4A90E2 #333333 #333333 #D2B48C #90EE90 #FF6347
Preview
React
React Native
PNG
Data URI
Boy Eating Sandwich
A simple cartoon illustration of a boy holding a multi-layered sandwich near his mouth, as if about to take a bite.
#F5D3A9 #5D4037 #4A90E2 #333333 #333333 #D2B48C #90EE90 #FF6347
100%
Download
SVG
Viewer
Edit
Export
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Optimize
2.5 KB
1.9 KB
-24%
Prettify
Preferences
Clear
<svg viewBox="0 0 300 300" aria-describedby="desc" aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" height="300" width="300"> <title>Boy Eating Sandwich</title> <desc id="desc">A simple cartoon illustration of a boy holding a multi-layered sandwich near his mouth, as if about to take a bite.</desc> <defs> #F5D3A9 #5D4037 #4A90E2 #333333 #333333 #D2B48C #90EE90 #FF6347 </defs> <style> .outline { stroke: var(--outlineColor, #333); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sandwich-outline { stroke: var(--outlineColor, #333); stroke-width: 1; } </style> <g id="boy"> <rect class="outline" fill="var(--shirtColor, #4A90E2)" rx="15" height="130" width="100" y="120" x="100"></rect> <g id="left-arm"> <path class="outline" fill="none" stroke-width="20" stroke="var(--shirtColor, #4A90E2)" d="M 110 135 Q 90 160 85 190"></path> <circle class="outline" fill="var(--skinTone, #F5D3A9)" r="10" cy="195" cx="80"></circle> </g> <g> <circle class="outline" fill="var(--skinTone, #F5D3A9)" r="40" cy="80" cx="150"></circle> <path class="outline" fill="var(--hairColor, #5D4037)" d="M115,75 Q110,45 150,40 Q190,45 185,75 Q190,85 175,90 L125,90 Q110,85 115,75 Z"></path> <circle fill="var(--eyeColor, #333)" r="4" cy="75" cx="135"></circle> <circle fill="var(--eyeColor, #333)" r="4" cy="75" cx="165"></circle> <path stroke-width="2" stroke="var(--outlineColor, #333)" fill="none" d="M 145 95 Q 150 103 155 95"></path> </g> <g transform="translate(10, 0)" id="sandwich"> <rect class="sandwich-outline" fill="var(--breadColor, #D2B48C)" rx="3" height="10" width="45" y="98" x="160"></rect> <rect class="sandwich-outline" fill="var(--lettuceColor, #90EE90)" rx="2" height="5" width="49" y="93" x="158"></rect> <rect class="sandwich-outline" fill="var(--tomatoColor, #FF6347)" rx="2" height="5" width="45" y="88" x="160"></rect> <rect class="sandwich-outline" fill="var(--breadColor, #D2B48C)" rx="3" height="10" width="45" y="78" x="160"></rect> </g> <g id="right-arm"> <path class="outline" fill="none" stroke-width="20" stroke="var(--shirtColor, #4A90E2)" d="M 190 135 Q 215 140 200 110"></path> <circle class="outline" fill="var(--skinTone, #F5D3A9)" r="12" cy="105" cx="190"></circle> </g> </g> </svg>
Upload
Copy
Download
Share
Boy Eating Sandwich
A simple cartoon illustration of a boy holding a multi-layered sandwich near his mouth, as if about to take a bite.
#F5D3A9 #5D4037 #4A90E2 #333333 #333333 #D2B48C #90EE90 #FF6347
Preview
React
React Native
PNG
Data URI
Boy Eating Sandwich
A simple cartoon illustration of a boy holding a multi-layered sandwich near his mouth, as if about to take a bite.
#F5D3A9 #5D4037 #4A90E2 #333333 #333333 #D2B48C #90EE90 #FF6347
100%
Download