SVG Animated Arc Grid

In this example below you will see how to do a SVG Animated Arc Grid with some HTML / CSS and Javascript

Based on https://dribbble.com/shots/2466291-Daily-UI-Day-52-Daily-UI-logo with the colour scheme from the same set https://dribbble.com/shots/2466291-Daily-UI-Day-52-Daily-UI-logo/attachments/481720

Thumbnail
This awesome code was written by z-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright z- ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SVG Animated Arc Grid</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  background-color: #000;
  overflow: hidden;
}

.motion {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #333;
  width: 200px;
  height: 100px;
  padding: 50px;
}
.motion path.a {
  z-index: 1000;
}
.motion path.b {
  z-index: -1000;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <svg class="motion">
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi1-b b"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi2-b b"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi3-b b"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi4-b b"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi5-b b"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi6-b b"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi7-b b"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi8-b b"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi1-a a"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi2-a a"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi3-a a"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi4-a a"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi5-a a"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi6-a a"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi7-a a"></path>
   <path d="" fill="#fff" stroke="#000" stroke-width="0" class="semi8-a a"></path>
</svg>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/z-/svg-animated-arc-grid-QyBKvW */
body {
  background-color: #000;
  overflow: hidden;
}

.motion {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #333;
  width: 200px;
  height: 100px;
  padding: 50px;
}
.motion path.a {
  z-index: 1000;
}
.motion path.b {
  z-index: -1000;
}


/*Downloaded from https://www.codeseek.co/z-/svg-animated-arc-grid-QyBKvW */
pentitle = "SVG Animated Arc Grid";
var colors = ["#DC5600", "#004F63", "#007C9A", "#E02200", "#2B292C", "#B2B0B3"];
var order = [0, 0, 0, 0, 0, 0, 0, 0];
var assignedcolors = [0, 0, 0, 0, 0, 0, 0, 0];
var size = 100; //Radius of quarters
var settings = [
   [[0,1],1,[0,90]],
   [[0,1],1,[90,180]],
   [[1,1],1,[0,90]],
   [[2,1],1,[180,270]],
   [[3,1],1,[270,360]],
   [[2,1],1,[90,180]],
   [[4,1],1,[270,360]],
   [[3,1],1,[90,180]]
];
var currentsection = -1;
var previoussection = -1;
var currentpart = "";
var direction = 0;
var progress_i = 0;
var timeforanimation = 0; //Speed of animations, 0 is fastest
var tick = -1;

function init() {
   $(".motion").css("padding", size + "px").css("width", size*4 + "px").css("height", size*2 + "px");
   for(var i = 0; i < settings.length; i++) {
      newcolor(i, "b");
   }
   tick = timeforanimation/90;
   setTimeout(function(){setInterval(progress, tick);},1000);
}

function progress() {
   if (currentsection <= -1) {
      currentsection = Math.floor(Math.random() * 8);
      direction = (Math.random() < 0.5) ? -1 : 1;
      direction = 1;
      currentpart = "a";
      order[currentsection] = (order[currentsection] == 1) ? 0 : 1;
      assigncolor(currentsection);
   }
   if (progress_i % 90 != 0 || progress_i == 0) {
      progress_i += direction;
      $(".semi" + (currentsection + 1) + "-" + currentpart).attr("d", part(currentsection,progress_i));
   } else {
      reccolor(currentsection);
      $(".semi" + (currentsection + 1) + "-a").attr("d", part(currentsection,0));
      currentsection = -1;
      progress_i = 0;
   }
}

function part(id, anglesuccess) {
   if (anglesuccess > 0) {
      return describeArc(settings[id][0][0]*size, settings[id][0][1]*size, settings[id][1]*size, settings[id][2][0], settings[id][2][0] + anglesuccess);
   } else {
      return describeArc(settings[id][0][0]*size, settings[id][0][1]*size, settings[id][1]*size, settings[id][2][0] - anglesuccess, settings[id][2][1]);
   }
}
function full(id) {
      return describeArc(settings[id][0][0]*size, settings[id][0][1]*size, settings[id][1]*size, settings[id][2][0], settings[id][2][1]);
}
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
   var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
   return {x: centerX + (radius * Math.cos(angleInRadians)),y: centerY + (radius * Math.sin(angleInRadians))};
}

function describeArc(x, y, radius, startAngle, endAngle) {
   var start = polarToCartesian(x, y, radius, endAngle);
   var end = polarToCartesian(x, y, radius, startAngle);
   var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
   var d = ["M", start.x, start.y,"A", radius, radius, 0, arcSweep, 0, end.x, end.y,"L", x, y,].join(" ");
   return d;
}

function assigncolor(id) {
   var c = colors[Math.floor(Math.random() * colors.length)];
   while (c == assignedcolors[id]) {
      var c = colors[Math.floor(Math.random() * colors.length)];
   }
   $(".semi" + (id + 1) + "-a").attr('fill', c);
   assignedcolors[id] = c;
}
function newcolor(id, p) {
   
   var c = colors[Math.floor(Math.random() * colors.length)];
   $(".semi" + (id + 1) + "-" + p).attr('fill', c);
   if (p == "a") {
      assignedcolors[id] = c;
   }
}
function reccolor(id) {
   var c = assignedcolors[id];
   $(".semi" + (id + 1) + "-b").attr('fill', c);
}
$(".semi1-b").attr("d", full(0));
$(".semi2-b").attr("d", full(1));
$(".semi3-b").attr("d", full(2));
$(".semi4-b").attr("d", full(3));
$(".semi5-b").attr("d", full(4));
$(".semi6-b").attr("d", full(5));
$(".semi7-b").attr("d", full(6));
$(".semi8-b").attr("d", full(7));
init();

Comments