CODEWITHSUNDEEP
csssvgellipse
Fokrule
Fokrule

Reputation: 854

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

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.

<ellipse cx="96" cy="126" rx="5" ry="5" fill="#EF4444" stroke="#EF4444" stroke-width="19" stroke-dasharray="4" opacity="1" transform="translate(139 50)"></ellipse>

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.

enter image description here

Upvotes: 3

Views: 554

Answers (2)

Alexandr_TT
Alexandr_TT

Reputation: 14545

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

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  
         
 <circle cx="200" cy="200" r="100" fill="crimson" /> 
 <circle cx="200" cy="200" r="40" fill="none" stroke="black" /> 
 <circle cx="200" cy="200" r="2" fill="black" /> 
 <polyline fill="none"  stroke="black" points="0,0 400,400" />
   <polyline fill="none"  stroke="black" points="0,400 400,0" />
 <ellipse transform="rotate(45 100 125)" cx="80" cy="107" rx="102" ry="50" fill="gold" opacity="0.5" />
   <ellipse transform="translate(125 -20) rotate(135 100 125)" cx="45" cy="80" rx="100" ry="50" fill="gold" opacity="0.5" /> 
     <ellipse transform="translate(125 -20) rotate(225 100 125)" cx="-90" cy="40" rx="100" ry="50" fill="gold" opacity="0.5" /> 
       <ellipse transform="translate(125 -20) rotate(315 100 125)" cx="-125" cy="175" rx="100" ry="50" fill="gold" opacity="0.5" />

</svg>

Then you can use these ellipses as a mask.

.container {
width:75vw;
height:auto;
}
<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 50 400 400"  preserveAspectRatio="xMinYMin meet">  
<defs>
<mask id="msk"> 
  <rect width="100%" height="100%" fill="white" />
  <g id="group" fill="black">
 <ellipse transform="rotate(45 100 125)" cx="80" cy="107" rx="102" ry="50"  />
   <ellipse transform="translate(125 -20) rotate(135 100 125)" cx="45" cy="80" rx="100" ry="50"  /> 
     <ellipse transform="translate(125 -20) rotate(225 100 125)" cx="-90" cy="40" rx="100" ry="50"  /> 
       <ellipse transform="translate(125 -20) rotate(315 100 125)" cx="-125" cy="175" rx="100" ry="50"  />
 </g>
</mask> 
</defs>  
  <image href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Foro_Romano.jpg/1200px-Foro_Romano.jpg "
width="100%" height="100%"  />
 <circle mask="url(#msk)" cx="200" cy="200" r="100" fill="crimson" opacity="0.7" /> 

</svg> 
</div>

Upvotes: 3

Paul LeBeau
Paul LeBeau

Reputation: 101800

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 <ellipse>

For example take the following design.

svg {
  width: 400px;
}
<svg viewBox="0 0 100 70">
  <ellipse cx="50" cy="35" rx="40" ry="28"
           fill="none" stroke="black" stroke-width="1"/>

  <g class="cross">
    <rect x="0" y="20" width="100" height="30" transform="rotate(35, 50,35)"/>
    <rect x="0" y="20" width="100" height="30" transform="rotate(-35, 50,35)"/>
  </g>
</svg>

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

svg {
  width: 400px;
}
<svg viewBox="0 0 100 70">
  <defs>
    <clipPath id="oval">
      <ellipse cx="50" cy="35" rx="40" ry="28"/>
    </clipPath>
  </defs>

  <g class="cross" clip-path="url(#oval)">
    <rect x="0" y="20" width="100" height="30" transform="rotate(35, 50,35)"/>
    <rect x="0" y="20" width="100" height="30" transform="rotate(-35, 50,35)"/>
  </g>
</svg>

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

Upvotes: 3

Related Questions