<main>
<section class="d-container">
    <i class="material-icons ctrls">pause</i>
    <div class="slash slash1">
      <article>
        <header>
          <h1>Zack Argyle | Pinterest 📌</h1>
          <h3>
            <span>Tech Lead</span>
          </h3>

          <h1 class="best"><span>🌟</span>Best Question</h1>
        </header>
        <hr>
        <section class="qa best-question">
          <span class="norm">Marcus Nielsen:</span> Have you evaluated the cost/benefit of using Redux compared to barebone react components
          or something else like unstated?
        </section>
        ◆◆◆
        <section class="qa best-response">
          Definitely. We have had a lot of conversations around redux. In fact we have redux devtools enabled for our mobile web version
          in production if you'd like to see how we use it. In general, our approach has been:
          <br>
          <span class="norm">1. All UI state goes in React state.
            <br> 2. All session state goes in Redux.
            <br> 3. All API data gets normalized and stored in Redux.</span>
        </section>
      </article>
    </div>

    <div class="slash slash2">
      <article>
        <header>
          <h1>Zack Argyle | Pinterest 📌</h1>
          <h3>
            <span>Tech Lead</span>
          </h3>

          <h1 class="best"><span>💯</span>Best Insight</h1>
        </header>
        <hr>
        <section class="qa best-question">
          <span class="norm">stackola:</span> I've been recently offered to lead a newly formed small team. What kind of preperation can I do
          to best get ready for that role?
        </section>
        ◆◆◆
        <section class="qa best-response">
          The best leads I know are people who:
          <br>
          <span class="norm">1. Are productive in their own code commits.
            <br> 2. Actively review others' code and take that opportunity to teach if possible.
            <br> 3. Knowledge-share frequently. Create docs, diagrams, etc to help spread the knowledge across the entire team.</span>
        </section>
      </article>
    </div>

    <div class="slash slash3">
      <article>
        <header>
          <h1>Zack Argyle | Pinterest 📌</h1>
          <h3>
            <span>Tech Lead</span>
          </h3>

          <h1 class="best"><span>😲</span>Most Amusing Fact</h1>
        </header>
        <hr>
        <section class="qa best-question">
          <span class="norm">danbovey:</span> How fast/slow is your webpack build to compile when developing and when running a full build?
          And can you talk about anything you've done to speed it up?
        </section>
        ◆◆◆
        <section class="qa best-response">
          Running it now and I'll let you know. 😉
          <br>
          <em>(A minute later passes...)</em>
          <br>
          <span class="norm">By the way our webpack build is 1 minute & 4 seconds! 😃</span>
        </section>
      </article>
    </div>

    <div class="slash slash4">
      <article>
        <div class="reactiflux-icon"></div>
      </article>
    </div>
  </section>

  <section class="d-container">
    <p class="reactiflux">Reactiflux</p>
    <svg id="qna" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="142" height="133.29">
      <path d="M21.87 107.82L21.87 101.52L21.87 101.52Q13.50 99.99 8.91 93.60L8.91 93.60L8.91 93.60Q4.32 87.21 4.32 76.32L4.32 76.32L4.32 62.28L4.32 62.28Q4.32 50.04 10.48 43.29L10.48 43.29L10.48 43.29Q16.65 36.54 27.54 36.54L27.54 36.54L27.54 36.54Q38.43 36.54 44.59 43.29L44.59 43.29L44.59 43.29Q50.76 50.04 50.76 62.28L50.76 62.28L50.76 76.32L50.76 76.32Q50.76 87.21 46.13 93.60L46.13 93.60L46.13 93.60Q41.49 99.99 33.21 101.52L33.21 101.52L33.21 103.14L33.21 103.14Q33.21 105.66 35.46 105.66L35.46 105.66L41.04 105.66L41.04 116.46L30.42 116.46L30.42 116.46Q26.73 116.46 24.30 113.98L24.30 113.98L24.30 113.98Q21.87 111.51 21.87 107.82L21.87 107.82ZM27.54 91.26L27.54 91.26L27.54 91.26Q30.78 91.26 32.94 90.18L32.94 90.18L32.94 90.18Q35.10 89.10 36.45 87.21L36.45 87.21L36.45 87.21Q37.80 85.32 38.34 82.66L38.34 82.66L38.34 82.66Q38.88 80.01 38.88 76.86L38.88 76.86L38.88 61.74L38.88 61.74Q38.88 58.77 38.25 56.16L38.25 56.16L38.25 56.16Q37.62 53.55 36.27 51.57L36.27 51.57L36.27 51.57Q34.92 49.59 32.76 48.46L32.76 48.46L32.76 48.46Q30.60 47.34 27.54 47.34L27.54 47.34L27.54 47.34Q24.48 47.34 22.32 48.46L22.32 48.46L22.32 48.46Q20.16 49.59 18.81 51.57L18.81 51.57L18.81 51.57Q17.46 53.55 16.83 56.16L16.83 56.16L16.83 56.16Q16.20 58.77 16.20 61.74L16.20 61.74L16.20 76.86L16.20 76.86Q16.20 80.01 16.74 82.66L16.74 82.66L16.74 82.66Q17.28 85.32 18.63 87.21L18.63 87.21L18.63 87.21Q19.98 89.10 22.14 90.18L22.14 90.18L22.14 90.18Q24.30 91.26 27.54 91.26Z"
      />
      <path style="transform: translateX(51px)  translateY(9px) scale(0.75);" d="M33.57 90L33.57 74.34L23.58 74.34L23.58 74.34Q19.80 74.34 17.46 76.23L17.46 76.23L17.46 76.23Q15.12 78.12 15.12 81.90L15.12 81.90L15.12 82.44L15.12 82.44Q15.12 86.22 17.46 88.11L17.46 88.11L17.46 88.11Q19.80 90 23.58 90L23.58 90L33.57 90ZM33.57 56.16L44.91 56.16L44.91 63.54L53.19 63.54L53.19 74.88L44.91 74.88L44.91 100.80L22.41 100.80L22.41 100.80Q17.91 100.80 14.40 99.54L14.40 99.54L14.40 99.54Q10.89 98.28 8.55 96.08L8.55 96.08L8.55 96.08Q6.21 93.87 5.00 90.85L5.00 90.85L5.00 90.85Q3.78 87.84 3.78 84.33L3.78 84.33L3.78 83.25L3.78 83.25Q3.78 77.85 6.79 74.56L6.79 74.56L6.79 74.56Q9.81 71.28 14.40 70.02L14.40 70.02L14.40 68.40L14.40 68.40Q9.81 67.14 6.79 63.90L6.79 63.90L6.79 63.90Q3.78 60.66 3.78 55.26L3.78 55.26L3.78 54.18L3.78 54.18Q3.78 50.67 5.00 47.66L5.00 47.66L5.00 47.66Q6.21 44.64 8.55 42.48L8.55 42.48L8.55 42.48Q10.89 40.32 14.40 39.06L14.40 39.06L14.40 39.06Q17.91 37.80 22.41 37.80L22.41 37.80L32.22 37.80L32.22 48.60L23.58 48.60L23.58 48.60Q19.80 48.60 17.46 50.35L17.46 50.35L17.46 50.35Q15.12 52.11 15.12 55.80L15.12 55.80L15.12 56.34L15.12 56.34Q15.12 60.12 17.46 61.83L17.46 61.83L17.46 61.83Q19.80 63.54 23.58 63.54L23.58 63.54L33.57 63.54L33.57 56.16Z"
      />
      <path style="transform: translateX(84px);" d="M41.31 100.80L38.25 87.30L16.83 87.30L13.77 100.80L1.35 100.80L16.38 37.80L38.70 37.80L53.73 100.80L41.31 100.80ZM26.73 43.74L19.35 75.96L35.64 75.96L28.35 43.74L26.73 43.74Z"
      />
    </svg>
    <p class="overview">OVERVIEW</p>
  </section>
