V173's GOI Logo Animations Ver. 1

Link to article: V173's GOI Logo Animations Ver. 1.

Module Styles

•  .anchor{
       position: -webkit-sticky;
       position: sticky;
       top: 0;
   
       z-index: 5;
  }
   .authorbox,
   .sidebox,
   .sidecontainer{
       position: absolute;
       width: calc((100vw - 870px) / 2);
       max-height: calc(100vh - 15rem);
       padding: .33rem 1.6rem;
   
       box-sizing: border-box;
   
       z-index: 5;
  }
   .authorbox,
   .sidebox{
       font-size: 90%;
  }
   .authorbox{
       right: 103.5%;
       max-width: calc((100vw - 921.2px) / 2) !important;
       margin-right: .53rem;
       padding-right: 1rem;
  }
   .sidebox,
   .sidecontainer{
       left: 103.5%;
  }
   @media (max-width: 1280px){
       .authorbox,
       .sidebox{
            display: none;
      }
  }
   .authorbox .wiki-content-table,
   .sidebox .wiki-content-table{
       max-width: 20em !important;
  }
   .sidebox img{
       width: 7.5em;
  }
   .authorbox tr th,
   .authorbox tr td,
   .sidebox tr th,
   .sidebox tr td{
       padding: .27rem !important;
  }
   .flavorbox{
       width: 75%;
       margin: auto auto .33rem;
       padding: 0 1rem;
   
       color: var(--textColorAlt);
       background: var(--fgColor);
       border: solid transparent;
  }
  
    .flex-container {
  
      display: flex;
      
      justify-content: center;  
      flex-flow: wrap;  
      flex-wrap: wrap; 
      align-content: center;
  
      background-color: #ffffff;
      height: 100%;
  
    }
  
    .flex-container > div{
  background: #ffffff;
    }

Inline Styles

• border:1px solid #000000; border-radius:3px; background-color:#FFFFFF;

• hidden

• border:1px solid #000000; border-radius:3px; background-color:#FFFFFF;

• width:100%;height:100%;margin-left:auto;margin-right:auto;

• width:100%;height:100%;margin-left:auto;margin-right:auto;

• width:100%;height:100%;margin-left:auto;margin-right:auto;

Includes

• :scp-wiki:theme:basalt [info]
• :scp-wiki:info:start [info]
• :scp-wiki:component:ratio-bar [info]
• :scp-wiki:info:end [info]
• :scp-wiki:component:license-box [info]
• :scp-wiki:component:license-box-end [info]

CSS Classes

• sidebox

• authorbox

• flex-container

• item1

• item2

• item3

Page Source

[[include :scp-wiki:theme:basalt]]

[[module CSS]]
 .anchor{
     position: -webkit-sticky;
     position: sticky;
     top: 0;
 
     z-index: 5;
}
 .authorbox,
 .sidebox,
 .sidecontainer{
     position: absolute;
     width: calc((100vw - 870px) / 2);
     max-height: calc(100vh - 15rem);
     padding: .33rem 1.6rem;
 
     box-sizing: border-box;
 
     z-index: 5;
}
 .authorbox,
 .sidebox{
     font-size: 90%;
}
 .authorbox{
     right: 103.5%;
     max-width: calc((100vw - 921.2px) / 2) !important;
     margin-right: .53rem;
     padding-right: 1rem;
}
 .sidebox,
 .sidecontainer{
     left: 103.5%;
}
 @media (max-width: 1280px){
     .authorbox,
     .sidebox{
          display: none;
    }
}
 .authorbox .wiki-content-table,
 .sidebox .wiki-content-table{
     max-width: 20em !important;
}
 .sidebox img{
     width: 7.5em;
}
 .authorbox tr th,
 .authorbox tr td,
 .sidebox tr th,
 .sidebox tr td{
     padding: .27rem !important;
}
 .flavorbox{
     width: 75%;
     margin: auto auto .33rem;
     padding: 0 1rem;
 
     color: var(--textColorAlt);
     background: var(--fgColor);
     border: solid transparent;
}

  .flex-container {

    display: flex;
    
    justify-content: center;  
    flex-flow: wrap;  
    flex-wrap: wrap; 
    align-content: center;

    background-color: #ffffff;
    height: 100%;

  }

  .flex-container > div{
background: #ffffff;
  }
