Designing eclipse circle with html5 SVG

Question

I am trying to design a cicrle with following codes:

.eclipse {
  border-radius: 50%;
  border: 1px dashed #1f2b6a;
  background: none;
}

<svg class="eclipse" height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="white" stroke-width="3" fill="#1f2b6a" />
  Sorry, your browser does not support SVG.  
</svg>

I am trying to design this

Can anyone help me to get it done?

score -1 · Answer 1 · answered Aug 13 '20 at 08:19

-1

<svg id="svgelem" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
     <circle cx="100" cy="50" r="20" stroke="black" stroke-width="3.6" fill="#1f2b6a" />
  </svg>

answered Aug 13 '20 at 08:19

Huzee

114
7

Atousa Darabi · Accepted Answer · 2020-08-13T08:45:39.153

You can do this:

.dashed-border{
display: flex;
   align-items: center; 
   justify-content: center;
  width: 300px;
  height: 300px;
  border: dashed 2px #4a1693;
  border-radius: 50%;
  
}

.circle{
  
  display: flex;
   align-items: center; 
   justify-content: center;
   width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: #4a1693;
}

.circle p{
  font-size: 72px;
  color: white;
}

<div class="dashed-border">
  <div class="circle">
    <p>1</p>
  </div>
</div>

Here is in svg code

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{fill:none;stroke:#4A1693;stroke-width:4;stroke-miterlimit:10;stroke-dasharray:65.3028,65.3028;}
    .st2{fill:#4A1693;stroke:#000000;stroke-miterlimit:10;}
    .st3{fill:none;}
    .st4{font-family:'MyriadPro-Regular';}
    .st5{font-size:90px;}
</style>
<g>
    <circle class="st0" cx="249" cy="258" r="145.5"/>
    <circle class="st1" cx="249" cy="258" r="145.5"/>
</g>
<circle class="st2" cx="250.5" cy="258.5" r="132"/>
<rect x="223.1" y="219.5" class="st3" width="103.8" height="86.8"/>
<text transform="matrix(1 0 0 1 223.1211 283.4487)" class="st0 st4 st5">1</text>
</svg>

I see it's not similar to what i am looking for. did you see the image? — , Aug 13 '20 at 08:25
I accepted your answer. @atousa darabi, can you please tell me what tools did you used to design such svg? or there is rules to desin? — , Aug 13 '20 at 09:20
@how-recepes I draw it in illustrator. Then File > Save as. And chose svg format. There are some options please choose "embed" one. It will give you a svg file which contains the code — Atousa Darabi, Aug 13 '20 at 09:27

Designing eclipse circle with html5 SVG

2 Answers2