cssを使って円の中に円を描く方法 〜レスポンシブ対応〜

cssを学び始めたので備忘録として
htmlとcssだけで円を作図し、中央に入れ子にしたい。

html

sample.html

<div class="circle1">
 <div class="circle2">
  <div class="circle3">
   <div class="circle4"></div>
  </div>
 </div> 
</div>

css

sample.css

.circle1 {
    margin: 0 auto;
    width: 30%;
}

.circle2 {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border-radius: 50%;
    background-color: #f389da
}

.circle3 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    padding-top: 75%;
    border-radius: 100%;
    background-color: #14baed;
    transform: translate(-50%, -50%);
}

.circle4 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    padding-top: 50%;
    background-color: #faf82d;
    transform: translate(-50%, -50%);
}

こんな感じ

border-radiusをなくすと正方形にできます。
positionとtransformで中心に合わせています。
最外のcircle1では円を描いてないけど、基準の幅（width: 30%)を設定しているので、これがないと中心に合わせられない。

参考記事

【CSS】子要素を親要素内で上下左右中央寄せさせる方法
レスポンシブな正円の中央に文字を配置するCSS
サイズ可変の正方形や正円をCSSで描画したい