How can I draw a hoop with both halves on different layers?

Question

I'm trying to learn more about layers and fills in Illustrator.

I have a ball and two ellipses in the shape of a hoop.

Problem 1: How can I get a fill into the space between the two ellipses?

Problem 2: How can I get this circle to pass through the hoop. So the circle will go UNDER the first half of the hoop and OVER the second half of the hoop.

Here is an image describing what I am trying to do:

What I tried: I tried drawing a circle, removing the anchor points on one side. Then I copied the circle half to another layer, used the reflect tool to flip it on its Y axis. After that I used the pathfinder MERGE option to join the paths. However, the paths just revert to the same layer upon merge, which defeats the purpose of this exercise.

Ultimately I am trying to animate an SVG with HTML/CSS, so the circle won't be stationary. It will be a moving animation.

Here is a link to the ai file: https://cl.ly/0q2t0P2M1V2O

Answer 1

Rather than splitting the ball – you could split the hoop. Like so:

Then Put the left half of the hoop at the top of the layer stack, the ball in the middle and the right half of the hoop on the bottom:

Now your animation is simple:

~~~~~~~~ ~~~~~~~~ ~~~~~~~~

EDIT:

I didn't notice your comments until after I posted this.

So you're on the right track. Looking at your file all you need is another object on top to cover your strokes where the split is. So just create another piece of an elipse with no stroke like this:

And place it at the top of your layer stack...

Answer 2

Fill between ellipses: Give a fill to the bigger ellipse. Select the smaller ellipse. Goto Object > Arrange > Bring to front. Select both ellipses. Go to Pathfinder panel and click "Minus" to make hole to the bigger ellipse. The smaller vanishes.You have a ring.

In the same way you can make a half of the orange ball (=duplicate, draw a rectangle and minus it from the copy. Now you can pile the stuff to wanted order.

Another way is to use clipping masks. See this:

Clipping mask question

Answer 3

It's all a learning process. I made a second art board with my version of the artwork. I always opt to show grid on my art board which helps me distinguish between white artwork and the background. You can find that option in the view menu in illustrator.

I always choose to use spot colors in my swatches panel rather than process colors. This way all I need to do is double-click on a swatch add change its color value and the artwork will automatically recolor itself to the new color.

First I created my inner oval with my circle tool. Then with that oval selected I went to menu item OBJECT/PATH/OFFSET. This created the outer oval. Play around with the offset a little bit to get a feel for it.

Now I have 2 ovals which I selected and in my pathfinder panel, I selected minus front. Then I selected combine. Doing that makes the two ovals one object. Now you can fill the inside of the oval with whatever color you want. I created a new layer underneath the oval layer. This is where I put my circle which you wanted underneath the oval. Then I duplicated that layer and put it above the oval to use when you want to show the circle covering the oval instead of underneath. Using my scissors tool I just trimmed the upper layer.. The path of the circle artwork, And cut away the left half of that circle. If you prefer to be less destructive with that upper circle layer and not use the scissor tool, you could always hide part of the top circle using masks.

Here is my version of the illustrator file for you to view

Answer 4

I'll add another answer detailing joojaa's method, since my answer has already been accepted and since joojaa does not have access to Illustrator at this time...

If this is 'bad form' or whatever mods can just let me know and I'll do whatever they wish.

Anyhow, I've had more time to look at your file. You have a couple of issues which ought to be addressed before we get started.

This isn't really that big of a deal. Just for good practices sake we'll address it though. You have four 'stray points' in these locations:

Just delete them.

If we toggle the visibility of your strokes, we see you have some alignment issues:

We want to close this gap. To do so press Ctrl+Shift+A to deselect all... Zoom in and use the Direct Selection Tool to align the points like so:

Now what joojaa is talking about is also accomplished using the Direct Selection Tool. Toggle visibilty on your 'Bottom' layer and click directly on this part of the 'Above' path:

Then press delete. That will give you this result:

So you have to do that a couple more times to finish removing all of your visible 'ends'... and you're done. This is the same result visually.

(BTW as for this method being "lighter" – it's only one extra layer using the previous method I showed you & the difference in file size was only 2kb so...)

~~~~~~~~ ~~~~~~~~ ~~~~~~~~

UPDATE:

Upon reviewing joojaa's comments and suggestions I'll now detail some fixes for the 'Conflation' issues (little gaps, etc which I was blissfully unaware of) faced when exporting to SVG, as seen here:

Take your half ellipse shapes (as shown below) – two in the 'Above' group and two in the 'Bottom' group – and in the Strokes Panel, set the Strokes to 'Round Cap'.

Next, in the 'Bottom' group duplicate the larger half ellipse, set its stroke to none, and place it at the bottom of the stack. And you get this:

You have an open path so just grab the Pen Tool and click on the topmost point, then add a triangle to the side of the shape:

And done. Exporting to SVG will now leave no unsightly gaps where your split is. Here is the final result zoomed in, blown up and exported as SVG: