Tell me, please, how to create such an arrangement of icons?
If you look closely, there are clickable icons around the circle (white background with several circles) ...

I have no ideas at all.

enter image description here

  • There are several implementation options, look in the direction of tabs for example. In active, there is a tooltip. First create several round blocks, etc. - LFC
  • one
    @VladSpirin there is probably a question not about tabs but about how to arrange the blocks in such a way around ... - user33274
  • @MaksimLensky, and is it impossible to do this by the same principle? If this is something like navigation (you click on the name of the logo, etc.), if not, and these are just static blocks or even something like a picture, hmm ...., then yes, you are right. Circles to draw it is not difficult ... I saw this picture, I realized that this is something more voluminous, I hope I was not mistaken) - LFC
  • one
    @MaksimLensky, you did not quite understand me. I already talk about their behavior (later), and when I write to you I mean it. And if it's just circles, SVG is better here, but I see that you yourself have already added it. And I wrote at first, it seems, that there are several implementation options. - LFC
  • 2
    @VladSpirin about the behavior if I'm not mistaken, the author did not ask ... if someone did not add an option with svg earlier, I will do ... tomorrow, to be honest, the question is not easy and worthy of a Useful question .. - user33274

3 answers 3

I add a new answer, because the application is almost completely rewritten and I do not know which solution will suit the author more.

What has been done again:

  • All variable parameters are converted to percentages to achieve full adaptability.

  • A block of circles that provides a round base with an icon with a shadow is transferred to the <defs> section for repeated use with the <use> command

  • Simplified filter formula that blurs shadow
  • Removed fixed width and height values ​​from the SVG header for adaptability
  • The svg code is wrapped in a <div> , which allows you to change the size of the svg block, changing the percentages of the width and height of the parent <div> .
  • Added links to each icon
  • Icons are distributed across the entire width of the svg block

To adjust the size and intensity of the shadow, increase or decrease the radii of the two circles relative to each other. Also for this purpose, you can change the attribute stdDeviation="4" filter

 .container { width:100%; height:100% } 
 <div class="container"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 1200" preserveAspectRatio="xMinYMin meet" > <defs> <filter id="dropshadow" width="130%" height="130%"> <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> <feOffset dx="0" dy="2" result="offsetblur"/> </filter> <g id="icon" fill="#fff"> <circle cx="0" cy="0" r="2.5%" filter="url(#dropshadow)"/> <circle cx="0" cy="0" r="2.7%" /> </g> </defs> <use xlink:href="#icon" x="120px" y="120px" /> <a xlink:href="https://yandex.ru/"> <image xlink:href="https://i.stack.imgur.com/P6Rbo.png" x="96px" y="96px" width="4%" height="4%" /> </a> <use xlink:href="#icon" x="1000px" y="120px"/> <a xlink:href="https://yandex.ru/"> <image xlink:href="https://i.stack.imgur.com/P6Rbo.png" x="976px" y="96px" width="4%" height="4%" /> </a> <use xlink:href="#icon" x="530" y="200"/> <a xlink:href="https://codepen.io/"> <image xlink:href="https://i.stack.imgur.com/oEW1L.png" x="497px" y="165px" width="5.5%" height="5.5%" /> </a> <use xlink:href="#icon" x="310" y="148"/> <a xlink:href="https://jsfiddle.net/"> <image xlink:href="https://i.stack.imgur.com/y06Su.png" x="280px" y="118px" width="5%" height="5%" /> </a> <use xlink:href="#icon" x="760" y="148"/> <a xlink:href="https://jsfiddle.net/"> <image xlink:href="https://i.stack.imgur.com/y06Su.png" x="730px" y="118px" width="5%" height="5%" /> </a> </svg> </div>

  • one
    really cool! Thank you very much! Redid it for my icons and voila!) However, I understand how to adjust the size of the circles, and it's very cool! - Safbek
  • @Safbek thank, I added the links in advance, I thought you would ask anyway :) Adjust the size of the circles, percent of the radii. <circle> Look for the bottom circle to be slightly larger. Then you have to edit the coordinates of the circles and icons - Alexandr_TT
  • @Safbek the next time you ask a question, let's do it all - icons, block sizes, in short, as much information as possible. For example, I would immediately make your icons and the right sizes. Consider, please, this is for the future - Alexandr_TT
  • one
    Thanks for the advance too)) As for the icons, etc. I thought that this is already audacity. Usually on such resources are sent and prompted, and then they themselves. But your answers are very helpful. Very lucidly and on the shelves. In general, on a silver platter)) - Safbek