</main>
body {
  display: flex;
  margin: 0;
  width: 100%; 
  height: 100vh;
  justify-content: center;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  min-height: 400px;
  height: 100%;
  margin: auto;
  transform: scale(0.9);
}

.d-container {
  display: flex;
  flex-direction: column;
  width: auto;
  position: absolute;
  justify-self: center;
}

.ctrls {
  position: fixed;
  z-index: 40;
  right: 22px;
  margin-top: 26px;
  color: white;
  font-size: 33px;
  cursor: pointer;
  user-select: none;
  opacity: 0;
}

.reactiflux {
  opacity: 1;
  margin: 0px;
  margin-left: 2px;
  margin-bottom: -13px;
  color: #02d8ff;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -3px;
  font-family: "Space Mono", monospace;
  text-rendering: optimizeLegibility;
}

.overview {
  opacity: 1;
  z-index: 3;
  margin: 0px;
  margin-left: 120px;
  margin-top: -3px;
  color: #02d8ff;
  font-size: 30px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: 0px;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}

.slash {
  opacity: 0;
  margin: auto;
/*   margin-left: -36px; */
  width: 10px;
  height: 2px;
/*   background: #44b891; */
  z-index: 4;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  color: white;
}

.slash1 {
  background: #dd1d64;
}

.slash2 {
  position: absolute;
  height: 10px;
  width: 10px;
  background: #44b891;
}

