Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <div class="container">
  <div class="svg-container i">
    <svg class="svg-frame" width="300px" height="300px" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="alphabet-i" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path id="alphabet-i-1" d="M184.3053,59.9889 C181.9473,62.8949 179.5093,65.9009 174.6623,65.9009 C169.8153,65.9009 167.3783,62.8949 165.0203,59.9889 C162.6443,57.0599 160.3993,54.2929 155.8293,54.2929 C151.2603,54.2929 149.0153,57.0599 146.6383,59.9889 C144.2823,62.8949 141.8443,65.9009 136.9983,65.9009 C132.1533,65.9009 129.7153,62.8949 127.3583,59.9889 C124.9823,57.0599 122.7373,54.2929 118.1683,54.2929 C113.6003,54.2929 111.3573,57.0599 108.9823,59.9889 C106.6263,62.8949 104.1893,65.9009 99.3453,65.9009 C94.4993,65.9009 92.0623,62.8949 89.7053,59.9889 C87.3293,57.0599 85.0853,54.2929 80.5163,54.2929 C75.9483,54.2929 73.7043,57.0599 71.3283,59.9889 C68.9723,62.8949 66.5353,65.9009 61.6903,65.9009 C56.8453,65.9009 54.4083,62.8949 52.0523,59.9889 C49.6763,57.0599 47.4323,54.2929 42.8643,54.2929 L42.8643,88.1339 L42.9183,88.1339 L42.9183,99.3209 L193.4963,99.3209 L193.4963,88.1339 L193.4963,74.7879 L193.4963,54.2929 C188.9263,54.2929 186.6813,57.0599 184.3053,59.9889" fill="#FFC803"></path>
        <path id="alphabet-i-4" d="M149.4079,177.6066 L149.4079,99.3206 L177.9499,99.3206 L177.9499,100.6936 C177.9499,129.5446 186.9759,157.5046 211.8909,177.6096 L149.4089,177.6096 C149.4089,177.6086 149.4089,177.6076 149.4079,177.6066" fill="#0A00D6"></path>
        <path id="alphabet-i-3" d="M120.8669,99.3209 L120.8669,100.6939 C120.8669,145.3679 99.2389,187.9149 30.4549,202.4509 L56.6919,245.7069 C102.6289,234.0469 132.3609,210.0579 149.4079,177.6069 L149.4079,99.3209 L120.8669,99.3209 Z" fill="#7EF3E2"></path>
        <path id="alphabet-i-5" d="M149.4088,177.6095 C162.3768,202.2935 182.6948,222.0735 211.8908,235.2635 L211.8908,177.6095 L149.4088,177.6095 Z" fill="#FE6436"></path>
        <polygon id="alphabet-i-2" fill="#F75497" points="193.496 99.321 258.434 99.321 258.434 54.293 193.496 54.293"></polygon>
        <path id="alphabet-i-6" d="M269.5451,216.8805 C269.5451,232.8005 256.6391,245.7075 240.7181,245.7075 C224.7971,245.7075 211.8911,232.8005 211.8911,216.8805 C211.8911,200.9595 224.7971,188.0535 240.7181,188.0535 C256.6391,188.0535 269.5451,200.9595 269.5451,216.8805" id="Fill-12" fill="#00277F"></path>
      </g>
    </svg>
  </div>  
</div>
              
            
!

CSS

              
                html, body {
  background-color: #292929;
  height: 100%;
  margin: 0;
}

.container {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.svg-container {
    padding: 0;
    height: 300px;
    border-radius: 8px;
    transform: scale(1.5);
}

.svg-frame {
  border-radius: 8px;
}

#alphabet-i {
    transform-origin: 50% 50%;
    border-radius: 8px;
}

#alphabet-i-5 {
    transform-origin: 50% 50%;
}

#alphabet-i-4 {
    transform-origin: 40% 60%;
}

#alphabet-i-3 {
    transform-origin: 40% 60%;
}

#alphabet-i-2 {
    transform-origin: 75% 24%;
}


#alphabet-i-6 {
    transform-origin: 80% 80%;
}

#alphabet-i-1 {
    transform-origin:40% 24%;
}
.i {
    background-color: #FDFFE1;
}
              
            
!

JS

              
                anime({
  targets: "#alphabet-i-1",
  rotate: -360,
  loop: true,
  delay: 500,
  duration: 2500
})

anime({
  targets: "#alphabet-i-2",
  rotate: 360,
  loop: true,
  delay: 500,
  duration: 2500
})

anime({
  targets: "#alphabet-i-3",
  rotate: 360,
  loop: true,
  delay: 500,
  duration: 2500
})

anime({
  targets: "#alphabet-i-4",
  rotate: -360,
  loop: true,
  delay: 500,
  duration: 2500
})

anime({
  targets: "#alphabet-i-6",
  rotate: 360,
  loop: true,
  delay: 500,
  duration: 2500
})

anime({
  targets: "#alphabet-i-5",
  rotate: 360,
  loop: true,
  delay: 500,
  duration: 2500
})

var animationI = anime.timeline({
  loop: true,
  delay: 500,
  duration: 2500
})

animationI
.add({
  targets: "#alphabet-i",
  scale: 1,
})
.add({
  targets: "#alphabet-i",
  scale: 2,
})
.add({
  targets: "#alphabet-i",
  scale: 1,
})
              
            
!
999px

Console