SVG solution

  • To implement the shadow, two circles are used, one above the other.

  • A Gaussian filter is applied to the lower circle. Using the attributes of this filter, you can finely adjust the saturation and position of the shadow. stdDeviation="4" dx="0" dy="2" I did as the author of the question. If you need to change something in the appearance of the shadow, change these attributes and the radii of the circles.

  • Icons are added via the <image> inside the svg file. This ensures that the icon and the circle with a shadow do not go away when the scale changes.
  • I used to show 3 sets of icons + circles. You can clone and position sets of other icons with the command

<use xlink:href="#icon" x="20" y="100"/>

  • Icons come in different sizes. In this technique, it is easy to resize x with percent <image>

<image xlink:href="Safari.png" x="90px" y="170px" width="15%" height="15%" />

 <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"> <defs> <filter id="dropshadow" width="130%" height="130%"> <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> <feOffset dx="0" dy="2" result="offsetblur"/> <feMerge> <feMergeNode/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <g id="icon"> <circle cx="100" cy="100" r="30" fill="#FFFFFF" filter="url(#dropshadow)"/> <circle cx="100" cy="100" r="35" fill="#FFFFFF" /> </g> <use xlink:href="#icon" x="150" y="50"/> <image xlink:href="https://i.stack.imgur.com/P6Rbo.png" x="75px" y="76px" width="12%" height="12%" /> <use xlink:href="#icon" x="20" y="100"/> <image xlink:href="https://i.stack.imgur.com/oEW1L.png" x="90px" y="170px" width="15%" height="15%" /> <image xlink:href="https://i.stack.imgur.com/y06Su.png" x="220px" y="120px" width="15%" height="15%" /> </svg>

  • Thank! Live and learn. I don’t shave at svg. ( - Safbek
  • one
    @Safbek Yes, not at all! I remember you from the topic of designers and layout designers. Has anything changed? - Alexandr_TT
  • @ Alexandr_TT No, to be honest. And in terms of svg, and in terms of layout in general. Very little time can be given. So bit by bit. I would like to make the layout of the main work, and not just a hobby) So far I can not get a real project. And you, I see a svg special, nice to read your detailed answers) - Safbek
  • But tell me, did you manually pick the location of the circles and icons by eye? It just takes a lot of time, is this normal? or am I doing something wrong - Safbek
  • one
    @Safbek Yes, manually, but it took me not so much time, it takes more time to figure out how to do it. - Alexandr_TT

It goes without saying that there is no specific algorithm for how to arrange these elements.

I showed only one part for directing in the right direction

Next in steps ... one unit in it is descendants ... and by such an example and how many descendants are needed ...

The necessary rule for this: transform: origin (x, y, z); and correct positioning

But of course it’s better to use svg for this.

 * { margin: 0; padding: 0; } .items { width: 330px; height: 330px; margin: 90px auto; border: 1px solid red; position: relative; border-radius: 50%; } .items>div { position: absolute; top: -20%; left: 35%; transform-origin: 50% 230% 0; width: 100px; height: 100px; border-radius: 50%; } .item1 { background: red; transform: rotate(0deg); } .item2 { background: green; transform: rotate(-90deg); } .item3 { background: blue; transform: rotate(90deg); } .item4 { background: orange; transform: rotate(180deg); } 
 <div class="items"> <div class="item1"> </div> <div class="item2"> </div> <div class="item3"> </div> <div class="item4"> </div> </div>

  • I will experiment later and get in touch. (I mean, I haven’t yet noted your answer as a solution) I hope your advice will help me! - Safbek