2

inserir a descrição da imagem aqui

Bom, é isso.

Pensei em fazer usando SVG e imagem com bordas mas minha preocupação é sobre responsividade, em dispositivos menores vai ficar tudo bagunçado

Queria um jeito que as linhas se conectassem automaticamente às imagens, independente de onde elas forem parar

4
  • É possível fazer o mesmo modelo acima apenas com o CSS, porém você vai precisar ter um pouco de experiência. Eu sugiro você dar uma olhada nesse link: jornadadodev.com.br/cursos/curso-completo-de-css-3 6/03/2018 às 2:04
  • Você pode utilizar o canvas.lineTo para criar essas linhas. Basta utilizar JavaScript para capturar a distância entre as imagens e aplica-lo no canvas. 6/03/2018 às 2:40
  • Svg não foi feito para escalar bem? Tanto para cima quanto para baixo? Ou você precisa reposicionar os pontos vizinhos se abrir em outra resolução? 6/03/2018 às 3:01
  • Jovem o esquema das Bolas e das linhas vai sempre ser o mesmo ou elas vão ficar mudando de posição ou de quantidade? O exemplo que vc postou tem uma simetria razoável, acredito ser possível fazer apenas com CSS puro dependo exatamente do que vc quer que não ficou muito claro se é sempre o mesmo esquema ou não
    – hugocsl
    6/03/2018 às 10:10

2 Respostas 2

2

Veja um exemplo usando CSS e SVG. As linhas foram criadas usando SVG e estão conectadas do centro do círculo central até o centro de cada um dos círculos menores.

Usando jQuery, é possível manter as linhas conectadas nos mesmos lugares ao redimensionar a janela.

Veja o exemplo:

$(window).on("load resize", function(){

   var princ_x2 = $("#principal").width()/2,
       princ_y2 = $("#principal").height()/2;

   $("#c2 line").attr({
      "x1" : parseInt($("#principal .circ:eq(1)").css("left"))+34,
      "y1" : parseInt($("#principal .circ:eq(1)").css("top"))+34,
      "x2" : princ_x2,
      "y2" : princ_y2
   });

   $("#c3 line").attr({
      "x1" : parseInt($("#principal .circ:eq(2)").css("left"))+34,
      "y1" : parseInt($("#principal .circ:eq(2)").css("top"))+34,
      "x2" : princ_x2,
      "y2" : princ_y2
   });

   $("#c4 line").attr({
      "x1" : parseInt($("#principal .circ:eq(3)").css("left"))+34,
      "y1" : parseInt($("#principal .circ:eq(3)").css("top"))+34,
      "x2" : princ_x2,
      "y2" : princ_y2
   });

   $("#c5 line").attr({
      "x1" : parseInt($("#principal .circ:eq(4)").css("left"))+34,
      "y1" : parseInt($("#principal .circ:eq(4)").css("top"))+34,
      "x2" : princ_x2,
      "y2" : princ_y2
   });

   $("#c6 line").attr({
      "x1" : parseInt($("#principal .circ:eq(5)").css("left"))+34,
      "y1" : parseInt($("#principal .circ:eq(5)").css("top"))+34,
      "x2" : princ_x2,
      "y2" : princ_y2
   });

   $("#c7 line").attr({
      "x1" : parseInt($("#principal .circ:eq(6)").css("left"))+34,
      "y1" : parseInt($("#principal .circ:eq(6)").css("top"))+34,
      "x2" : princ_x2,
      "y2" : princ_y2
   });

   $("#c8 line").attr({
      "x1" : parseInt($("#principal .circ:eq(7)").css("left"))+44,
      "y1" : parseInt($("#principal .circ:eq(7)").css("top"))+44,
      "x2" : princ_x2,
      "y2" : princ_y2
   });

   $("#c9 line").attr({
      "x1" : parseInt($("#principal .circ:eq(8)").css("left"))+44,
      "y1" : parseInt($("#principal .circ:eq(8)").css("top"))+44,
      "x2" : princ_x2,
      "y2" : princ_y2
   });

   $("#c10 line").attr({
      "x1" : parseInt($("#principal .circ:eq(9)").css("left"))+44,
      "y1" : parseInt($("#principal .circ:eq(9)").css("top"))+44,
      "x2" : princ_x2,
      "y2" : princ_y2
   });

   $("#c11 line").attr({
      "x1" : parseInt($("#principal .circ:eq(10)").css("left"))+44,
      "y1" : parseInt($("#principal .circ:eq(10)").css("top"))+44,
      "x2" : princ_x2,
      "y2" : princ_y2
   });

   $("#c12 line").attr({
      "x1" : parseInt($("#principal .circ:eq(11)").css("left"))+44,
      "y1" : parseInt($("#principal .circ:eq(11)").css("top"))+44,
      "x2" : princ_x2,
      "y2" : princ_y2
   });

   $("#c13 line").attr({
      "x1" : parseInt($("#principal .circ:eq(12)").css("left"))+44,
      "y1" : parseInt($("#principal .circ:eq(12)").css("top"))+44,
      "x2" : princ_x2,
      "y2" : princ_y2
   });
});
#principal{
   height: 524px;
   max-width: 524px;
   left: 50%;
   transform: translate(-50%);
   position: relative;
   align-items: center;
   justify-content: center;
}

