Uniform thickness border around skewed ellipse?

I have an ellipse with a given major and minor 'radius'. I then apply a 2D skew affine transformation to it. Then, I want to draw a uniform border inside this new shape, as if a circle were rolled along the interior edge of the newly transformed ellipse, and everywhere the circle touched was drawn in a different color. Or as if the new shape had been outlined with a marker.

This essentially divides the ellipse into an "outer" shape which separates the border from the rest of the scene, and an "inner" shape that separates the border from the interior of my shape. See the diagram at the end of my post.

In the case of this diagram, the very edge of the black outline would be the outer shape, and the shape defined by the transition from green to black would be the inner shape.

The outer shape is an ellipse, I'm fairly certain, as it's just an affine transformation of my original ellipse. I'm not sure if the inner shape I want is also an ellipse. If I assume that the inner shape has the same affine transformation as the out shape, and I just adjust the major/minor axis radii, I get something like in the diagram. The inner shape doesn't intuitively match up with outer shape. It's as if I've drawn a completely arbitrary green ellipse inside my black ellipse. The green ellipse seems to have a different rotation even.

So my questions: Is the inner shape I actually want an ellipse? If so, what are its major/minor axes, and does it have a different affine transformation from its parent? If it does have a different transformation, how do I find it? If it's not an ellipse, what is it?

...

I couldn't upload an imagine because I don't have the reputation points (ugh), but this is the code for it in SVG:

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g transform="skewY(30) rotate(-32)">
        <ellipse cx="250" cy="225" rx="225" ry="125" style="fill:rgb(0,0,0);"/>
        <ellipse cx="250" cy="225" rx="175" ry="75" style="fill:rgb(0,100,50);"/>
    </g>
</svg>

Chrome and Firefox can both display this if you put this into a text file with a .svg extention. If someone can post an image of it for me, I'd appreciate it (not all sites like svg extensions... You might need to rasterize it into a png first).

It also makes it very easy to play around with different transformations and settings for the ellipses. The SVG manual is useful for understanding how the transforms and skews are interpreted.

Solution 1:

The inner shape is indeed not an ellipse, as Skatche explains. It is a parallel curve of the original ellipse. I don't think it has a specific name. If you need equations, the Wikipedia article has a parametric form.

Solution 2:

I think you're right about ellipses being preserved under affine transformations. However, notwithstanding that, it's not true in general that the interior shape you're drawing will be an ellipse.

Let's start with an outer circle, call it $C$, of radius $D>d$, where $d$ is the thickness of the border. You can get the border by rolling a circle $c$ of radius $d$ around the inside of $C$. Now start stretching $C$ horizontally into an ellipse, so that it reaches its maximum curvature at the leftmost and rightmost points. Eventually, the maximum curvature of $C$ will be greater than the curvature of $c$, at which point your inner border will develop "corners" (you can imagine $c$ getting stuck when $C$ becomes too narrow and rebounding), so it can't possibly be an ellipse.