Turning a line into a ring is a simple task in graphics programs such as GIMP:
(source: adamhaskell.net)
I'm trying to work out if it's possible to produce the same effect in CSS.
So I worked out the following:
x
to r
and y
to θ
x
is scaled to the range of [0,w/2]
, with w
being the width of the imagey
is scaled to the range of [0,2π]
xc = rp*cos(θp)
and yc = rp*sin(θp)
x' = (x/2)*cos(y/h*2π) + w/2;
y' = (x/2)*sin(y/h*2π) + h/2;
This is all fine and dandy, but how can I produce such a transform in CSS? Presumably none of the keywords are useful, so it has to be a Matrix transform. Well, I have no idea how to build a matrix from the two equations above, much less how to represent it in a CSS transform.
Can anyone help me on this last step?
I never worked with CSS transform matrices, but I think what you want is not possible. Using transform matrices you do a linear transformation. Linear transformations ALWAYS map a straight line to a straight line or to 0. Take a look at Wikipedia for more information.
So it's impossible to map a straight line to a circle using matrices.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With