Want to rub a massively pregnant umbreon's belly? It's like petting a cat — inexplicably therapeutic.
(you can click (or tap if using a touchscreen) and drag on her belly to rub her) __________________________________________________________________________________
Alright, lots to explain. The first is that this is a simple proof of concept ― I don't know what I might do with this sort of content in the future, but I know I can do it now. It's meant to be minimal enough to show off the idea, though polished enough to still be a little enjoyable.
This is an interactive SVG, which essentially no sites allow users to upload, hence having to host it myself (well, have my boyfriend host it). This is the kind of HTML5 content that was supposed to succeed Flash but pretty much never did. The upside is that it should work in basically any modern web browser, though simple SVG viewers may not display it correctly and certainly won't have any working interactivity. This has been tested/debugged in a few browsers (shoutouts to Blink browsers like Chrome and Edge for making me work around their inability to handle masks on grouped elements or animations on the `rotate` CSS attribute by the way), including mobile ones, so it should work for pretty much everyone.
The way this works is that SVGs are already “HTML-ish enough” XML that browsers can render, so it can be combined with CSS and particularly JavaScript in the same file to make the graphic itself animated and interactive the same way you could a webpage. Add some judicious use of features like the ability to embed fonts in CSS, and you have a whole interactive in a single self-contained file.
The happy coincidence here is that much of my work is practically vector art already, drawn using Bézier curves aside from the soft shading (which might still be possible to reproduce with some substantial effort). That means that I can basically just draw like I normally would, but with attention to how parts are grouped together so that they're animatable later, and you pretty much end up with a normal piece of mine that happens to be fit for turning into an interactive. I'm still not totally convinced by Inkscape (I can't even remember how many bugs I encountered while making this), but I have to admit I've really warmed up to vector art on a conceptual level. Nondestructive, not bound to a specific resolution, lossless, no real distinction between “project files” and the deliverable image, and extensibility into animation and interactivity because of its XML format. I'm half-tempted to almost always work with something more purely vectorial, but sadly, no sites really accept SVGs for uploads.
I should probably avoid going into any deep technical details on how this is scripted, especially since the entire source is already accessible in the file itself (just inspect it with your browser or open it in a text editor; it's quite heavily commented specifically to help people read through it if they want), but I'll say that I'm fairly happy with it on the programming side. The speech bubble turned out exactly as I always imagined it, for one, as a fairly natural take on animating my unique style of writing dialogue. All the code together is just a little over 200 lines of JS, and much of that is an event handling system that I think is fairly elegant and ought to be very reusable if I make something like this again.
Speaking of which, I don't know what future prospects for this kind of work are. I do want to be primarily a “traditional” visual artist, but interactives are something I always valued and imagined making some contribution to myself. Having demonstrated it's possible, my mind's now on whether I could develop some kind of physics for interacting with the big round things, since that adds a whole other dimension of fun. Seeing Vi actually breathe as she sits there already makes the whole thing feel a lot more lively, and seeing her react to what you do means a lot as well, but seeing a little jostling around in response would be even better. We'll see where that goes.
Oh, and I'd like whatever else I make to be a bit more overtly sexualized, of course, but I guess I can live with this one being tame. As rare as that is for Vi, at least.
