<svg xmlns="http://www.w3.org/2000/svg" id="label" viewBox="0 0 138 26" fill="none" stroke="#26de81" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">
  <path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"/>
</svg>
body {
  width: 100vw;
  height: 100vh;
	background-color: #0f0f13;
	overflow: hidden;
  position: relative;
}

#label {
	position: absolute;
  left: calc(50vw - 150px);
  top: calc(50vh - 28px);
	width: 300px;
	height: 56px;
}
const body = document.querySelector('body')
const label = document.querySelector('#label')

let colors = [ '#26de81', '#fc5c65', '#fd9644', '#fed330', '#2bcbba', '#45aaf2', '#4b7bec', '#a55eea', '#ffc1f3', '#76ead7', '#ff9c71', '#32e0c4', '#d291bc', '#fa744f' ]

let FPS = 60

let width
  , height
  , velocityX = 1
  , velocityY = 1
  , pause = true
  , previousColor = 0
;

setInterval(() => {
	if (pause) return;

	let rect = label.getBoundingClientRect()

	let left = rect.x
	let top = rect.y

	if (left + rect.width >= width || left <= 0) {
		velocityX = -velocityX
    let randomColor = getRandomColor()
		label.style.stroke = randomColor
    
    if (left + 150 <= width / 2) {
      body.style.boxShadow = `inset 4px 0px 0px 0px ${randomColor}`
    } else {
      body.style.boxShadow = `inset -4px 0px 0px 0px ${randomColor}`
    }
	}
	if (top + rect.height >= height || top <= 0) {
		velocityY = -velocityY
    let randomColor = getRandomColor()
		label.style.stroke = randomColor
    
    if (top + 28 <= height / 2) {
      body.style.boxShadow = `inset 0px 4px 0px 0px ${randomColor}`
    } else {
      body.style.boxShadow = `inset 0px -4px 0px 0px ${randomColor}`
    }
	}

	label.style.left = rect.x + velocityX + 'px'
	label.style.top = rect.y + velocityY + 'px'
}, 1000 / FPS)


const reset = () => {
	width =
		window.innerWidth ||
		document.documentElement.clientWidth ||
		document.body.clientWidth
  ;

	height =
		window.innerHeight ||
		document.documentElement.clientHeight ||
		document.body.clientHeight
  ;

	pause =
		width <= label.getBoundingClientRect().width ||
		height <= label.getBoundingClientRect().height
  ;

	label.style.left = 'calc(50vw - 150px)'
	label.style.top = 'calc(50vh - 28px)'
	label.style.stroke = colors[0]
}


const getRandomColor = () => {
  let currentColor = -1
  
  do {
		currentColor = Math.floor(Math.random() * colors.length);
	} while (previousColor == currentColor);
  
  previousColor = currentColor
  
  return colors[currentColor]
}

reset()

window.addEventListener('resize', reset, true)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.