SVG, Canvas or CSS? Need to network with interlinked images

Question

SVG, Canvas or CSS? Need to network with interlinked images

Asked 6 years, 7 months ago

Viewed 171 times

1

Well, that’s it.

I thought about using SVG and image with borders but my concern is about responsiveness, in smaller devices will get all messy

I wanted a way for the lines to automatically connect to the images, no matter where they end up

You can do the same template above only with CSS, but you’ll need some experience. I suggest you take a look at this link: https://jornadadodev.com.br/cursos/curso-completo-de-css-3

– Mike Otharan

2018/03/06 at 02:04
You can use the canvas. to create these lines. Just use Javascript to capture the distance between the images and apply it to the canvas.

– Valdeir Psr

2018/03/06 at 02:40
Svg not made to climb well? Both up and down? Or do you need to reposition the neighboring points open in another resolution?

– Jefferson Quesado

2018/03/06 at 03:01
Young the scheme of the Balls and the lines will always be the same or will they keep changing position or quantity? The example you posted has a reasonable symmetry, I believe it is possible to do only with pure CSS depending on exactly what you want that it is not very clear whether it is always the same scheme or not

– hugocsl

2018/03/06 at 10:10

2 answers

2

See an example using CSS and SVG. The lines were created using SVG and are connected from the center of the central circle to the center of each of the smaller circles.

Using jQuery, you can keep the lines connected in the same places when resizing the window.

Take the example:

$(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>

Browser other questions tagged javascript jquery css canvas svg

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-03-06T15:20:46+00:00

Young made this quick example only with CSS that I think will suit you!

It is responsive, always adjusted to the size of the .container just the balls at the end of the lines you’ll have to make a @media for them, because with measures in % they are stretched, because the size reference is . line (which is wider than high and the ball turns ellipse)

I made a simplified version, but you can do the rest of the lines and change the transform: rotate(); as I did in the example to have as many lines as you want.

* {
    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: Adjust the size of .container to see that it doesn’t dislodge! :)

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

OBS2: The lines are always proportional to the size of the .container Okay, like I said, you just need to treat the size of the smaller balls.