.circ{
   border: 8px solid #fff;
   border-radius: 100%;
   background-color: #fff;
   position: absolute;
   z-index: 9;

   /*essas duas linhas abaixo apenas para ilustração*/
   /*pode apagá-las*/
   text-align: center;
   line-height: 50px;
}

.circ::before{
   content: '';
   width: 100%;
   height: 100%;
   border: 4px solid #000;
   position: absolute;
   left: -4px;
   top: -4px;
   border-radius: 100%;
   z-index: -1;
}

.c60{
   width: 60px;
   height: 60px;
}

.c80{
   width: 80px;
   height: 80px;
}

.c100{
   width: 100px;
   height: 100px;
}

svg{
   width: 100%;
   height: 100%;
   stroke: #000;
   stroke-width: 4;
   position: absolute;
   top: 0;
   left: 0;
}

#principal span:nth-child(1){
   top: 50%;
   left: 50%;
   margin-top: -58px;
   margin-left: -58px;
   background-image: url(https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg);
   background-size: cover;
}

#principal span:nth-child(2){
   top: 100px;
   left: 45%;
}

#principal span:nth-child(3){
   top: 156px;
   right: 21%;
}

#principal span:nth-child(4){
   bottom: 136px;
   right: 20%;
}

#principal span:nth-child(5){
   bottom: 110px;
   left: 45%;
}

#principal span:nth-child(6){
   bottom: 156px;
   left: 21%;
}

#principal span:nth-child(7){
   top: 156px;
   left: 21%;
}

#principal span:nth-child(8){
   top: 56px;
   right: 20%;
}

#principal span:nth-child(9){
   top: 200px;
   right: 1%;
}

#principal span:nth-child(10){
   bottom: 36px;
   right: 21%;
}

#principal span:nth-child(11){
   bottom: 36px;
   left: 21%;
}

#principal span:nth-child(12){
   top: 200px;
   left: 1%;
}

#principal span:nth-child(13){
   top: 56px;
   left: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="principal">
   <span class="circ c100"></span>

   <span class="circ c60">2</span>
   <span class="circ c60">3</span>
   <span class="circ c60">4</span>
   <span class="circ c60">5</span>
   <span class="circ c60">6</span>
   <span class="circ c60">7</span>

   <span class="circ c80">8</span>
   <span class="circ c80">9</span>
   <span class="circ c80">10</span>
   <span class="circ c80">11</span>
   <span class="circ c80">12</span>
   <span class="circ c80">13</span>

   <svg id="c2"><line /></svg>
   <svg id="c3"><line /></svg>
   <svg id="c4"><line /></svg>
   <svg id="c5"><line /></svg>
   <svg id="c6"><line /></svg>
   <svg id="c7"><line /></svg>

   <svg id="c8"><line /></svg>
   <svg id="c9"><line /></svg>
   <svg id="c10"><line /></svg>
   <svg id="c11"><line /></svg>
   <svg id="c12"><line /></svg>
   <svg id="c13"><line /></svg>
</div>

2

Jovem fiz esse exemplo rápido só com CSS que acho que vai te atender!

Ele é responsivo, fica sempre ajustado ao tamanho do .container só as bolinhas no final das linhas que vc vai ter que fazer um @media para elas, pois com medidas em % elas ficam esticadas, pois a referencia de tamanho é a .linha (que é mais larga do que alta e a bola vira elipse)

Fiz uma versão simplificada, mas vc pode fazer o restante das linhas e mudar o transform: rotate(); como fiz no exemplo para ter quantas linhas quiser.

* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
.container {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.bola {
    width: 25%;
    height: 25%;
    border-radius: 50%;
    background-color: red;
    border: 5px solid black;
    box-shadow: 0 0 0 10px #fff;
    position: absolute;
    z-index: 100;
}
.linha {
    width: 100%;
    height: 2px;
    background-color: black;
    position: absolute;
}
.linha::before, .linha::after {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    border: 3px solid black;
    box-shadow: 0 0 0 6px #fff;
    position: absolute;
    z-index: 100;
    top: 50%;
    transform: translateY(-50%);
}
.linha::after {
    right: 0;
}

.linha:nth-child(2) {
    width: 60%;
    height: 2px;
    background-color: black;
    position: absolute;
    transform: rotate(90deg);
}
.linha:nth-child(3) {
    width: 90%;
    height: 2px;
    background-color: black;
    position: absolute;
    transform: rotate(45deg);
}
.linha:nth-child(3)::before, .linha:nth-child(3)::after  {
    width: 35px;
    height: 35px;
}
.linha:nth-child(4) {
    width: 90%;
    height: 2px;
    background-color: black;
    position: absolute;
    transform: rotate(-45deg);
}
.linha:nth-child(4)::before, .linha:nth-child(4)::after  {
    width: 35px;
    height: 35px;
}
<div class="container">
    <div class="bola"></div>
    <div class="linha"></div>
    <div class="linha"></div>
    <div class="linha"></div>
    <div class="linha"></div>
</div>

OBS1: Ajuste o tamanho do .container para ver que não desalinha! :)

.container {
    width: 300px;
    height: 300px;
}

OBS2: As linhas sempre são proporcionais a tamanho do .container ok, como falei só precisa tratar o tamanho das bolas menores.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .