5+ JavaScript Border Animation Examples

This post contains a total of 5+ JavaScript Border Animation Examples with Source Code. All these Border Animations are made using JavaScript & Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Border Animation Examples

1. Border animation

Made by Tomazki. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300);

* {
  margin:0;
  padding:0;
  outline:none;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
}

html, body {
  height: 100%;
  width: 100%;  
}

body {
  background: #202020;
  font-family: 'Roboto', sans-serif;
}

.wrapper {
  height: 80%;
  width: 60%;
  position: absolute;
  top:0;left:0;right:0;bottom:0;
  margin:auto;
  overflow:hidden;
}

.rect {
  position:absolute;
  width: 100%;
  height: 100%;
  transition: 0.7s all cubic-bezier(.21,.63,.75,.36);
  -webkit-transition: 0.7s all cubic-bezier(.21,.63,.75,.36);
  -moz-transition: 0.7s all cubic-bezier(.21,.63,.75,.36);
}

.rect:after{
  content:"";
  width: 100%;
  height: 100%;
  position: absolute;
}

.top {
  top:0;left:3px;
  border-top:3px solid rgba(249,85,21,0.3);
}
.right {
  top:3px;
  right:0;
  border-right:3px solid rgba(249,85,21,0.3);
}

.bottom {
  bottom:0;right:3px;
  border-bottom:3px solid rgba(249,85,21,0.3);
}

.left {
  bottom:3px;left:0;
  border-left:3px solid rgba(249,85,21,0.3);
}

.top.active {
  left:200%;
}
.right.active {
  top:200%;
}
.bottom.active {
  right:200%;
}
.left.active {
  bottom:200%;
}

.top:after {
  border-top:3px solid rgba(249,85,21,1);
  left:-200%;
  top:-3px;
}
.right:after {
  border-right:3px solid rgba(249,85,21,1);
  top:-200%;
  right:-3px;
}

.bottom:after {
  border-bottom:3px solid rgba(249,85,21,1);
  right:-200%;
  bottom:-3px;
}

.left:after {
  border-left:3px solid rgba(249,85,21,1);
  bottom:-200%;
  left:-3px;
}

.menu {
  position: absolute;
  bottom:7%;left:0;right:0;
  margin:0 auto;
  height:50px;
  width: 50px;
  background: #f95515;
  transition: 0.3s all ease-in-out;
}

.menu.active {
  background: #fff;
  bottom:2%;
}

.content {
  transform: scale(0);
  padding:12% 0;
  opacity: 0;
    transition: 0.2s all cubic-bezier(.21,.63,.75,.36) 0s;
  -webkit-transition: 0.2s all cubic-bezier(.21,.63,.75,.36) 0s;
  -moz-transition: 0.2s all cubic-bezier(.21,.63,.75,.36) 0s;
}

.content.active {
  transform: scale(1);
  opacity: 1 !important;
      transition: 0.2s all ease-in-out 0.6s;
  -webkit-transition: 0.2s all ease-in-out 0.6s;
  -moz-transition: 0.2s all ease-in-out 0.6s;
}

.content p, .content span{
  width: 100%;
  color:#fff;
  font-size:72px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:2px;
  display:block;
  vertical-align:middle;
  margin:0 auto;
}

.content span {
  font-size:14px;
}

