Adding codepen to website

Site URL: https://codepen.io/scallemang/pen/GJBbZQ

Hello,

I am trying to add this codeopen to my website but it is not showing up on my page when I copy the code, I am not sure what I am doing wrong. https://codepen.io/scallemang/pen/GJBbZQ 

2 hours ago, Lillynbhbu said:

Site URL: https://codepen.io/scallemang/pen/GJBbZQ

Hello,

I am trying to add this codeopen to my website but it is not showing up on my page when I copy the code, I am not sure what I am doing wrong. https://codepen.io/scallemang/pen/GJBbZQ 

I convert the sccs to css and made some changes

<div class="text-anim">
  <svg viewBox="0 0 840 600">
    <symbol id="s-text">
      <text text-anchor="middle"
            x="50%"
            y="60%"
            class="text--line"
            >
        SCA
      </text>
    </symbol>

    <g class="g-ants">
      <use xlink:href="#s-text"
        class="text-copy"></use>     
      <use xlink:href="#s-text"
        class="text-copy"></use>     
      <use xlink:href="#s-text"
        class="text-copy"></use>     
      <use xlink:href="#s-text"
        class="text-copy"></use>     
      <use xlink:href="#s-text"
        class="text-copy"></use>     
    </g>


  </svg>
</div>

<style>
  @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
.text-anim {
  height: 100%;
}

.text-anim {
  background: white;
  font: 20em/1 'Montserrat', serif;
}

.text-anim svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: 6% 29%;
  stroke-width: 5;
  stroke-dashoffset: 0%;
  -webkit-animation: stroke-offset 5s infinite linear;
          animation: stroke-offset 5s infinite linear;
}
.text-copy:nth-child(1) {
  stroke: #4CAF50;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.text-copy:nth-child(2) {
  stroke: #F44336;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
.text-copy:nth-child(3) {
  stroke: #03A9F4;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.text-copy:nth-child(4) {
  stroke: #FF9800;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}
.text-copy:nth-child(5) {
  stroke: #9C27B0;
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}

@-webkit-keyframes stroke-offset {
  100% {
    stroke-dashoffset: -35%;
  }
}

@keyframes stroke-offset {
  100% {
    stroke-dashoffset: -35%;
  }
}

</style>

Hello, how can I add https://codepen.io/hollyos/pen/QNRXYK and https://codepen.io/rileyjshaw/pen/bEEVra into my website? I have been trying to follow, but nothing changed!