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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                .project
  .word-x
    .word
      -var s = 30
        - for (var i = 0; i < s; i++)
          .s
            <svg width="924" height="182" viewBox="0 0 924 182" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path class="p" d="M255.321 94.1908L264.176 85.3342H246.039V63.8022H236.461V131.792C236.461 141.504 242.049 149.355 253.226 149.355H260.011V141.106H254.955C248.834 141.106 246.039 137.512 246.039 131.525V94.1908H255.321ZM751.317 128.817V54.5622H734.301V129.865C734.301 139.551 740.191 149.368 754.196 149.368H763.881V134.969H757.337C753.018 134.969 751.317 132.875 751.317 128.817V128.817ZM905.585 81.1725L894.588 123.321L880.583 81.1725H868.15L854.273 123.321L843.28 81.1725H825.215L846.158 149.368H860.163L874.43 106.566L888.699 149.368H902.704L923.516 81.1725H905.585ZM804.251 131.828C802.288 133.791 799.669 134.839 796.266 134.839C792.862 134.839 790.375 133.791 788.412 131.828C784.877 128.295 784.485 122.273 784.485 115.205C784.485 108.136 784.877 102.245 788.412 98.7129C790.375 96.7493 792.862 95.702 796.266 95.702C799.669 95.702 802.288 96.7493 804.251 98.7129C807.784 102.245 808.178 108.136 808.178 115.205C808.178 122.273 807.784 128.295 804.251 131.828V131.828ZM796.266 80.3873C786.186 80.3873 779.381 84.3132 775.193 88.7639C769.04 95.1781 767.469 102.902 767.469 115.205C767.469 127.639 769.04 135.362 775.193 141.777C779.381 146.227 786.186 150.153 796.266 150.153C806.344 150.153 813.282 146.227 817.47 141.777C823.623 135.362 825.194 127.639 825.194 115.205C825.194 102.902 823.623 95.1781 817.47 88.7639C813.282 84.3132 806.344 80.3873 796.266 80.3873ZM696.627 74.0637V149.298H713.645V95.5302H726.21V82.5726H713.645V75.1111C713.645 71.1844 715.607 68.9595 719.664 68.9595H726.21V54.5622H716.523C702.648 54.5622 696.627 64.3784 696.627 74.0637V74.0637ZM658.103 87.7165V81.1725H641.48V149.368H658.495V108.268C658.495 99.6286 664.256 95.702 669.492 95.702C673.68 95.702 675.851 97.0942 678.47 99.7115L691.35 86.8008C686.638 82.0882 681.925 80.3873 675.249 80.3873C667.92 80.3873 661.375 83.79 658.103 87.7165V87.7165ZM590.333 108.921C590.462 105.91 590.856 104.079 591.903 101.592C593.735 97.5334 597.532 94.5243 603.291 94.5243C609.05 94.5243 612.846 97.5334 614.678 101.592C615.725 104.079 616.118 105.91 616.25 108.921H590.333ZM603.291 80.3873C585.62 80.3873 573.579 92.9524 573.579 115.205C573.579 142.824 589.022 150.153 605.123 150.153C617.427 150.153 624.102 146.357 631.04 139.419L620.7 129.341C616.379 133.661 612.715 135.754 605.253 135.754C595.698 135.754 590.333 129.341 590.333 120.572H633.004V112.98C633.004 94.2624 622.269 80.3873 603.291 80.3873V80.3873ZM556.411 81.1725L542.667 123.321L528.792 81.1725H510.86L535.991 149.368H549.343L574.343 81.1725H556.411ZM490.157 131.828C488.194 133.791 485.575 134.839 482.172 134.839C478.77 134.839 476.282 133.791 474.318 131.828C470.783 128.295 470.391 122.273 470.391 115.205C470.391 108.136 470.783 102.245 474.318 98.7129C476.282 96.7493 478.77 95.702 482.172 95.702C485.575 95.702 488.194 96.7493 490.157 98.7129C493.69 102.245 494.084 108.136 494.084 115.205C494.084 122.273 493.69 128.295 490.157 131.828V131.828ZM482.172 80.3873C472.094 80.3873 465.287 84.3132 461.099 88.7639C454.948 95.1781 453.375 102.902 453.375 115.205C453.375 127.639 454.948 135.362 461.099 141.777C465.287 146.227 472.094 150.153 482.172 150.153C492.251 150.153 499.188 146.227 503.376 141.777C509.529 135.362 511.1 127.639 511.1 115.205C511.1 102.902 509.529 95.1781 503.376 88.7639C499.188 84.3132 492.251 80.3873 482.172 80.3873ZM437.164 83.796H425.222L395.539 112.693L395.585 54.6205H386.005V149.355H395.585L395.539 125.463L407.16 113.801L429.116 149.355H440.956L413.796 107.165L437.164 83.796ZM355.116 91.6107C361.369 91.6107 365.229 93.4722 370.151 98.9268C370.151 98.9268 376.565 92.6934 376.511 92.6369C369.796 85.4518 364.093 83.0947 355.116 83.0947C338.618 83.0947 326.111 94.2707 326.111 116.625C326.111 138.975 338.618 150.153 355.116 150.153C364.164 150.153 369.885 147.757 376.67 140.441L370.151 134.188C365.229 139.642 361.369 141.638 355.116 141.638C348.73 141.638 343.408 139.11 339.948 134.188C336.887 129.93 335.69 124.873 335.69 116.625C335.69 108.375 336.887 103.319 339.948 99.0608C343.408 94.1367 348.73 91.6107 355.116 91.6107V91.6107ZM308.017 126.202C308.017 131.659 306.951 135.385 304.689 137.512C300.564 141.504 295.642 141.904 290.053 141.904C279.675 141.904 275.019 138.312 275.019 130.726C275.019 123.144 279.809 119.152 289.655 119.152H308.017V126.202ZM291.385 83.0947C280.883 83.0947 274.267 85.1665 268.469 92.506C268.389 92.6057 274.753 98.7945 274.753 98.7945C278.612 93.3401 282.87 91.3439 291.252 91.3439C303.227 91.3439 308.017 96.1347 308.017 105.713V111.966H288.324C273.688 111.966 265.705 119.419 265.705 130.861C265.705 136.049 267.436 140.972 270.627 144.166C274.753 148.424 280.075 150.153 289.123 150.153C297.904 150.153 302.693 148.424 308.017 143.101V149.355H317.595V104.914C317.595 90.6776 308.947 83.0947 291.385 83.0947V83.0947ZM209.464 112.498L198.952 111.568C190.704 110.903 187.51 107.576 187.51 101.988C187.51 95.3354 192.565 91.2106 202.146 91.2106C208.932 91.2106 214.92 92.8077 219.574 96.3983L225.83 90.1452C219.974 85.3569 211.593 83.0947 202.279 83.0947C188.307 83.0947 178.197 90.2792 178.197 102.254C178.197 113.031 184.982 118.752 197.755 119.817L208.533 120.748C216.116 121.415 219.444 124.607 219.444 130.328C219.444 138.045 212.791 141.904 202.013 141.904C193.897 141.904 186.844 139.775 181.655 134.32L175.269 140.707C182.454 147.625 191.102 150.153 202.146 150.153C217.979 150.153 228.756 142.835 228.756 130.196C228.756 117.953 220.906 113.564 209.464 112.498"/>
              <path d="M129.781 165.477V116.945H145.958V181.656H0.461548V116.945H16.6379V165.477H129.781" fill="#BCBBBC"/>
              <path d="M32.8323 149.298H113.714V133.122H32.8323V149.298ZM105.323 0.349082L92.3429 10.0028L140.614 74.9019L153.594 65.248L105.323 0.349082ZM65.2014 38.6106L127.352 90.3718L137.704 77.9411L75.5537 26.1802L65.2014 38.6106ZM44.9115 74.581L118.232 108.728L125.062 94.0641L51.7409 59.917L44.9115 74.581ZM34.4385 112.481L113.592 129.117L116.919 113.286L37.7655 96.6501L34.4385 112.481" fill="#F48023"/>

              
            