.background {
  opacity: 0.3;
  position:absolute;
  width: 100%;
  height: 100%;
  z-index:-1;
  background: url(http://desktopography.net/media/exhibition/2013/slouchin_evelyn/large.jpg) no-repeat center top;
  background-size:cover;
  transition: 0.7s all cubic-bezier(.21,.63,.75,.36);
  -webkit-transition: 0.7s all cubic-bezier(.21,.63,.75,.36);
  -moz-transition: 0.7s all cubic-bezier(.21,.63,.75,.36);
}

.background.active {
  filter:blur(10px);
  -webkit-filter:blur(10px);
}
</style>
</head>
<body>
  <div class="wrapper">
  <div class="rect content"><p>OCTOPUSH</p><span>This is the unexpected game</span></div>
  <div class="rect top"></div>
  <div class="rect right"></div>
  <div class="rect bottom"></div>
  <div class="rect left"></div>
</div>

<div class="menu"></div>

<div class="background"></div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$('.menu').click(function () {
  $('.rect').toggleClass('active');
  $('.background').toggleClass('active');
  $(this).toggleClass('active');
});
    </script>
</body>
</html>

2. Box border animation

Made by Γ–zgΓΌr Sağıroğlu. Box border animation using JavaScript and css3. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<style>
.main, .in, .text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-top: -50px;
  margin-left: -100px;
}

