Как нарисовать лупу в круге в html и css?

Question

Пример:

Answer 1

С этим справится SVG то есть рисуем последовательно круги и квадраты

Для образования тени используем path и для формирования закругления применяем обтравочную маску - то есть clip-path

Результат

.r {
  width: 100%;
  height: 100%;
  fill: #561734;
}

.r1 {
  width: 100%;
  height: 100%;
  fill: #69040A;
}

.c1 {
  fill: #BC3F56;
}

.c2 {
  stroke: #016D90;
  stroke-width: 30;
  fill: #95C3D0;
}

.l1 {
  stroke: #107698;
  stroke-width: 30;
  stroke-linecap: round;
}

<svg viewBox="0 0 1000 1000" width="300">
  <defs>
  <clipPath id="cp">
    <circle cx="500" cy="490" r="300"></circle>
  </clipPath>
  </defs>
  <rect class="r"></rect>
  <circle cx="500" cy="490" r="300" class="c1"></circle>
  <path d="M344,674 607,409 726,758 375,822z" fill="#680309" clip-path="url(#cp)"></path>
  <g transform="translate(30,-10)">
    <circle cx="490" cy="490" r="100" class="c2"></circle>
    <line x1="420" x2="320" y1="570" y2="680" class="l1"></line>
  </g>
</svg>

Что бы манипулировать размерами этой иконки достаточно убрать из SVG кода width и обернуть div и размер указывать этому div

Answer 2

На HTML и CSS :D

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #561734;
  margin: 0;
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #bd3f57;
  position: relative;
  overflow: hidden;
}


.circle::after {
  content: '';
  display: block;
  width: 66%;
  height: 66%;
  background: #69040a;
  position: absolute;
  z-index: 1;
  transform: rotate(45deg) translate(50%, -1%);
}

.loupe {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: #036d92;
  position: relative;
  top: -10%;
  right: -10%;
  z-index: 2;
}

.loupe::before {
  content: '';
  display: block;
  width: 80%;
  height: 26%;
  border-radius: 100px;
  background: inherit;
  position: absolute;
  left: 13%;
  bottom: 13%;
  transform-origin: center right;
  transform: translate(-87%,0) rotate(-45deg);
}

.glass {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 67%;
  height: 67%;
  border-radius: 50%;
  background: #95c3d2;
  position: relative;
  z-index: 2;
}

.glass::before {
  content: '';
  display: block;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  box-shadow: 
    -3px -3px 2px -3px #fff,
     3px  3px 2px -3px #fff inset,
     3px  3px 2px -3px #444,
    -3px -3px 2px -3px #444 inset;
}

<div class="circle">
  <div class="loupe">
    <div class="glass"></div>
  </div>
</div>

БЛОГ НА HUSL

Как нарисовать лупу в круге в html и css?

Ответы (2 шт):