!

CSS

              
                * {
  box-sizing: border-box;
}

html,
body,
.project{
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

$word-w: 500;
$word-h: 500;
$word-s: 30;
$word-x: 50%;
$word-color: #000000;
$word-deg: 360deg;
$word-d: 1;
$word-dur: 25s;


$wing-deg: 360;

.word-x {
  position:absolute;
  top:50%;
  left:50%;
  margin-top: $word-h/2 * -1px;
  margin-left: $word-w/2 * -1px;
  height: $word-h * 1px;
  width: $word-w * 1px;  
  
  transform-style:preserve-3d;
  backface-visibility:visible;
  transform-origin: 50% 50%;
  
  transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg);
  
  animation: word-rotate $word-dur linear infinite;
  
  
  .word {
    position: absolute;
    
    width: $word-w*1px;
    height: $word-h*1px;
    margin-top: -1*$word-h/2*1px;
    margin-left: -1*$word-w/2*1px;
    top: 50%;
    left: 50%;
    
    transform-style:preserve-3d;
    backface-visibility:visible;   

    transform-origin: 50% 50%;
    
    .s {
      position: absolute;
      transform-origin: 0% 50%;
      
      transform-style:preserve-3d;
      backface-visibility:visible;

      top: 0%;
      left: 0%;  
      
      svg {
        position: absolute;
        top: 0;
        left: 0%;
        
        width:  $word-w * 1px;   
        height:  $word-h * 1px; 
        
        transform-style:preserve-3d;
        backface-visibility:visible;
        transform-origin: 50% 50%;    
        
        .p {
          fill: rgba($word-color, .1);
          stroke: rgba($word-color, .1);
          
          animation: pulse $word-dur linear infinite;
          
        }
      }      
    }    
  }  
}



@for $i from 1 through $word-s {  
  
  .word .s:nth-of-type(#{$i}) {
    
    transform: rotateY(0deg) translateZ($i * $word-d * 1px);
    
    
    .p {
      animation-delay: $i * (1s / 10);
    }
    
  }
}


@keyframes pulse {
  
  50% {
    fill: rgba($word-color, .08);
    stroke: rgba($word-color, .08);
  }
}


@keyframes word-rotate {
  50% {
    transform: rotateY($word-deg) rotateZ($word-deg/10) rotateX($word-deg/20);
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console