Как правильно конвертировать логотип из Photoshop в CSS?

Question

Я пытаюсь преобразовать логотип, созданный в Photoshop в CSS.Поскольку я не мастер в обоих случаях, я пытался, но потерпел неудачу, используя встроенную в Photoshop функцию «copy css».

Я пытался переделать CSS с помощью моих ограниченных знаний, но с треском провалился.

.Group_5 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 47;
}
.Group_4 {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 1924px;
  height: 1084px;
  z-index: 46;
}
.Ellipse_3 {
  border-width: 6.25px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  border-radius: 50%;
  position: absolute;
  left: 1119px;
  top: 486px;
  width: 168.5px;
  height: 174.5px;
  z-index: 45;
}
.Ellipse_2 {
  border-width: 6.25px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  border-radius: 50%;
  position: absolute;
  left: 1122px;
  top: 505px;
  width: 139.5px;
  height: 139.5px;
  z-index: 44;
}
.Ellipse_1_copy {
  border-width: 6.25px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  border-radius: 50%;
  position: absolute;
  left: 1109px;
  top: 512px;
  width: 139.5px;
  height: 139.5px;
  z-index: 43;
}
.Ellipse_1 {
  border-width: 6.25px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  border-radius: 50%;
  position: absolute;
  left: 1091px;
  top: 492px;
  width: 176.5px;
  height: 176.5px;
  z-index: 42;
}
.Shape_26 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1358px;
  top: 409px;
  width: 10px;
  height: 7px;
  z-index: 41;
}
.Shape_25 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1347px;
  top: 409px;
  width: 18px;
  height: 17px;
  z-index: 40;
}
.Shape_24 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1394px;
  top: 409px;
  width: 11px;
  height: 7px;
  z-index: 39;
}
.Shape_23 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1385px;
  top: 408px;
  width: 21px;
  height: 20px;
  z-index: 38;
}
.Shape_22 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1386px;
  top: 430px;
  width: 20px;
  height: 20px;
  z-index: 37;
}
.Group_2 {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 1920px;
  height: 1080px;
  z-index: 36;
}
.Shape_16_copy_2 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1395px;
  top: 410px;
  width: 8px;
  height: 26px;
  z-index: 35;
}
.Shape_16_copy {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1384px;
  top: 419px;
  width: 8px;
  height: 25px;
  z-index: 34;
}
.Shape_16 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1346px;
  top: 419px;
  width: 8px;
  height: 25px;
  z-index: 33;
}
.Shape_15 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1346px;
  top: 439px;
  width: 46px;
  height: 8px;
  z-index: 32;
}
.Shape_19 {
  border-width: 4.167px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  position: absolute;
  left: 1357px;
  top: 407px;
  width: 37.666px;
  height: 0;
  z-index: 31;
}
.Shape_21_copy {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1344px;
  top: 407px;
  width: 19px;
  height: 18px;
  z-index: 30;
}
.Shape_21 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1383px;
  top: 407px;
  width: 20px;
  height: 18px;
  z-index: 29;
}
.Shape_20 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1395px;
  top: 409px;
  width: 8px;
  height: 7px;
  z-index: 28;
}
.Shape_18 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1346px;
  top: 417px;
  width: 46px;
  height: 8px;
  z-index: 27;
}
.Shape_17_copy {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1381px;
  top: 408px;
  width: 20px;
  height: 19px;
  z-index: 26;
}
.Shape_17 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1384px;
  top: 428px;
  width: 19px;
  height: 19px;
  z-index: 25;
}
.Group_1 {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 1920px;
  height: 1080px;
  z-index: 23;
}
.Rectangle_1 {
  border-width: 4.167px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  position: absolute;
  left: 1325px;
  top: 472px;
  width: 48.666px;
  height: 19.666px;
  z-index: 22;
}
.Shape_10 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1132px;
  top: 656px;
  width: 11px;
  height: 8px;
  z-index: 21;
}
.Shape_9 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1394px;
  top: 423px;
  width: 41px;
  height: 242px;
  z-index: 20;
}
.Shape_8 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1132px;
  top: 451px;
  width: 271px;
  height: 213px;
  z-index: 19;
}
.Shape_11 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1132px;
  top: 450px;
  width: 17px;
  height: 8px;
  z-index: 18;
}
.Shape_7 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1132px;
  top: 416px;
  width: 64px;
  height: 41px;
  z-index: 17;
}
.Shape_14 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1427px;
  top: 417px;
  width: 8px;
  height: 215px;
  z-index: 16;
}
.Shape_13 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1393px;
  top: 415px;
  width: 44px;
  height: 44px;
  z-index: 15;
}
.Shape_12 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 1144px;
  top: 416px;
  width: 302px;
  height: 42px;
  z-index: 14;
}
.Group_3 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 11;
}
.Shape_3 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 577px;
  top: 684px;
  width: 710px;
  height: 12px;
  z-index: 10;
}
.Shape_2 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 571px;
  top: 301px;
  width: 137px;
  height: 403px;
  z-index: 9;
}
.I {
  font-size: 283.333px;
  font-family: "Kozuka Gothic Pr6N";
  color: rgb(0, 0, 0);
  line-height: 1.2;
  text-align: center;
  -moz-transform: matrix( 1,0,0,0.76592618857706,0,0);
  -webkit-transform: matrix( 1,0,0,0.76592618857706,0,0);
  -ms-transform: matrix( 1,0,0,0.76592618857706,0,0);
  position: absolute;
  left: 1043.001px;
  top: 406px;
  z-index: 7;
}
.C_copy_2 {
  font-size: 283.333px;
  font-family: "Kozuka Gothic Pro";
  color: rgb(0, 0, 0);
  line-height: 1.2;
  text-align: center;
  -moz-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
  -webkit-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
  -ms-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
  position: absolute;
  left: 869.507px;
  top: 406.5px;
  z-index: 6;
}
.C {
  font-size: 283.333px;
  font-family: "Kozuka Gothic Pro";
  color: rgb(0, 0, 0);
  line-height: 1.2;
  text-align: center;
  -moz-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
  -webkit-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
  -ms-transform: matrix( 1.04227845443354,0,0,0.87676868039824,0,0);
  position: absolute;
  left: 711.507px;
  top: 406.5px;
  z-index: 5;
}
.Shape_4 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 685px;
  top: 289px;
  width: 98px;
  height: 212px;
  z-index: 4;
}
.Shape_1 {
  background-color: rgb(1, 1, 1);
  position: absolute;
  left: 693px;
  top: 309px;
  width: 89px;
  height: 191px;
  z-index: 3;
}

Возможно, я просто что-то упустил, или данный результат CSS не работает должным образом, как что-либо, что я делаю и / или пробую результаты в пустоестр.

Я не совсем уверен, как я мог преобразовать этот логотип, как уже упоминалось выше, я не мастер в обоих.

Логотип состоит из кругов / линий и 2 "Cтексты.На некоторых слоях есть маски для прозрачности (где они перекрываются)

Это не лучший результат, так как он должен был иметь одинаковую толщину в целом, но я хотел бы получить способ перейти в форму CSS.