css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
                <div id="connecting-dots" class="connecting-dots">
      <canvas id="canvas" height= "1200"></canvas>
  </div>
<ul class='-center'>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='http://dota2walls.com/wp-content/uploads/2014/10/witch-doctor-look-at-it-go-wallpaper.png'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
         Witch Doctor
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='http://dotageeks.com/wp-content/uploads/2015/06/Warlock-Dota-2-2.jpg'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Warlock
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='https://s-media-cache-ak0.pinimg.com/236x/82/91/8d/82918d0a7690937752e7a1a72ea346e4.jpg'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Shadow Shaman
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='http://7wallpapers.net/wp-content/uploads/1_Dota-2-Shadow-Demon.jpg'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Shadow Demon
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='http://7wallpapers.net/wp-content/uploads/1_Dota2-Omniknight.jpg'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Omniknight 
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='data:image/jpeg;base64,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'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Phantom Assassin
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='data:image/jpeg;base64,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'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Ursa
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='https://s-media-cache-ak0.pinimg.com/originals/38/3b/f5/383bf59f4e3c0ee6627fd757085b3732.jpg'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Sladar
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='data:image/jpeg;base64,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'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Windrunner
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='data:image/jpeg;base64,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'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Earthshaker
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='http://cdn.pcwallart.com/images/dota-2-male-heroes-wallpaper-4.jpg'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Lifestealer
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='http://cdn.pcwallart.com/images/dota-2-wallpaper-2.jpg'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Bounty Hunter
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='http://slhando.com/i/2017/01/dota-2-sven-wallpapers-phone.jpg'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Sven
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='http://dota2walls.com/wp-content/uploads/2015/01/lina-the-fiery-slayer-wallpaper.png'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Lina
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='http://dota2walls.com/wp-content/uploads/2014/12/the-cavern-infiltrator-wallpaper.jpg'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Meepo
        </h3>
      </div>
    </div>
  </li>
  <li>
    <div class='w'>
      <div class='f'>
        <svg viewBox='0 0 180 180'>
          <image height='100%' preserveAspectRatio='xMidYMid slice' width='100%' xlink:href='http://dota2walls.com/wp-content/uploads/2015/05/drow-ranger-keep-silence-wallpaper.jpg'></image>
        </svg>
      </div>
      <div class='b'>
        <h3>
          Drow Ranger
        </h3>
      </div>
    </div>
  </li>
</ul>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=OpenSans);

.connecting-dots {
  position: absolute;
  width: 100%;
  height: 100%!important;
  overflow: hidden;
  margin: 0 auto;
}

li {
  margin: 5px;
  position: relative;
  width: 180px;
  height: 180px;
  display: inline-block;
  vertical-align: top;
  -webkit-perspective: 300px;
          perspective: 300px;
  -webkit-transform-origin: 50% 50% 90px;
          transform-origin: 50% 50% 90px;
}

.w {
  font-size: medium;
  font-size: initial;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50% -90px;
          transform-origin: 50% 50% -90px;
  will-change: transform;
  -webkit-animation: 200ms ease-out 0ms 1 normal forwards paused;
          animation: 200ms ease-out 0ms 1 normal forwards paused;
}

.f,
.b {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: white;
  -webkit-transition: none;
  transition: none;
}

