How to make a star or a cross using an svg ellipse?

Question

I am creating an ellipse in svg. In this ellipse I am trying to give a shape like a star or cross. I can not use anything else other than ellipse. This is what I have done so far.

All I did is, added the stroke-dasharray="4" and it became like a cross. But it is not proper yet. Can anyone help me on this please.

This is how it looks like now. Which is not a star or a cross.

user_1292848 · Answer

I am not entirely sure what you mean by

I can not use anything else other than ellipse

If you strictly follow that restriction, then your request would seem close to impossible.

Your first attempt is a nice idea, but unfortunately it may have issues. Creating circles or ellipses with stroke widths that are greater than the radius (technically, more than double the radius), can not always be trusted to render correctly.

The approach that Robert suggested is better and more flexible, but will require the use of SVG elements other than

For example take the following design.

svg {
  width: 400px;
}

If we turn the ellipse into a clip path, and apply it to the cross, we get this:

svg {
  width: 400px;
}

You can make the cross part look however you like, and still clip it with the ellipse.

user_7394871 · Answer

Another idea. Cut a cross from a circle using four ellipses

Then you can use these ellipses as a mask.

.container {
width:75vw;
height:auto;
}

How to make a star or a cross using an svg ellipse?

2 Answers