.slash3 {
  position: absolute;
  height: 10px;
  width: 10px;
  background:#02d8ff;
}

.slash4 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 10px;
  width: 10px;
  background:#fff;
  outline: solid 4px white;
  outline-offset: -2px;
}

article {
  padding: 30px;
}

header {
  line-height: 1.4;
}

hr {
  border: 1px solid #fff;
  margin: -1px 0px;
}

h1 {
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.3px;
}

.best {
  margin: 0;
  margin-top: 5px;
}

.best span {
  vertical-align: middle;
}

span {
  font-weight: 200;
}

.norm {
  font-weight: 400;
}

.qa {
  margin-top: 10px;
  line-height: 2;
  font-size: 9px;
}

.best-response {
  margin: 2px;
  font-weight: 100;
}

h3 {
  font-weight: 100;
  margin: 0;
  margin-top: -3px;
  font-size: 12px;
}

#qna {
  transform: scale(2);
  margin: auto;
}

#qna path {
  fill: #fff;
  stroke: #dd1d64;
  stroke-width: 0.5px;
}

.reactiflux-icon {
  display: absolute;
  width: 59px;
  height: 52px;  
  text-indent: -9999px;
  z-index: 3;
  transform-origin: 29.1px;
  background-repeat: no-repeat;  
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTkiIGhlaWdodD0iNTIiIHZpZXdCb3g9IjAgMCA1OSA1MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHRpdGxlPkM0MzM1QkM0LTE3RTgtNDBCMy1BMTA2LTA4MzZERkIyOUFGMjwvdGl0bGU+PGRlZnM+PHBhdGggZD0iTTM0LjY5NiAxMC41Yy0yLjk4LS44MjgtNi4zNjYtMS40MzgtMTAuMDE0LTEuNzc0YTcxLjU0NSA3MS41NDUgMCAwIDEgMy41MjggNS41MTggNzEuNTQ1IDcxLjU0NSAwIDAgMSAzLjAxNSA1LjgxNGMxLjUzMy0zLjMyNyAyLjY5OC02LjU2NCAzLjQ3MS05LjU1OXpNMS41ODMgMjkuNjE2YzIuOTguODI4IDYuMzY2IDEuNDM4IDEwLjAxNCAxLjc3M2E3MS41NDUgNzEuNTQ1IDAgMCAxLTMuNTI4LTUuNTE4IDcxLjU0NSA3MS41NDUgMCAwIDEtMy4wMTUtNS44MTRjLTEuNTMzIDMuMzI3LTIuNjk4IDYuNTY0LTMuNDcxIDkuNTZ6IiBpZD0iYSIvPjxwYXRoIGQ9Ik0zNC42OTYgMTAuNWMtMi45OC0uODI4LTYuMzY2LTEuNDM4LTEwLjAxNC0xLjc3NGE3MS41NDUgNzEuNTQ1IDAgMCAxIDMuNTI4IDUuNTE4IDcxLjU0NSA3MS41NDUgMCAwIDEgMy4wMTUgNS44MTRjMS41MzMtMy4zMjcgMi42OTgtNi41NjQgMy40NzEtOS41NTl6TTEuNTgzIDI5LjYxNmMyLjk4LjgyOCA2LjM2NiAxLjQzOCAxMC4wMTQgMS43NzNhNzEuNTQ1IDcxLjU0NSAwIDAgMS0zLjUyOC01LjUxOCA3MS41NDUgNzEuNTQ1IDAgMCAxLTMuMDE1LTUuODE0Yy0xLjUzMyAzLjMyNy0yLjY5OCA2LjU2NC0zLjQ3MSA5LjU2eiIgaWQ9ImIiLz48cGF0aCBkPSJNMzQuNjk2IDEwLjVjLTIuOTgtLjgyOC02LjM2Ni0xLjQzOC0xMC4wMTQtMS43NzRhNzEuNTQ1IDcxLjU0NSAwIDAgMSAzLjUyOCA1LjUxOCA3MS41NDUgNzEuNTQ1IDAgMCAxIDMuMDE1IDUuODE0YzEuNTMzLTMuMzI3IDIuNjk4LTYuNTY0IDMuNDcxLTkuNTU5ek0xLjU4MyAyOS42MTZjMi45OC44MjggNi4zNjYgMS40MzggMTAuMDE0IDEuNzczYTcxLjU0NSA3MS41NDUgMCAwIDEtMy41MjgtNS41MTggNzEuNTQ1IDcxLjU0NSAwIDAgMS0zLjAxNS01LjgxNGMtMS41MzMgMy4zMjctMi42OTggNi41NjQtMy40NzEgOS41NnoiIGlkPSJjIi8+PC9kZWZzPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTQpIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik00NS42MjYgMjAuNDQxQzUzLjE4OCAyMi41NDEgNTguMTQgMjYuMDQgNTguMTQgMzBjMCAzLjk2MS00Ljk1MiA3LjQ2LTEyLjUxNCA5LjU1OS0uNzczLTIuOTk1LTEuOTM4LTYuMjMyLTMuNDctOS41NTkgMS41MzItMy4zMjcgMi42OTctNi41NjQgMy40Ny05LjU1OXpNMTIuNTEzIDM5LjU2QzQuOTUxIDM3LjQ1OSAwIDMzLjk2IDAgMzBjMC0zLjk2MSA0Ljk1MS03LjQ2IDEyLjUxMy05LjU1OS43NzQgMi45OTUgMS45MzggNi4yMzIgMy40NzEgOS41NTktMS41MzMgMy4zMjctMi42OTcgNi41NjQtMy40NyA5LjU1OXoiIGZpbGw9IiNFNkE3MzQiLz48cGF0aCBkPSJNNDUuNjI2IDM5LjU1OWMxLjk2MyA3LjU5OSAxLjQwOSAxMy42MzYtMi4wMjEgMTUuNjE2LTMuNDMgMS45OC04LjkzNi0uNTU4LTE0LjUzNS02LjA1NyAyLjIwNi0yLjE2NyA0LjQyOC00Ljc5NCA2LjU0Mi03Ljc4NiAzLjY0OC0uMzM1IDcuMDM0LS45NDYgMTAuMDE0LTEuNzczek0xMi41MTMgMjAuNDRjLTEuOTYyLTcuNTk5LTEuNDA4LTEzLjYzNiAyLjAyMi0xNS42MTYgMy40My0xLjk4IDguOTM2LjU1OCAxNC41MzUgNi4wNTctMi4yMDcgMi4xNjctNC40MjggNC43OTQtNi41NDMgNy43ODYtMy42NDguMzM1LTcuMDM0Ljk0Ni0xMC4wMTQgMS43NzN6IiBmaWxsPSIjNDVCODkyIi8+PHBhdGggZD0iTTI5LjA3IDEwLjg4MmM1LjU5OS01LjQ5OSAxMS4xMDQtOC4wMzggMTQuNTM1LTYuMDU3IDMuNDMgMS45OCAzLjk4NCA4LjAxNyAyLjAyMSAxNS42MTYtMi45OC0uODI3LTYuMzY2LTEuNDM4LTEwLjAxNC0xLjc3My0yLjExNC0yLjk5Mi00LjMzNi01LjYxOS02LjU0Mi03Ljc4NnptMCAzOC4yMzZjLTUuNiA1LjQ5OS0xMS4xMDUgOC4wMzgtMTQuNTM1IDYuMDU3LTMuNDMtMS45OC0zLjk4NC04LjAxNy0yLjAyMi0xNS42MTYgMi45OC44MjcgNi4zNjYgMS40MzggMTAuMDE0IDEuNzczIDIuMTE1IDIuOTkyIDQuMzM2IDUuNjE5IDYuNTQzIDcuNzg2eiIgZmlsbD0iI0REMUQ2NCIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjkzIDkuOTQyKSI+PHVzZSBmaWxsPSIjREQxRDY0IiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6bXVsdGlwbHkiIHhsaW5rOmhyZWY9IiNhIi8+PHVzZSBmaWxsPSIjRTZBNzM0IiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6bXVsdGlwbHkiIHhsaW5rOmhyZWY9IiNhIi8+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKC02MCAzMi4yMTUgMTUuNTYzKSI+PHVzZSBmaWxsPSIjNDVCODkyIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6bXVsdGlwbHkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsPSIjREQxRDY0IiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6bXVsdGlwbHkiIHhsaW5rOmhyZWY9IiNiIi8+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDE0Ljk5NSAzNC40OTUpIj48dXNlIGZpbGw9IiNFNkE3MzQiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTptdWx0aXBseSIgeGxpbms6aHJlZj0iI2MiLz48dXNlIGZpbGw9IiM0NUI4OTIiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTptdWx0aXBseSIgeGxpbms6aHJlZj0iI2MiLz48L2c+PGNpcmNsZSBmaWxsPSIjMDJEOEZGIiBjeD0iMjkuMDciIGN5PSIzMCIgcj0iNS44MTQiLz48L2c+PC9zdmc+);
}
const animation = anime.timeline({
  direction: "alternate",
  loop: true,
  autoplay: true
});

