Untitled

index.html

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
</svg>

script.js

var num = 1;

var allCoords = []

function getUniqueCoords(maxX, maxY) {
    var x = Math.floor(Math.random()*(maxX - 1)) + 1
    var y = Math.floor(Math.random()*(maxY - 1)) + 1
    while (allCoords.includes([x,y])){
           x = Math.floor(Math.random()*(maxX - 1)) + 1
  y = Math.floor(Math.random()*(maxY - 1)) + 1
           }
    if (!allCoords.includes([x,y])) {
  allCoords.push([x, y])
  return [x, y]
    }
}

function createNode(){
  var sh = window.screen.availHeight;
  var sw = window.screen.availWidth;
  var maxY = Math.floor(sh/50)
  var maxX = Math.floor(sw/50)
  var xy = getUniqueCoords(maxX, maxY)
  var x = xy[0]
  var y = xy[1]

  var n = document.createElement("div")
  n.classList.add("node")
  n.id = `node${num}`
  num += 1;
  var pixX = x*50
  var pixY = y*50
  var offsetX = pixX - 13
  var offsetY = pixY - 13
  n.style.top = `${offsetY}px`
  n.style.left = `${offsetX}px`
  document.body.appendChild(n)
  
  var s1 = document.createElement("div")
  var s2 = document.createElement("div")
  
  s1.setAttribute("data-signal", "1")
  s2.setAttribute("data-signal", "2")
  
  s1.setAttribute("data-node", `${n.id}`)
  s2.setAttribute("data-node", `${n.id}`)
  
  s1.classList.add("signal")
  s2.classList.add("signal")
  
  var soffy = offsetY - 1
  var soffx = offsetX - 1

  s1.style.top = `${soffy}px`
  s2.style.top = `${soffy}px`
  
  s1.style.left = `${soffx}px`
  s2.style.left = `${soffx}px`
  
  n.insertAdjacentElement("beforebegin", s2)
  n.insertAdjacentElement("beforebegin", s1)
}

for (var i = 0; i<50; i++){
  createNode()
}

var nodes = document.querySelectorAll(".node")

nodes.forEach(function(node){  
  node.addEventListener("mouseenter", function(e){
    node.style.opacity = "0.5"
    var signals = document.querySelectorAll(`[data-node=${this.id}]`)
    signals.forEach(function(signal){
      signal.classList.add(`signal-${signal.getAttribute('data-signal')}`)
    })
  })
  node.addEventListener("mouseleave", function(e){
    node.style.opacity = "0.8"
    var signals = document.querySelectorAll(`[data-node=${this.id}]`)
    signals.forEach(function(signal){
      
      signal.classList.remove(`signal-${signal.getAttribute('data-signal')}`)
    })
  })
})

style.css

body {
  background: 
    repeating-linear-gradient(90deg, transparent, transparent 49px, #9fafeb11 49px, #9fafeb11 50px),
        repeating-linear-gradient(180deg, transparent, transparent 49px, #9d94dd11 49px, #9d94dd11 50px);
  background-color: #001f33;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}

.node {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  position: absolute;
  background-color: #e8eaff;
  cursor: pointer;
  box-shadow: 0 0 10px #e8eaff;
}

.signal-1 {
  animation: emit-signal 1s infinite forwards linear;
}

.signal-2 {
  animation: emit-signal 1s infinite 0.5s forwards linear;
}

.signal {
  position: absolute;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 1px solid #6a6a6e;
}

.imodal {
  display: absolute;
  height: 250px;
  width: 100px;
  overflow: scroll;
}

.line {
  stroke: #6a6a6e;
  stroke-width: 1;
  opacity: 0.8;
}

@keyframes emit-signal {
  50% {
    height: 50px;
    width: 50px;
    opacity: 1;
    transform: translate(-13px, -13px)
    
  }
  100% {
    opacity: 0;
    height: 75px;
    width: 75px;
    transform: translate(-25px, -25px);
  }
}

svg {
  position: absolute;
  top: 0;
  left: 0;  
}

untitled.markdown

Untitled

A Pen by Megan Durham on CodePen.

License.