Creating stateful SVG interfaces from pixel art @DrewConley
Creating stateful SVG interfaces from pixel art  @DrewConley
Uploaded November 2019 | Updated September 2026, 1 hour ago
In this tutorial, we'll look at a technique for converting pixel art to vector SVG for usage with HTML, CSS, and JavaScript.

CodePen demo: codepen.io/punkydrewster713/pen/rNNdzBe
Aseprite: aseprite.org
Shaw's Pixels-To-Svg Tool: cdpn.io/shshaw/debug/XbxvNj

⭐️ Get early access to my full JS Game Dev course:
drew-conley-courses.kit.com/66eb6d3ff4

💬 Join our Discord community of people making video games:
discord.gg/umD2GRy

Let's be buds on Twitter: twitter.com/drewconley13
Creating stateful SVG interfaces from pixel artPizza Team HUD - RPG Battle pt. 7Game Loop Speed in Pizza LegendsGODOT TUTORIAL: Using a NinePatchRect to create flexible, reusable backgroundsPizza RPG Part 10 - Typewriters & Scene TransitionsLocal Overrides in Chrome Dev ToolsGodot Engine 3.2 for people who know JavaScript - Beginner tutorial (Game Setup, Nodes, GDScript)The Danger Crew Battle Demo walkthroughStory Progress! Pizza RPG Ep. 13Status Effects - Pizza RPG Battles Pt. 3Finishing the Battle! Pizza Battle RPG Pt. 8GODOT TUTORIAL #4: Collisions, Export inspector variables, Top Down layering (for beginners)
Drew Conley |

Creating stateful SVG interfaces from pixel art

SHARE TO X SHARE TO REDDIT SHARE TO FACEBOOK WALLPAPER