const transitionSpeed = 8000;
const barOpacitySpeed = 400;

animation
  .add({
    targets: "#qna path",
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: "easeInOutQuart",
    duration: 2100,
    // Credit to the anime.js logo example
    // for method of line animation.
    delay: function(el, i) {
      return i * 500;
    }
  })
  .add({
    targets: "#qna path",
    fill: "#dd1d64",
    duration: 1000,
    easing: "easeOutExpo",
    offset: "-=1000"
  })
  .add({
    targets: ".reactiflux",
    opacity: [0, 1],
    translateX: [10, 0],
    duration: 1000,
    easing: "easeOutExpo",
    offset: "-=1000"
  })
  .add({
    targets: ".overview",
    opacity: [0, 1],
    translateX: [-10, 0],
    duration: 1000,
    easing: "easeOutExpo",
    offset: "-=1000"
  })

  .add({
    targets: ".slash1",
    opacity: [{ value: [0, 1], duration: 40 }],
    width: "400px",
    duration: 700,
    easing: "easeOutExpo"
  })
  .add({
    targets: ".slash1",
    height: "400px",
    duration: 500,
    easing: "easeOutExpo"
  })
.add({
  targets: ".ctrls",
  opacity: [0,1]
})
  .add({
    targets: ".slash2",
    opacity: [{ value: [0, 1], duration: barOpacitySpeed }],
    width: "400px",
    duration: transitionSpeed,
    easing: "easeOutQuad"
  })
  .add({
    targets: ".slash2",
    height: "400px",
    duration: 500,
    easing: "easeOutExpo"
  })
  .add({
    targets: ".slash3",
    opacity: [{ value: [0, 1], duration: barOpacitySpeed }],
    width: "400px",
    duration: transitionSpeed,
    easing: "easeOutQuad"
  })
  .add({
    targets: ".slash3",
    height: "400px",
    duration: 500,
    easing: "easeOutExpo"
  })
  .add({
    targets: ".slash4",
    opacity: [{ value: [0, 1], duration: barOpacitySpeed }],
    width: "400px",
    duration: transitionSpeed,
    easing: "easeOutQuad"
  })
  .add({
    targets: ".slash4",
    height: "400px",
    duration: 500,
    easing: "easeOutExpo"
  })
  .add({
    targets: ".reactiflux-icon",
    rotate: "1turn",
    opacity: [{ value: [0, 1], duration: 100 }],
    duration: 1800,
    scale: [0, 2.5],
    easing: "easeOutQuint"
  });

const ctrls = document.querySelector(".ctrls");

ctrls.addEventListener("click", e => {
  e.preventDefault();
  if (e.target.innerHTML === "play_arrow") {
    e.target.innerHTML = "pause";
    animation.play();
  } else {
    e.target.innerHTML = "play_arrow";
    animation.pause();
  }
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js