NSB Logo Prototype

Using GSAP TweenMax

by bejnar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<svg id="netzwerk-studienorientierung-brandenburg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">

  <title>Netzwerk Studienorientierung Brandenburg logo by Berliner Süden GbR — Roman Bejnar and Jens Draser-Schieb. See more of our work at www.berlinersueden.de</title>
  
  <defs>

    <clipPath id="nwsb-mask">
      <circle cx="150" cy="150" r="150"></circle>
    </clipPath>

    <linearGradient id="nwsb-gradient-silver">
      <stop offset="0%" stop-color="#bbbcbd" />
      <stop offset="100%" stop-color="#ececed" />
    </linearGradient>

    <linearGradient id="nwsb-gradient-purple">
      <stop offset="0" stop-color="#423672" />
      <stop offset="1" stop-color="#814897" />
    </linearGradient>

    <linearGradient id="nwsb-gradient-violet">
      <stop offset="0" stop-color="#814897" />
      <stop offset="1" stop-color="#AE86B3" />
    </linearGradient>

    <linearGradient id="nwsb-gradient-orange">
      <stop offset="0" stop-color="#f5a26b" />
      <stop offset="1" stop-color="#ffde10" />
    </linearGradient>

    <linearGradient id="nwsb-gradient-red">
      <stop offset="0" stop-color="#ed6c84" />
      <stop offset="1" stop-color="#f5a26b" />
    </linearGradient>

    <linearGradient id="nwsb-gradient-yellow">
      <stop offset="0" stop-color="#FFDE10" />
      <stop offset="1" stop-color="#FFF1A5" />
    </linearGradient>

  </defs>

  <g class="nwsb-network-lines" clip-path="url(#nwsb-mask)">
    <circle id="nwsb-circ" cx="150" cy="150" r="150" fill="#ececed"></circle>
    <line id="nwsb-orange" x1="258" y1="0" x2="61" y2="300" stroke-width="50" stroke="url(#nwsb-gradient-orange)" stroke-linecap="square" />
    <line id="nwsb-violet" x1="302" y1="102" x2="0" y2="62" stroke-width="50"...

CSS

#netzwerk-studienorientierung-brandenburg {
  width: 90vw;
  height: 90vh;
}

JavaScript

var
  nwsbSilver = document.getElementById('nwsb-silver'),
  nwsbPurple = document.getElementById('nwsb-purple'),
  nwsbViolet = document.getElementById('nwsb-violet'),
  nwsbRed    = document.getElementById('nwsb-red'),
  nwsbOrange = document.getElementById('nwsb-orange'),
  nwsbYellow = document.getElementById('nwsb-yellow'),
  nwsbCirc   = document.getElementById('nwsb-circ'),
  nwsbTimeline;

var nwsbTimeline = new TimelineMax({
  delay: 0,
  repeat: -1,
  repeatDelay: 1,
  onComplete: restart
});


function restart() {
  TweenLite.to(restart, 0, {
    autoAlpha: 0
  })
}


// Prepare Network Positions -------------------------

nwsbTimeline.to(nwsbPurple, 0, {
  attr: {
    x1: 194,
    y1: 300,
    x2: 194,
    y2: 300
  }
})

.to(nwsbViolet, 0, {
  attr: {
    x1: 0,
    y1: 62,
    x2: 0,
    y2: 62
  }
})

.to(nwsbRed, 0, {
  attr: {
    x1: 300,
    y1: 115,
    x2: 300,
    y2: 115
  }
})

.to(nwsbOrange, 0, {
  attr: {
    x1: 61,
    y1: 300,
    x2: 61,
    y2: 300
  }
})

.to(nwsbYellow, 0, {
  attr: {
    x1: 264,
    y1: 0,
    x2: 264,
    y2: 0
  }
})

.to(nwsbSilver, 0, {
  attr: {
    x1: 0,
    y1: 225,
    x2: 0,
    y2: 225
  }
})

// Build Network -------------------------

.to(nwsbPurple, 0.375, {
  attr: {
    x1: 194,
    y1: 300,
    x2: 0,
    y2: 35
  },
  ease: Power0.easeNone
})

.to(nwsbViolet, 0.350, {
  attr: {
    x1: 302,
    y1: 102,
    x2: 0,
    y2: 62
  },
  ease: Power0.easeNone
})

.to(nwsbRed, 0.325, {
  attr: {
    x1: 300,
    y1: 115,
    x2: 84,
    y2: 300
  },
  ease: Power0.easeNone
})

.to(nwsbOrange, 0.300, {
  attr: {
    x1: 258,
    y1: 0,
    x2: 61,
    y2: 300
  },
  ease: Power0.easeNone
})

.to(nwsbYellow, 0.250, {
  attr: {
    x1: 264,
    y1: 0,
    x2: 0,
    y2: 152
  },
  ease: Power0.easeNone
})

.to(nwsbSilver, 0.225, {
  attr: {
    x1: 300,
    y1: 185,
    x2: 0,
    y2: 225
  },
  ease: Power0.easeNone
})


// Pause -------------------------
.to(nwsbCirc, 3, {})



// Unbuild Network...