[[/module]]

[[include :scp-wiki:info:start]]
[[div class="sidebox"]]
[[div style="border:1px solid #000000; border-radius:3px; background-color:#FFFFFF;"]]
[[size 50%]]@@ @@[[/size]]
[[include :scp-wiki:component:ratio-bar pie=--]]
[[size 5%]]@@ @@[[/size]]
[[/div]]
[[/div]]
[[div class="authorbox" style="hidden"]]
[[div style="border:1px solid #000000; border-radius:3px; background-color:#FFFFFF;"]]
[[size 50%]]@@ @@[[/size]]
[[=]]
+++ Critique Credit
-----
My **brother**, **my wife**, and my **music-performing friend**.

And everyone in the discussion threads!
[[/=]]
[[size 5%]]@@ @@[[/size]]
[[/div]]
[[/div]]
**[https://scp-wiki.wikidot.com/art:v173-GOI-logo-animations-v1 V173's GOI Logo Animations Ver. 1]**
**Author:** [[*user V173]]
//I'm a Christian who makes stuff and loves his wife.//
-----
I made this over the course of this week, and honestly, I think it turned out well. Particularly, the SCP Foundation logo. The CI logo doesn't have much to work with, so even though I wish I could've done better, I don't know what "better" would look like for that.

I made the SCP Foundation logo animation by first making an animation for the arrows moving in and out without spinning. I then used it as the back layer under the two rings for the final animation.

For the GOC logo, I just removed the map from the star and text. I used the United Nations map to account for what's covered by the star. I gave the star a little white outline so that it could maintain that negative space between other elements.

The CI logo is self-explanatory, as it's just a few circles. It's strangely uneven, too, so I used a circle-shaped image mask to reduce how noticeable it is while it's spinning.
[[include :scp-wiki:info:end]]

[[div class="flex-container"]]
[[div class="item1"]]
[[table]]
[[row]]
[[cell]]
[[html]]
<video style="width:100%;height:100%;margin-left:auto;margin-right:auto;" controls>
<source src="https://scp-sandbox-3.wdfiles.com/local--files/music-thing/SCP%20Logo%20Spinning%20Animation%20%28V173%29%20MP4" type="video/mp4">
</video>
[[/html]]
[[/cell]]
[[/row]]
[[row]]
[[hcell]] SCP Foundation [[/hcell]]
[[/row]]
[[/table]]
[[/div]]

[[div class="item2"]]
[[table]]
[[row]]
[[cell]]
[[html]]
<video style="width:100%;height:100%;margin-left:auto;margin-right:auto;" controls>
<source src="http://scp-sandbox-3.wikidot.com/local--files/music-thing/GOC%20Logo%20Spinning%20Animation%20%28V173%29%20MP4" type="video/mp4">
</video>
[[/html]]
[[/cell]]
[[/row]]
[[row]]
[[hcell]] Global Occult Coalition [[/hcell]]
[[/row]]
[[/table]]
[[/div]]

[[div class="item3"]]
[[table]]
[[row]]
[[cell]]
[[html]]
<video style="width:100%;height:100%;margin-left:auto;margin-right:auto;" controls>
<source src="https://scp-sandbox-3.wdfiles.com/local--files/music-thing/CI%20Logo%20Spinning%20Animation%20%28V173%29%20MP4" type="video/mp4">
</video>
[[/html]]
[[/cell]]
[[/row]]
[[row]]
[[hcell]] Chaos Insurgency [[/hcell]]
[[/row]]
[[/table]]
[[/div]]
[[/div]]

[[include :scp-wiki:component:license-box
|author=V173]]
> **Filename:** SCP Logo Spinning Animation (V173) MP4
> **Author:** V173
> **License:** CC BY-SA 3.0
> **Source Link:** https://scp-sandbox-3.wikidot.com/music-thing

> **Filename:** GOC Logo Spinning Animation (V173) MP4
> **Author:** V173
> **License:** CC BY-SA 3.0
> **Source Link:** https://scp-sandbox-3.wikidot.com/music-thing

> **Filename:** CI Logo Spinning Animation (V173) MP4
> **Author:** V173
> **License:** CC BY-SA 3.0
> **Source Link:** https://scp-sandbox-3.wikidot.com/music-thing
[[include :scp-wiki:component:license-box-end]]