.text {
  font: 400 50px "Open Sans";
  z-index: 3;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

body {
  background: #f2f2f2;
}

div.main {
  background: #f2f2f2;
  border: solid #000000;
  border-width: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.in {
  z-index: 2;
}
.in:before, .in:after {
  content: "";
  position: absolute;
  width: 200px;
  height: 95px;
  background: #f2f2f2;
  -moz-transition: width 750ms 0ms, height 750ms 750ms;
  -o-transition: width 750ms 0ms, height 750ms 750ms;
  -webkit-transition: width 750ms, height 750ms;
  -webkit-transition-delay: 0ms, 750ms;
  transition: width 750ms 0ms, height 750ms 750ms;
}
.in:after {
  top: 5px;
  right: 0;
}
.in:before {
  left: 0;
  bottom: 5px;
}
.in.click:after, .in.click:before {
  height: 0;
  width: 5px;
}
.in.reverse:after, .in.reverse:before {
  -moz-transition-delay: 750ms, 0ms;
  -o-transition-delay: 750ms, 0ms;
  -webkit-transition-delay: 750ms, 0ms;
  transition-delay: 750ms, 0ms;
}
</style>
</head>
<body>
  <div class="in"></div>
<div class="main"></div>
<div class="text">Click!</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
(function() {
  var $in;

  $in = $('.in');

  $('.text').click(function() {
    $in.toggleClass('click');
    return setTimeout(function() {
      if ($in.hasClass('click')) {
        return $in.addClass('reverse');
      } else {
        return $in.removeClass('reverse');
      }
    }, 750);
  });

}).call(this);
    </script>
</body>
</html>

3. Border Animation Effect with SVG, CSS, JavaScript

Made by Stephen Flannery. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto);

body{
  background: #3498db;
}

div.box {
	width: 200px;
	height: 200px;
	position: relative;
	overflow: display;
	background: #3498db;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
}

div p{
  text-transform: uppercase;
  text-align: left;
  font-size: 1.75em;
  padding: 10px;
  font-family: 'Roboto', sans-serif;
  color: #FFF
}


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

svg line {
	stroke-width: 6;
	stroke: #FFF;
	fill: none;
	stroke-dasharray: 200;
}
</style>
</head>
<body>
  <div class="box" id="box">
	<svg id="svg" width="200" height="200">
		<line id="top" class="top" x1="0" y1="0" x2="600" y2="0"/>
		<line id="left" class="left" x1="0" y1="200" x2="0" y2="-400"/>
		<line id="bottom" class="bottom" x1="200" y1="200" x2="-400" y2="200"/>
		<line id="right" class="right" x1="200" y1="0" x2="200" y2="600"/>
	</svg>
  <p>Border Animation Effect with SVG</p>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
      <script>
var box = document.getElementById("box");

box.onmouseover = function () {
  TweenMax.to("#top", .8,
  { x: -400 });

  TweenMax.to("#right", .8,
  { y: -400 });

  TweenMax.to("#bottom", .8,
  { x: 400 });

  TweenMax.to("#left", .8,
  { y: 400 });

};



box.onmouseout = function () {
  TweenMax.to("#top", .8,
  { x: 0 });

  TweenMax.to("#right", .8,
  { y: 0 });

  TweenMax.to("#bottom", .8,
  { x: 0 });

  TweenMax.to("#left", .8,
  { y: 0 });

};
    </script>
</body>
</html>

4. Drawing Border Animation

Made by Max Schulmeister. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.wrapper {
  display: table;
  margin: 0 auto;
  margin-top: 200px;
}

@keyframes bottomright {
  0% {
    width: 0;
    height: 0;
    padding-top: 0;
    visibility: visible;
  }
  25% {
    width: 100%;
    height: 0;
    padding-top: 0;
    visibility: visible;
  }
  50% {
    height: 100%;
    width: 100%;
    visibility: visible;
  }
  75% {
    visibility: visible;
  }
  100% {
    visibility: visible;
  }
}

@keyframes revbottomright {
  0% {
    width: 100%;
    height: 100%;
    visibility: visible;
  }
  25% {
    width: 100%;
    height: 100%;
    visibility: visible;
  }
  50% {
    width: 100%;
    height: 100%;
    visibility: visible;
  }
  75% {
    width: 100%;
    height: 0;
    padding-top: 0;
    visibility: visible;
  }
  100% {
    width: 0;
    height: 0;
    padding-top: 0;
    visibility: hidden;
  }
}

@keyframes topleft {
  0% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
  25% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
  50% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
  75% {
    width: 100%;
    height: 0;
    padding-bottom: 0;
    visibility: visible;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
  }
}

@keyframes revtopleft {
  0% {
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
  }
  25% {
    width: 100%;
    height: 0;
    padding-bottom: 0;
    visibility: visible;
  }
  50% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
  75% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
  100% {
    width: 0;
    height: 0;
    padding-bottom: 0;
    visibility: hidden;
  }
}

a {
  font-family: Gotham, Tahoma, sans-serif;
  font-weight: 900;
  letter-spacing: 1px;
  color: #aaa;
  transition: color 0.75s ease-in-out;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px;
  position: relative;
  border: 5px solid pink;
   -moz-border-image: url(http://maxschulmeister.com/sneakin/assets/images/svg/scanframe.svg) 5 round;
    -webkit-border-image: url(http://maxschulmeister.com/sneakin/assets/images/svg/scanframe.svg) 5 round;
    -o-border-image: url(http://maxschulmeister.com/sneakin/assets/images/svg/scanframe.svg) 5 round;
    border-image: url(http://maxschulmeister.com/sneakin/assets/images/svg/scanframe.svg) 5 round;
}

a:hover {
  color: #333;
  transition: color 0.75s ease-in-out;
}

a:after {
  content: "";
  position: absolute;
  bottom: -5px;
  padding-right: 5px;
  left: -5px;
  width: 100%;
  height: 100%;
  border-bottom: 5px solid #333;
  border-right: 5px solid #333;
  visibility: hidden;
}

a:before {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  padding-left: 5px;
  width: 100%;
  height: 100%;
  border-top: 5px solid #333;
  border-left: 5px solid #333;
  visibility: hidden;
}

a:hover:before {
  animation: topleft 0.5s ease-in-out forwards;
}

a:hover:after {
  animation: bottomright 0.5s ease-in-out forwards;
}

a.active:before {
  animation: revtopleft 0.5s ease-in-out forwards;
}

a.active:after {
  animation: revbottomright 0.5s ease-in-out forwards;
}

a.active:before,
a.active:after {
  width: 100%;
  height: 100%;
  visibility: visible;
}

a.temp:before, a.temp:after {
  width: 100%;
  height: 100%;
  visibility: visible;
}
</style>
</head>
<body>
  <div class="wrapper">
  <a href="">Checkout</a>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.8.1/jquery.hoverIntent.js'></script>
      <script>
$(document).ready(function () {

  $('a').hoverIntent(function () {
    $(this).removeClass('active');
    setTimeout(function () {
      $(this).addClass('temp');
    }, 500);
  },
  function () {
    $(this).addClass('active');
    $(this).removeClass('temp');
  });


});
    </script>
</body>
</html>

5. Search Interaction Border animation

Made by Valery Alikin. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background: #530491;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Open Sans", sans-serif;
}

.search {
  position: relative;
  overflow: hidden;
  height: 88px;
}
.search.active::before {
  top: 14px;
  bottom: 14px;
  opacity: 0;
}
.search.active path {
  stroke-dashoffset: -400;
}
.search.active p {
  pointer-events: all;
}
.search.active p::before, .search.active p::after {
  opacity: 1;
}
.search.active span {
  transform: scale(0);
  opacity: 0;
}
.search.active.remove::before {
  transition: all 200ms linear 200ms, opacity 0ms linear 0ms;
  top: 88px;
  bottom: 2px;
  opacity: 1;
}
.search.active.remove p::before, .search.active.remove p::after {
  transition: all 0ms;
  opacity: 0;
}
.search.active.remove path {
  stroke-dashoffset: -800;
  transition-delay: 400ms;
}
.search.active.remove span {
  transform: scale(1);
  opacity: 1;
  transition-delay: 400ms;
}
.search.active.remove.done::before {
  top: 0;
  bottom: 88px;
  opacity: 1;
  transition: none;
}
.search.active.remove.done path {
  stroke-dashoffset: 0;
  stroke-dasharray: 400;
  transition: none;
}
.search::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-1px);
  width: 4px;
  background: #ff4365;
  bottom: 88px;
  border-radius: 50px;
  opacity: 1;
  transition: all 400ms ease-in-out 500ms, opacity 200ms linear 1000ms;
}
.search path {
  stroke-dashoffset: 0;
  stroke-dasharray: 400;
  transition: all 500ms ease-in-out;
}
.search span {
  position: absolute;
  top: 50%;
  left: 0;
  height: 80px;
  line-height: 80px;
  width: 100%;
  margin-top: -40px;
  vertical-align: middle;
  text-align: center;
  font-size: 34px;
  letter-spacing: 2px;
  color: #ff4365;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: all 400ms ease-in-out;
  opacity: 1;
  transform: scale(1);
  text-transform: uppercase;
}
.search input,
.search p {
  position: absolute;
  top: 50%;
  left: -9px;
  height: 80px;
  line-height: 80px;
  width: 100%;
  margin-top: -40px;
  vertical-align: middle;
  text-align: center;
  font-size: 40px;
}
.search input {
  color: transparent;
  background-color: transparent;
  border: 0;
  outline: none;
}
.search p {
  color: #ff4365;
  pointer-events: none;
  white-space: nowrap;
}
.search p:after, .search p:before {
  content: "";
  opacity: 0;
  width: 4px;
  height: 60px;
  vertical-align: middle;
  border-radius: 20px;
  margin-top: 8px;
  transition: all 0.2s ease-in-out;
  transition-delay: 1000ms;
  display: inline-block;
}
.search p:after {
  position: relative;
  bottom: 8px;
  left: 8px;
  background: #ff4365;
  -webkit-animation: blinky 450ms linear infinite alternate;
          animation: blinky 450ms linear infinite alternate;
}

@-webkit-keyframes blinky {
  0% {
    background: transparent;
  }
  100% {
    background: #ff4365;
  }
}

@keyframes blinky {
  0% {
    background: transparent;
  }
  100% {
    background: #ff4365;
  }
}
</style>
</head>
<body>
  <div class="search">
    <svg xmlns="http://www.w3.org/2000/svg" width="355.5" height="87.99">
        <path class="right" fill="none" stroke="#ff4365" stroke-width="4" stroke-miterlimit="10" d="M177.75 85.99h133.5c23.334 0 42.25-18.916 42.25-42.25C352.944 20.528 333.967 2 310.748 2H177.75"/>
        <path class="left" fill="none" stroke="#ff4365" stroke-width="4" stroke-miterlimit="10" d="M177.75 85.99H44.25C20.916 85.99 2 67.074 2 43.74 2.556 20.528 21.533 2 44.752 2H177.75"/>
    </svg>

    <p></p>
    <input type="text" />

    <span>Search</span>
</div>
<!-- github  -->
<a href="https://github.com/alikinvv/search-interaction" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#530491; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
      <script>
let check;
let input = document.querySelector('.search input');
let text = document.querySelector('.search p');
let search = document.querySelector('.search');
let trigger = true;

input.addEventListener('click', () => {
  if (trigger) {
    search.classList.add('active');

    check = () => {
      let cur, oldVal;
      cur = input.value;

      if (cur !== oldVal) {
        text.innerHTML = input.value;
      }

      return oldVal = cur;
    };

    sentinel = setInterval(check, .1);
  }
});

input.addEventListener('blur', () => {
  trigger = false;
  input.style.pointerEvents = 'none';

  input.value = '';
  text.innerHTML = '';
  search.classList.add('remove');

  setTimeout(() => {
    search.classList.add('done');

    setTimeout(() => {
      search.classList.remove('active', 'remove');

      setTimeout(() => {
        search.classList.remove('done');
        trigger = true;
        input.style.pointerEvents = 'all';
      }, 100);
    }, 100);
  }, 800);
});
    </script>
</body>
</html>

6. Funky Border Animation Rough Prototype

Made by Brad Frost. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
:root {
  --border-width: 3rem;
  --squish-speed: 0.8s;
}

body {
  min-height: 100vh;
  margin: 0;
}

.funky {
  display: flex;
  position: absolute;
  background: orange;
}

.funky--top {
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
}

.funky--right {
  right: 0;
  top: 0;
  height: 100vh;
  width: var(--border-width);
  flex-direction: column;
}

.funky--bottom {
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
}

.funky--left {
  top: 0;
  left: 0;
  height: 100%;
  width: var(--border-width);
  flex-direction: column;
}

.funky > * {
  display: block;
  flex: 1;
  height: var(--border-width);
  background: orange;
  transition: all var(--squish-speed) ease-out;
  -webkit-animation: grow var(--squish-speed) ease-out;
          animation: grow var(--squish-speed) ease-out;
}

@-webkit-keyframes grow {
  0% {
    flex-grow: 0.00001;
  }
  100% {
    flex-grow: 1;
  }
}

@keyframes grow {
  0% {
    flex-grow: 0.00001;
  }
  100% {
    flex-grow: 1;
  }
}
</style>
</head>
<body>
  <div class="funky funky--top">
  <span />
</div>

<div class="funky funky--right">
  <span />
</div>

<div class="funky funky--bottom">
  <span />
</div>

<div class="funky funky--left">
  <span />
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  
      <script>
document.body.style.backgroundColor = randomRgbaString(1);

var funkies = document.querySelectorAll('.funky');

for (const funky of funkies) {
  funky.addEventListener('mouseenter', function (event) {
    makeBar();
  });
}

function makeBar(target) {
  for (const funky of funkies) {
    var el = document.createElement('span');
    funky.appendChild(el);
    colorizeBars();
  }
}

function colorizeBars() {
  var bars = document.querySelectorAll('.funky > span');
  for (i = 0; i < bars.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    bars[i].style.backgroundColor = randomRgbaString(1);
  }window.CP.exitedLoop(0);
}

function randomRgbaString(alpha) {
  let r = Math.floor(Math.random() * 255);
  let g = Math.floor(Math.random() * 255);
  let b = Math.floor(Math.random() * 255);
  let a = alpha;
  return `rgba(${r},${g},${b},${a})`;
}
    </script>
</body>
</html>