.f {
  background-color: #00BCD4;
  background: -webkit-linear-gradient(#27ae60, #2980b9);
  background: linear-gradient(#27ae60, #2980b9);
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0)
}

.f > svg{
  mix-blend-mode: luminosity;
}

.b {
  padding: 16px;
  padding: 1rem;
  background-image: -webkit-radial-gradient(circle, #27ae60, #000 160%);
  background-image: radial-gradient(circle, #27ae60, #000 160%);
  -webkit-transform: translate3d(0,0,-1px);
          transform: translate3d(0,0,-1px);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-shadow: 0 20px 20px black;
  text-align: center;
}

.in-top .b,
.out-top .b {
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
  -webkit-transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
          transform: translate3d(0, -100%, 0) rotate3d(1,0,0,90deg);
}

.in-right .b,
.out-right .b {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
          transform: translate3d(100%, 0, 0) rotate3d(0,1,0,90deg);
}

.in-bottom .b,
.out-bottom .b {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
          transform: translate3d(0, 100%, 0) rotate3d(-1,0,0,90deg);
}

.in-left .b,
.out-left .b {
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
          transform: translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
}

.in {
}

.in-top .w{
  -webkit-animation-name: in-top;
          animation-name: in-top;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.in-right .w{
  -webkit-animation-name: in-right;
          animation-name: in-right;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.in-bottom .w{
  -webkit-animation-name: in-bottom;
          animation-name: in-bottom;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.in-left .w{
  -webkit-animation-name: in-left;
          animation-name: in-left;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.out {
}

.out-top .w{
  -webkit-animation-name: out-top;
          animation-name: out-top;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.out-right .w{
  -webkit-animation-name: out-right;
          animation-name: out-right;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.out-bottom .w{
  -webkit-animation-name: out-bottom;
          animation-name: out-bottom;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.out-left .w{
  -webkit-animation-name: out-left;
          animation-name: out-left;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

@-webkit-keyframes in-top {
  from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
  to    {-webkit-transform: rotate3d(-1,0,0,90deg);transform: rotate3d(-1,0,0,90deg)}
}

@keyframes in-top {
  from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
  to    {-webkit-transform: rotate3d(-1,0,0,90deg);transform: rotate3d(-1,0,0,90deg)}
}
@-webkit-keyframes out-top {
  from {-webkit-transform: rotate3d(-1,0,0,90deg);transform: rotate3d(-1,0,0,90deg)}
  to   {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}
@keyframes out-top {
  from {-webkit-transform: rotate3d(-1,0,0,90deg);transform: rotate3d(-1,0,0,90deg)}
  to   {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}

@-webkit-keyframes in-right {
  from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
  to    {-webkit-transform: rotate3d(0,-1,0,90deg);transform: rotate3d(0,-1,0,90deg)}
}

@keyframes in-right {
  from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
  to    {-webkit-transform: rotate3d(0,-1,0,90deg);transform: rotate3d(0,-1,0,90deg)}
}
@-webkit-keyframes out-right {
  from  {-webkit-transform: rotate3d(0,-1,0,90deg);transform: rotate3d(0,-1,0,90deg)}
  to    {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}
@keyframes out-right {
  from  {-webkit-transform: rotate3d(0,-1,0,90deg);transform: rotate3d(0,-1,0,90deg)}
  to    {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}

@-webkit-keyframes in-bottom {
  from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
  to    {-webkit-transform: rotate3d(1,0,0,90deg);transform: rotate3d(1,0,0,90deg)}
}

@keyframes in-bottom {
  from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
  to    {-webkit-transform: rotate3d(1,0,0,90deg);transform: rotate3d(1,0,0,90deg)}
}
@-webkit-keyframes out-bottom {
  from  {-webkit-transform: rotate3d(1,0,0,90deg);transform: rotate3d(1,0,0,90deg)}
  to    {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}
@keyframes out-bottom {
  from  {-webkit-transform: rotate3d(1,0,0,90deg);transform: rotate3d(1,0,0,90deg)}
  to    {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}

@-webkit-keyframes in-left {
  from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
  to    {-webkit-transform: rotate3d(0,1,0,90deg);transform: rotate3d(0,1,0,90deg)}
}

@keyframes in-left {
  from  {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
  to    {-webkit-transform: rotate3d(0,1,0,90deg);transform: rotate3d(0,1,0,90deg)}
}
@-webkit-keyframes out-left {
  from  {-webkit-transform: rotate3d(0,1,0,90deg);transform: rotate3d(0,1,0,90deg)}
  to    {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}
@keyframes out-left {
  from  {-webkit-transform: rotate3d(0,1,0,90deg);transform: rotate3d(0,1,0,90deg)}
  to    {-webkit-transform: rotate3d(0,0,0,0deg);transform: rotate3d(0,0,0,0deg)}
}

/* ======= aesthetics ======= */

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 48px 24px;
  padding: 3rem 1.5rem;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  color: #000;
  background-color: #eee;
  line-height: 1.618;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header {
  padding-bottom: 48px;
  padding-bottom: 3rem;
}

h3 {
  font-size: 17px;
  font-weight: bold;
  letter-spacing: -0.5px;
}


ul {
  font-size: 0;
  padding: 0;
  max-width: 760px;
  margin: 0 auto;
  list-style: none
}

ul::after{
  content: '';
  display: table;
  clear: both;
}

footer {
  font-size: 12px;
  font-size: .75rem;
  font-family: monospace;
  padding-top: 48px;
  padding-top: 3rem
}

footer a{
  display: inline-block;
  vertical-align: middle;
}

footer svg{
  fill: currentColor;
}

:link,:visited {
  color: #00BCD4;
}

.-center {
  text-align: center;
}

.-neutral-mid {
  color: rgb(153, 153, 153);
}

            
          
!
            
              class DAH {

  constructor(nodes) {
    this.nodes = [];

    Array.prototype.slice.call(nodes, 0).forEach(node => {
      this.nodes.push(new Node(node));
    });

    this._bindEvents();
  }

  _bindEvents() {
    ['_resizeHandler'].forEach(fn => this[fn] = this[fn].bind(this));
    window.addEventListener('resize', this._resizeHandler, false);
  }

  _resizeHandler() {
    this.nodes.forEach(node => node.update());
  }
}

class Node {
  constructor(node) {
    this.element = node;
    this._bindEvents().update();
  }

  update() {
    // const bcr = this.element.getBoundingClientRect();
    // this.l = bcr.left;
    // this.t = bcr.top;
    this.w = this.element.offsetWidth;
    this.h = this.element.offsetHeight;
    this.l = this.element.offsetLeft;
    this.t = this.element.offsetTop;
  }

  _bindEvents() {
    ['_mouseEnterHandler', '_mouseOutHandler'].forEach(fn => this[fn] = this[fn].bind(this));
    this.element.addEventListener('mouseenter', this._mouseEnterHandler, false);
    this.element.addEventListener('mouseout', this._mouseOutHandler, false);
    return this;
  }

  _mouseEnterHandler(ev) {
    this._addClass(ev, 'in');
  }

  _mouseOutHandler(ev) {
    this._addClass(ev, 'out');
  }

  _addClass(ev, state) {
    const direction = this._getDirection(ev);
    let class_suffix = '';

    switch (direction) {
      case 0: class_suffix = '-top'; break;
      case 1: class_suffix = '-right'; break;
      case 2: class_suffix = '-bottom'; break;
      case 3: class_suffix = '-left'; break;
    }

    this.element.className = '';
    this.element.classList.add(state + class_suffix);
  }

  _getDirection(ev) {
    const w = this.w,
      h = this.h,
      x = (ev.pageX - this.l - (w / 2) * (w > h ? (h / w) : 1)),
      y = (ev.pageY - this.t - (h / 2) * (h > w ? (w / h) : 1)),
      d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;

    return d;
  }
}

new DAH(document.querySelectorAll('li'));

var width, height, container, canvas, ctx, points, target, animateHeader = true;

function init() {
  initHeader();
  initAnimation();
  addListeners();
}

function initHeader() {
  width = window.innerWidth;
  height = window.innerHeight;
  target = {
    x: width / 2,
    y: height / 2
  };

  container = document.getElementById('connecting-dots');
  container.style.height = height + 'px';

  canvas = document.getElementById('canvas');
  canvas.width = width;
  canvas.height = height;
  ctx = canvas.getContext('2d');

  // create points
  points = [];
  for (var x = 0; x < width; x = x + width / 20) {
    for (var y = 0; y < height; y = y + height / 20) {
      var px = x + Math.random() * width / 100;
      var py = y + Math.random() * height / 100;
      var p = {
        x: px,
        originX: px,
        y: py,
        originY: py
      };
      points.push(p);
    }
  }

  // for each point find the 5 closest points
  for (var i = 0; i < points.length; i++) {
    var closest = [];
    var p1 = points[i];
    for (var j = 0; j < points.length; j++) {
      var p2 = points[j]
      if (!(p1 == p2)) {
        var placed = false;
        for (var k = 0; k < 5; k++) {
          if (!placed) {
            if (closest[k] == undefined) {
              closest[k] = p2;
              placed = true;
            }
          }
        }

        for (var k = 0; k < 5; k++) {
          if (!placed) {
            if (getDistance(p1, p2) < getDistance(p1, closest[k])) {
              closest[k] = p2;
              placed = true;
            }
          }
        }
      }
    }
    p1.closest = closest;
  }

  // assign a circle to each point
  for (var i in points) {
    var c = new Circle(points[i], 2 + Math.random() * 2, 'rgba(0 ,0 , 0 ,0.9)');
    points[i].circle = c;
  }
}

// Event handling
function addListeners() {
  if (!('ontouchstart' in window)) {
    window.addEventListener("mousemove", mouseMove);
  }
  window.addEventListener("resize", resize, true);
  window.addEventListener("scroll", scrollCheck);
}

function mouseMove(e) {
  var posx = posy = 0;
  if (e.pageX || e.pageY) {
    posx = e.pageX;
    posy = e.pageY;
  } else if (e.clientX || e.clientY) {
    posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  }
  target.x = posx;
  target.y = posy;
}

function scrollCheck() {
  if (document.body.scrollTop > height) animateHeader = false;
  else animateHeader = true;
}

function resize() {
  width = window.innerWidth;
  height = window.innerHeight;
  container.style.height = height + 'px';
  ctx.canvas.width = width;
  ctx.canvas.height = height;
}

// animation
function initAnimation() {
  animate();
  for (var i in points) {
    shiftPoint(points[i]);
  }
}

function animate() {
  if (animateHeader) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i in points) {
      // detect points in range
      if (Math.abs(getDistance(target, points[i])) < 10000) {
        points[i].active = 0.3;
        points[i].circle.active = 0.6;
      } else if (Math.abs(getDistance(target, points[i])) < 200000) {
        points[i].active = 0.1;
        points[i].circle.active = 0.3;
      } else if (Math.abs(getDistance(target, points[i])) < 400000) {
        points[i].active = 0.02;
        points[i].circle.active = 0.1;
      } else {
        points[i].active = 0;
        points[i].circle.active = 0;
      }

      drawLines(points[i]);
      points[i].circle.draw();
    }
  }
  requestAnimationFrame(animate);
}

function shiftPoint(p) {
  TweenLite.to(p, 1 + 1 * Math.random(), {
    x: p.originX - 50 + Math.random() * 100,
    y: p.originY - 50 + Math.random() * 100,
    ease: Circ.easeInOut,
    onComplete: function() {
      shiftPoint(p);
    }
  });
}

// Canvas manipulation
function drawLines(p) {
  if (!p.active) return;
  for (var i in p.closest) {
    ctx.beginPath();
    ctx.moveTo(p.x, p.y);
    ctx.lineTo(p.closest[i].x, p.closest[i].y);
    ctx.strokeStyle = 'rgba(0,0,0,' + p.active + ')';
    ctx.stroke();
  }
}

function Circle(pos, rad, color) {
  var _this = this;

  // constructor
  (function() {
    _this.pos = pos || null;
    _this.radius = rad || null;
    _this.color = color || null;
  })();

  this.draw = function() {
    if (!_this.active) return;
    ctx.beginPath();
    ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'rgba(0,0,0,' + _this.active + ')';
    ctx.fill();
  };
}

// Util
function getDistance(p1, p2) {
  return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
}

init();

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console