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

              
                <div class="container">
  <div class="svg-container f">
    <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-ff" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

        <polygon class="alphabet-f" id="Fill-49" fill="#71E4EA" points="0 25 25 25 25 0.001 0 0.001"></polygon>
        <polygon class="alphabet-f" id="Fill-50" fill="#71E4EA" points="0 50 25 50 25 25 0 25"></polygon>
        <polygon class="alphabet-f" id="Fill-51" fill="#71E4EA" points="0 75 25 75 25 50 0 50"></polygon>
        <polygon class="alphabet-f" id="Fill-52" fill="#71E4EA" points="0 100 25 100 25 75 0 75"></polygon>
        <polygon class="alphabet-f" id="Fill-53" fill="#71E4EA" points="0 124.999 25 124.999 25 100 0 100"></polygon>
        <polygon class="alphabet-f" id="Fill-54" fill="#71E4EA" points="0 150 25 150 25 125 0 125"></polygon>
        <polygon class="alphabet-f" id="Fill-55" fill="#71E4EA" points="0 175 25 175 25 150 0 150"></polygon>
        <polygon class="alphabet-f" id="Fill-56" fill="#71E4EA" points="0 200 25 200 25 175 0 175"></polygon>
        <polygon class="alphabet-f" id="Fill-57" fill="#71E4EA" points="0 224.999 25 224.999 25 200 0 200"></polygon>
        <polygon class="alphabet-f" id="Fill-58" fill="#71E4EA" points="0 250 25 250 25 225 0 225"></polygon>
        <polygon class="alphabet-f" id="Fill-59" fill="#71E4EA" points="0 275 25 275 25 250 0 250"></polygon>
        <polygon class="alphabet-f" id="Fill-60" fill="#71E4EA" points="0 300 25 300 25 275 0 275"></polygon>
        <polygon class="alphabet-f" id="Fill-61" fill="#71E4EA" points="25 25 49.999 25 49.999 0.001 25 0.001"></polygon>
        <polygon class="alphabet-f" id="Fill-62" fill="#71E4EA" points="25 50 50 50 50 25 25 25"></polygon>
        <polygon class="alphabet-f" id="Fill-63" fill="#71E4EA" points="25 75 50 75 50 50 25 50"></polygon>
        <polygon class="alphabet-f" id="Fill-64" fill="#71E4EA" points="25 100 50 100 50 75 25 75"></polygon>
        <polygon class="alphabet-f" id="Fill-65" fill="#71E4EA" points="25 125 50 125 50 100 25 100"></polygon>
        <polygon class="alphabet-f" id="Fill-66" fill="#71E4EA" points="25 150 50 150 50 125 25 125"></polygon>
        <polygon class="alphabet-f" id="Fill-67" fill="#71E4EA" points="25 175 50 175 50 150 25 150"></polygon>
        <polygon class="alphabet-f" id="Fill-68" fill="#71E4EA" points="25 200 50 200 50 175 25 175"></polygon>
        <polygon class="alphabet-f" id="Fill-69" fill="#71E4EA" points="25 225 50 225 50 200 25 200"></polygon>
        <polygon class="alphabet-f" id="Fill-70" fill="#71E4EA" points="25 250 50 250 50 225 25 225"></polygon>
        <polygon class="alphabet-f" id="Fill-71" fill="#71E4EA" points="25 275 50 275 50 250 25 250"></polygon>
        <polygon class="alphabet-f" id="Fill-72" fill="#71E4EA" points="25 300 49.999 300 49.999 275 25 275"></polygon>
        <polygon class="alphabet-f" id="Fill-73" fill="#71E4EA" points="49.999 25 74.999 25 74.999 0.001 49.999 0.001"></polygon>
        <polygon class="alphabet-f" id="Fill-74" fill="#71E4EA" points="50 50 75 50 75 25 50 25"></polygon>
        <polygon class="alphabet-f" id="Fill-75" fill="#71E4EA" points="50 275 75 275 75 250 50 250"></polygon>
        <polygon class="alphabet-f" id="Fill-76" fill="#71E4EA" points="49.999 300 74.999 300 74.999 275 49.999 275"></polygon>
        <polygon class="alphabet-f" id="Fill-77" fill="#71E4EA" points="75 25 100 25 100 0.001 75 0.001"></polygon>
        <polygon class="alphabet-f" id="Fill-78" fill="#71E4EA" points="75 50 100 50 100 25 75 25"></polygon>
        <polygon class="alphabet-f" id="Fill-79" fill="#71E4EA" points="75 275 100 275 100 250 75 250"></polygon>
        <polygon class="alphabet-f" id="Fill-80" fill="#71E4EA" points="75 300 100 300 100 275 75 275"></polygon>
        <polygon class="alphabet-f" id="Fill-81" fill="#71E4EA" points="100 25 125 25 125 0.001 100 0.001"></polygon>
        <polygon class="alphabet-f" id="Fill-82" fill="#71E4EA" points="100 50 125 50 125 25 100 25"></polygon>
        <polygon class="alphabet-f" id="Fill-83" fill="#71E4EA" points="100 75 125 75 125 50 100 50"></polygon>
        <polygon class="alphabet-f" id="Fill-84" fill="#71E4EA" points="100 100 125 100 125 75 100 75"></polygon>
        <polygon class="alphabet-f" id="Fill-85" fill="#71E4EA" points="100 175 125 175 125 150 100 150"></polygon>
        <polygon class="alphabet-f" id="Fill-86" fill="#71E4EA" points="100 200 125 200 125 175 100 175"></polygon>
        <polygon class="alphabet-f" id="Fill-87" fill="#71E4EA" points="100 275 125 275 125 250 100 250"></polygon>
        <polygon class="alphabet-f" id="Fill-88" fill="#71E4EA" points="100 300 125 300 125 275 100 275"></polygon>
        <polygon class="alphabet-f" id="Fill-89" fill="#71E4EA" points="125 25 149.999 25 149.999 0.001 125 0.001"></polygon>
        <polygon class="alphabet-f" id="Fill-90" fill="#71E4EA" points="125 50 150 50 150 25 125 25"></polygon>
        <polygon class="alphabet-f" id="Fill-91" fill="#71E4EA" points="125 75 150 75 150 50 125 50"></polygon>
        <polygon class="alphabet-f" id="Fill-92" fill="#71E4EA" points="125 100 150 100 150 75 125 75"></polygon>
        <polygon class="alphabet-f" id="Fill-93" fill="#71E4EA" points="125 175 150 175 150 150 125 150"></polygon>
        <polygon class="alphabet-f" id="Fill-94" fill="#71E4EA" points="125 200 150 200 150 175 125 175"></polygon>
        <polygon class="alphabet-f" id="Fill-95" fill="#71E4EA" points="125 275 150 275 150 250 125 250"></polygon>
        <polygon class="alphabet-f" id="Fill-96" fill="#71E4EA" points="125 300 149.999 300 149.999 275 125 275"></polygon>
        <polygon class="alphabet-f" id="Fill-97" fill="#71E4EA" points="149.999 25 174.999 25 174.999 0.001 149.999 0.001"></polygon>
        <polygon class="alphabet-f" id="Fill-98" fill="#71E4EA" points="150 50 175 50 175 25 150 25"></polygon>
        <polygon class="alphabet-f" id="Fill-99" fill="#71E4EA" points="150 75 175 75 175 50 150 50"></polygon>
        <polygon class="alphabet-f" id="Fill-100" fill="#71E4EA" points="150 100 175 100 175 75 150 75"></polygon>
        <polygon class="alphabet-f" id="Fill-101" fill="#71E4EA" points="150 175 175 175 175 150 150 150"></polygon>
        <polygon class="alphabet-f" id="Fill-102" fill="#71E4EA" points="150 200 175 200 175 175 150 175"></polygon>
        <polygon class="alphabet-f" id="Fill-103" fill="#71E4EA" points="150 275 175 275 175 250 150 250"></polygon>
        <polygon class="alphabet-f" id="Fill-104" fill="#71E4EA" points="149.999 300 174.999 300 174.999 275 149.999 275"></polygon>
        <polygon class="alphabet-f" id="Fill-105" fill="#71E4EA" points="175 25 200 25 200 0.001 175 0.001"></polygon>
        <polygon class="alphabet-f" id="Fill-106" fill="#71E4EA" points="175 50 200 50 200 25 175 25"></polygon>
        <polygon class="alphabet-f" id="Fill-107" fill="#71E4EA" points="175 75 200 75 200 50 175 50"></polygon>
        <polygon class="alphabet-f" id="Fill-108" fill="#71E4EA" points="175 100 200 100 200 75 175 75"></polygon>
        <polygon class="alphabet-f" id="Fill-109" fill="#71E4EA" points="175 175 200 175 200 150 175 150"></polygon>
        <polygon class="alphabet-f" id="Fill-110" fill="#71E4EA" points="175 200 200 200 200 175 175 175"></polygon>
        <polygon class="alphabet-f" id="Fill-111" fill="#71E4EA" points="175 275 200 275 200 250 175 250"></polygon>
        <polygon class="alphabet-f" id="Fill-112" fill="#71E4EA" points="175 300 200 300 200 275 175 275"></polygon>
        <polygon class="alphabet-f" id="Fill-113" fill="#71E4EA" points="200 25 225 25 225 0.001 200 0.001"></polygon>
        <polygon class="alphabet-f" id="Fill-114" fill="#71E4EA" points="200 50 225 50 225 25 200 25"></polygon>
        <polygon class="alphabet-f" id="Fill-115" fill="#71E4EA" points="200 275 225 275 225 250 200 250"></polygon>
        <polygon class="alphabet-f" id="Fill-116" fill="#71E4EA" points="200 300 225 300 225 275 200 275"></polygon>
        <polygon class="alphabet-f" id="Fill-117" fill="#71E4EA" points="225 25 250 25 250 0.001 225 0.001"></polygon>
        <polygon class="alphabet-f" id="Fill-118" fill="#71E4EA" points="225 50 250 50 250 25 225 25"></polygon>
        <polygon class="alphabet-f" id="Fill-119" fill="#71E4EA" points="225 275 250 275 250 250 225 250"></polygon>
        <polygon class="alphabet-f" id="Fill-120" fill="#71E4EA" points="225 300 250 300 250 275 225 275"></polygon>
        <polygon class="alphabet-f" id="Fill-121" fill="#71E4EA" points="250 25 274.999 25 274.999 0.001 250 0.001"></polygon>
        <polygon class="alphabet-f" id="Fill-122" fill="#71E4EA" points="250 50 275 50 275 25 250 25"></polygon>
        <polygon class="alphabet-f" id="Fill-123" fill="#71E4EA" points="250 75 275 75 275 50 250 50"></polygon>
        <polygon class="alphabet-f" id="Fill-124" fill="#71E4EA" points="250 100 275 100 275 75 250 75"></polygon>
        <polygon class="alphabet-f" id="Fill-125" fill="#71E4EA" points="250 125 275 125 275 100 250 100"></polygon>
        <polygon class="alphabet-f" id="Fill-126" fill="#71E4EA" points="250 150 275 150 275 125 250 125"></polygon>
        <polygon class="alphabet-f" id="Fill-127" fill="#71E4EA" points="250 175 275 175 275 150 250 150"></polygon>
        <polygon class="alphabet-f" id="Fill-128" fill="#71E4EA" points="250 200 275 200 275 175 250 175"></polygon>
        <polygon class="alphabet-f" id="Fill-129" fill="#71E4EA" points="250 225 275 225 275 200 250 200"></polygon>
        <polygon class="alphabet-f" id="Fill-130" fill="#71E4EA" points="250 250 275 250 275 225 250 225"></polygon>
        <polygon class="alphabet-f" id="Fill-131" fill="#71E4EA" points="250 275 275 275 275 250 250 250"></polygon>
        <polygon class="alphabet-f" id="Fill-132" fill="#71E4EA" points="250 300 274.999 300 274.999 275 250 275"></polygon>
        <polygon class="alphabet-f" id="Fill-133" fill="#71E4EA" points="274.999 25 299.999 25 299.999 0.001 274.999 0.001"></polygon>
        <polygon class="alphabet-f" id="Fill-134" fill="#71E4EA" points="274.999 50 299.999 50 299.999 25 274.999 25"></polygon>
        <polygon class="alphabet-f" id="Fill-135" fill="#71E4EA" points="274.999 75 299.999 75 299.999 50 274.999 50"></polygon>
        <polygon class="alphabet-f" id="Fill-136" fill="#71E4EA" points="274.999 100 299.999 100 299.999 75 274.999 75"></polygon>
        <polygon class="alphabet-f" id="Fill-137" fill="#71E4EA" points="274.999 124.999 299.999 124.999 299.999 100 274.999 100"></polygon>
        <polygon class="alphabet-f" id="Fill-138" fill="#71E4EA" points="274.999 150 299.999 150 299.999 125 274.999 125"></polygon>
        <polygon class="alphabet-f" id="Fill-139" fill="#71E4EA" points="274.999 175 299.999 175 299.999 150 274.999 150"></polygon>
        <polygon class="alphabet-f" id="Fill-140" fill="#71E4EA" points="274.999 200 299.999 200 299.999 175 274.999 175"></polygon>
        <polygon class="alphabet-f" id="Fill-141" fill="#71E4EA" points="274.999 224.999 299.999 224.999 299.999 200 274.999 200"></polygon>
        <polygon class="alphabet-f" id="Fill-142" fill="#71E4EA" points="274.999 250 299.999 250 299.999 225 274.999 225"></polygon>
        <polygon class="alphabet-f" id="Fill-143" fill="#71E4EA" points="274.999 275 299.999 275 299.999 250 274.999 250"></polygon>
        <polygon class="alphabet-f" id="Fill-144" fill="#71E4EA" points="274.999 300 299.999 300 299.999 275 274.999 275"></polygon>

        <polygon class="alphabet-fc" id="Fill-1" fill="#FF553E" points="50 75 75 75 75 50 50 50"></polygon>
        <polygon class="alphabet-fc" id="Fill-2" fill="#FF553E" points="50 100 75 100 75 75 50 75"></polygon>
        <polygon class="alphabet-fc" id="Fill-3" fill="#FF553E" points="50 125 75 125 75 100 50 100"></polygon>
        <polygon class="alphabet-fc" id="Fill-4" fill="#FF553E" points="50 150 75 150 75 125 50 125"></polygon>
        <polygon class="alphabet-fc" id="Fill-5" fill="#FF553E" points="50 175 75 175 75 150 50 150"></polygon>
        <polygon class="alphabet-fc" id="Fill-6" fill="#FF553E" points="50 200 75 200 75 175 50 175"></polygon>
        <polygon class="alphabet-fc" id="Fill-7" fill="#FF553E" points="50 225 75 225 75 200 50 200"></polygon>
        <polygon class="alphabet-fc" id="Fill-8" fill="#FF553E" points="50 250 75 250 75 225 50 225"></polygon>
        <polygon class="alphabet-fc" id="Fill-9" fill="#FF553E" points="75 75 100 75 100 50 75 50"></polygon>
        <polygon class="alphabet-fc" id="Fill-10" fill="#FF553E" points="75 100 100 100 100 75 75 75"></polygon>
        <polygon class="alphabet-fc" id="Fill-11" fill="#FF553E" points="75 125 100 125 100 100 75 100"></polygon>
        <polygon class="alphabet-fc" id="Fill-12" fill="#FF553E" points="75 150 100 150 100 125 75 125"></polygon>
        <polygon class="alphabet-fc" id="Fill-13" fill="#FF553E" points="75 175 100 175 100 150 75 150"></polygon>
        <polygon class="alphabet-fc" id="Fill-14" fill="#FF553E" points="75 200 100 200 100 175 75 175"></polygon>
        <polygon class="alphabet-fc" id="Fill-15" fill="#FF553E" points="75 225 100 225 100 200 75 200"></polygon>
        <polygon class="alphabet-fc" id="Fill-16" fill="#FF553E" points="75 250 100 250 100 225 75 225"></polygon>
        <polygon class="alphabet-fc" id="Fill-17" fill="#FF553E" points="100 125 125 125 125 100 100 100"></polygon>
        <polygon class="alphabet-fc" id="Fill-18" fill="#FF553E" points="100 150 125 150 125 125 100 125"></polygon>
        <polygon class="alphabet-fc" id="Fill-19" fill="#FF553E" points="100 225 125 225 125 200 100 200"></polygon>
        <polygon class="alphabet-fc" id="Fill-20" fill="#FF553E" points="100 250 125 250 125 225 100 225"></polygon>
        <polygon class="alphabet-fc" id="Fill-21" fill="#FF553E" points="125 125 150 125 150 100 125 100"></polygon>
        <polygon class="alphabet-fc" id="Fill-22" fill="#FF553E" points="125 150 150 150 150 125 125 125"></polygon>
        <polygon class="alphabet-fc" id="Fill-23" fill="#FF553E" points="125 225 150 225 150 200 125 200"></polygon>
        <polygon class="alphabet-fc" id="Fill-24" fill="#FF553E" points="125 250 150 250 150 225 125 225"></polygon>
        <polygon class="alphabet-fc" id="Fill-25" fill="#FF553E" points="150 125 175 125 175 100 150 100"></polygon>
        <polygon class="alphabet-fc" id="Fill-26" fill="#FF553E" points="150 150 175 150 175 125 150 125"></polygon>
        <polygon class="alphabet-fc" id="Fill-27" fill="#FF553E" points="150 225 175 225 175 200 150 200"></polygon>
        <polygon class="alphabet-fc" id="Fill-28" fill="#FF553E" points="150 250 175 250 175 225 150 225"></polygon>
        <polygon class="alphabet-fc" id="Fill-29" fill="#FF553E" points="175 125 200 125 200 100 175 100"></polygon>
        <polygon class="alphabet-fc" id="Fill-30" fill="#FF553E" points="175 150 200 150 200 125 175 125"></polygon>
        <polygon class="alphabet-fc" id="Fill-31" fill="#FF553E" points="175 225 200 225 200 200 175 200"></polygon>
        <polygon class="alphabet-fc" id="Fill-32" fill="#FF553E" points="175 250 200 250 200 225 175 225"></polygon>
        <polygon class="alphabet-fc" id="Fill-33" fill="#FF553E" points="200 75 225 75 225 50 200 50"></polygon>
        <polygon class="alphabet-fc" id="Fill-34" fill="#FF553E" points="200 100 225 100 225 75 200 75"></polygon>
        <polygon class="alphabet-fc" id="Fill-35" fill="#FF553E" points="200 125 225 125 225 100 200 100"></polygon>
        <polygon class="alphabet-fc" id="Fill-36" fill="#FF553E" points="200 150 225 150 225 125 200 125"></polygon>
        <polygon class="alphabet-fc" id="Fill-37" fill="#FF553E" points="200 175 225 175 225 150 200 150"></polygon>
        <polygon class="alphabet-fc" id="Fill-38" fill="#FF553E" points="200 200 225 200 225 175 200 175"></polygon>
        <polygon class="alphabet-fc" id="Fill-39" fill="#FF553E" points="200 225 225 225 225 200 200 200"></polygon>
        <polygon class="alphabet-fc" id="Fill-40" fill="#FF553E" points="200 250 225 250 225 225 200 225"></polygon>
        <polygon class="alphabet-fc" id="Fill-41" fill="#FF553E" points="225 75 250 75 250 50 225 50"></polygon>
        <polygon class="alphabet-fc" id="Fill-42" fill="#FF553E" points="225 100 250 100 250 75 225 75"></polygon>
        <polygon class="alphabet-fc" id="Fill-43" fill="#FF553E" points="225 125 250 125 250 100 225 100"></polygon>
        <polygon class="alphabet-fc" id="Fill-44" fill="#FF553E" points="225 150 250 150 250 125 225 125"></polygon>
        <polygon class="alphabet-fc" id="Fill-45" fill="#FF553E" points="225 175 250 175 250 150 225 150"></polygon>
        <polygon class="alphabet-fc" id="Fill-46" fill="#FF553E" points="225 200 250 200 250 175 225 175"></polygon>
        <polygon class="alphabet-fc" id="Fill-47" fill="#FF553E" points="225 225 250 225 250 200 225 200"></polygon>
        <polygon class="alphabet-fc" id="Fill-48" fill="#FF553E" points="225 250 250 250 250 225 225 225"></polygon>
      </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-f {
    transform-origin: 50% 50%;
}

.alphabet-fc {
    transform-origin: 50% 50%;
}

.f{
    background-color: #14037C;
}
              
            
!

JS

              
                anime({
  targets: '.alphabet-f',
  scale: [
    {value: 0, easing: 'easeInOutExpo', duration: 1500},
    {value: 1, easing: 'easeOutCubic', duration: 2400}
  ],
  delay: anime.stagger(200, {grid: [10, 10], from: 'center'}),
  loop: true,
});

anime({
  targets: '.alphabet-fc',
  // borderRadius: ['0%', '50%'],
  scale: [
    {value: 0, easing: 'easeInOutExpo', duration: 1500},
    {value: 1, easing: 'spring(1, 100, 10, 0)', duration: 2400}
  ],
  delay: anime.stagger(200, {grid: [6, 8], from: 'center'}),
  loop: true,
});
              
            
!
999px

Console