IndustryDay Egg

by mrjordy

HTML

<div class="Egg">
<div class="RedLine LeftLine"></div>
<div class="RedLine TopLine"></div>
<div class="RedLine BottomLine"></div>
<div class="EggText EggWhite NPC CloudStack">
  Cloud Stack
</div>
<div class="EggText EggBlack NPC Agility">
  Agility/ Speed<br>to Capability
</div>
<div class="EggText EggWhite NPC InfrastructureConvergence">
  Infrastructure Convergence
</div>
<div class="EggText EggBlack NPC CostEffectiveness">
  Cost Effectiveness
</div>
<div class="EggText EggWhite GSD Carrier">
  Carrier
</div>
<div class="EggText Eggblack GSD Interoperability">
  Interoperability
</div>
<div class="EggText EggWhite GSD Productivity">
  Productivity and<br>Unified Capabilities
</div>
<div class="EggText EggBlack GSD Warfighters">
  Capabilities<br>Tailored to<br>Warfighters
</div>
<div class="EggText EggWhite MA Awareness">
Assured C2 and Network<br>Situation Awareness
</div>
<div class="EggText EggBlack MA Warfare">
Information<br>Warfare
</div>
<div class="EggText EggWhite MA DataSecurity">
Security Boundaries<br>and 
Data Security
</div>
<div class="EggText EggBlack MA CyberSecurity">
Cybersecurity
</div>
<div class="EggText EggBlack StrategicPlan">
Strategic Plan
</div>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="1069" height="610" viewBox="0 0 1069 610">
  <path d="M856.432,296.264 C856.432,296.264 851.909,252.636 814.382,215.703 C763.690,165.813 709.554,150.543 709.554,150.543 L791.877,69.981 C791.877,69.981 877.602,98.982 936.978,149.358 C1025.923,224.820 1023.446,295.672 1023.446,295.672 L856.432,296.264 ZM856.432,322.328 L1023.446,322.921 C1023.446,322.921 1025.923,393.772 936.978,469.234 C877.602,519.610 780.032,549.796 780.032,549.796 L695.340,469.827 C695.340,469.827 763.690,452.779 814.382,402.890 C851.909,365.957 856.432,322.328 856.432,322.328 Z"
  class="Egg_DarkGreen GSD" />
  <path d="M640.261,271.385 C623.847,253.614 608.279,247.690 608.279,247.690 L693.563,164.760...

CSS

.Egg {
    margin-left: calc(50% - 534px);
    transform: scale(1);
}
@media screen and (max-width: 1100px) {
  .Egg {
    margin-left: calc(50% - 500px);
    transform: scale(.7);
    margin-top: -80px;
    margin-bottom: -80px;
   }
   .Productivity {
     width: 193px;
   }
}
.Egg_DarkGreen {
     fill: #77923f;
     transform-origin: left;
}
.Egg_DarkGreen, .Egg_LightGreen, .Egg_LightBlue, .Egg_DarkBlue, .Egg_LightGrey, .Egg_DarkGrey {
     fill-rule: evenodd;
     transition: .2s;
}
.Egg_LightGreen {
     fill: #d0e4a6;
     transform-origin: left;
}
.Egg_LightBlue {
     fill: #c4daf2;
     transform-origin: 40% 100%;
}
.Egg_DarkBlue {
     fill: #527cad;
     transform-origin: 40% 100%;
}
.Egg_LightGrey {
     fill: #d7d7d7;
     transform-origin: 40% -20%;
}
.Egg_DarkGrey {
     fill: #7f7f7f;
     transform-origin: 40% -20%;
}
.Egg_Center {
     fill: #fffbee;
}
.MA, .GSD, .NPC {
  cursor: pointer;
}
.RedLine {
    border-bottom: 6px dotted #cc3939;
    height: 3px;
    display: block;
    position: absolute;
}
.LeftLine {
    width: 375px;
    margin-top: 304px;
}
.TopLine {
    width: 263px;
    margin-top: 147px;
    margin-left: 559px;
    transform: rotate(136deg);
}
.BottomLine {
    width: 259px;
    margin-top: 467px;
    margin-left: 544px;
    transform: rotate(224deg);
}
.EggText {
    position: absolute;
    font-family: kalinga;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}
.EggWhite {
  color: white;
}
.EggBlack {
  color: black;
}
.CloudStack {
    margin-top: 180px;
    margin-left: 85px;
    transform: rotate(-46deg);
}
.Agility {
    margin-top: 203px;
    margin-left: 228px;
    transform: rotate(-37deg);
}
.InfrastructureConvergence {
    margin-top: 63px;
    margin-left: 379px;
}
.CostEffectiveness {
    margin-top: 163px;
    margin-left: 421px;
}
.Carrier {
    margin-left: 840px;
    margin-top: 178px;
    transform: rotate(50deg);
}
.Interoperability {
    margin-left: 669px;
    margin-top: 220px;
   ...

JavaScript

$(document).ready(function() {
// --------------------- Hover
  $('.GSD').hover(
	  function () {
      $('.GSD').css({"fill":"orange"});
      $('.Egg_DarkGreen, .Egg_LightGreen').css({"transform":"scale(1.05)"});
      $('.NPC, .MA, .RedLine').css({"opacity":".8"});
    }, 
		function () {
      $('.Egg_DarkGreen').css({"fill":"#77923f"});
      $('.Egg_LightGreen').css({"fill":"#d0e4a6"});
      $('.Egg_DarkGreen, .Egg_LightGreen').css({"transform":"scale(1.00)"});
      $('.NPC, .MA, .RedLine').css({"opacity":"1"});
     }
   );
  $('.NPC').hover(
	  function () {
      $('.NPC').css({"fill":"orange"});
      $('.Egg_DarkBlue, .Egg_LightBlue').css({"transform":"scale(1.035)"});
      $('.GSD, .MA, .RedLine').css({"opacity":".8"});
    }, 
		function () {
      $('.Egg_DarkBlue').css({"fill":"#527cad"});
      $('.Egg_LightBlue').css({"fill":"#c4daf2"});
      $('.Egg_DarkBlue, .Egg_LightBlue').css({"transform":"scale(1.00)"});
      $('.GSD, .MA, .RedLine').css({"opacity":"1"});
     }
   );
  $('.MA').hover(
	  function () {
      $('.MA').css({"fill":"orange"});
      $('.Egg_DarkGrey, .Egg_LightGrey').css({"transform":"scale(1.035)"});
      $('.GSD, .NPC, .RedLine').css({"opacity":".8"});
    }, 
		function () {
      $('.Egg_DarkGrey').css({"fill":"#7f7f7f"});
      $('.Egg_LightGrey').css({"fill":"#d7d7d7"});
      $('.Egg_DarkGrey, .Egg_LightGrey').css({"transform":"scale(1.00)"});
      $('.GSD, .NPC, .RedLine').css({"opacity":"1"});
     }
   );
// --------------------- Click
  $('.MA, .GSD, .NPC').click(function() {
     $('.CloseAll').css({'display':'block'});
  });
  $('.NPC').click(function() {
     $('.NPC_opened').css({'display':'block'});
  });
  $('.MA').click(function() {
     $('.MA_opened').css({'display':'block'});
  });
  $('.GSD').click(function() {
     $('.GSD_opened').css({'display':'block'});
  });
  $('.CloseAll, .ClosePopoverBox').click(function() {
     $('.PopOverBoxContainer').css({'display':'none'});
    ...