cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


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.

    -(1..831).each do |i|
    -(1..831).each do |i|
    -(1..831).each do |i|
    -(1..831).each do |i|
              @import "compass/css3";

body {
  background: #303030;
@function p($number){
  @return ($number * 2.5%);
$m: #ef4871;// magenta
$g: #6dbe45;// green
$o: #f16624;// orange
$k: #9a9791;// black
$b: #01a4db;// blue
$y: #f99f38;// yellow
$t: transparent;

$size: 200px;
$row-count: 40;
$box-size: 100% / $row-count;
.wp-logo {
  display: inline-block;
  width: $size;
  height: $size;
  margin: 50px;
  div {
    width: $box-size;
    height: $box-size;
    float: left;
    background: $k;
    transform: translateZ(0);
    // Cicada principle!
    &:nth-child(2n)  {background: $o;}
    &:nth-child(3n)  {background: $m;}
    &:nth-child(7n)  {background: $y;}
    &:nth-child(11n) {background: $k;}
    &:nth-child(13n) {background: $b;}
    &:nth-child(17n) {background: $g;}
    &:nth-child(19n) {background: $k;}
    &:nth-child(1)  {margin-left:  p(14)} // 1
    &:nth-child(13) {margin-right: p(13)}
    &:nth-child(14) {margin-left:  p(11)} // 2
    &:nth-child(31) {margin-right: p(11)}
    &:nth-child(32) {margin-left:  p(9)}  // 3
    &:nth-child(53) {margin-right: p(9)}
    &:nth-child(54) {margin-left:  p(8)}  // 4
    &:nth-child(60) {margin-left:  p(11)}
    &:nth-child(67) {margin-right: p(7)}
    &:nth-child(68) {margin-left:  p(7)}  // 5
    &:nth-child(73) {margin-left:  p(16)}
    &:nth-child(78) {margin-right: p(6)}
    &:nth-child(79) {margin-left:  p(6)}  // 6
    &:nth-child(83) {margin-left:  p(20)}
    &:nth-child(87) {margin-right: p(5)}
    &:nth-child(88) {margin-left:  p(5)}  // 7
    &:nth-child(93) {margin-left:  p(21)}
    &:nth-child(97) {margin-right: p(4)}
    &:nth-child(98) {margin-left:  p(4)}  // 8
    &:nth-child(102) {margin-left:  p(22)}
    &:nth-child(108) {margin-right: p(3)}
    &:nth-child(109) {margin-left:  p(3)} // 9
    &:nth-child(113) {margin-left:  p(22)}
    &:nth-child(120) {margin-right: p(3)}
    &:nth-child(121) {margin-left:  p(3)} // 10
    &:nth-child(124) {margin-left:  p(3)}
    &:nth-child(128) {margin-left:  p(2)}
    &:nth-child(131) {margin-left:  p(4)}
    &:nth-child(135) {margin-left:  p(3)}
    &:nth-child(143) {margin-right: p(2)}
    &:nth-child(144) {margin-left:  p(2)} // 11
    &:nth-child(155) {margin-left:  p(1)}
    &:nth-child(167) {margin-left:  p(3)}
    &:nth-child(175) {margin-right: p(2)}
    &:nth-child(176) {margin-left:  p(2)} // 12
    &:nth-child(187) {margin-left:  p(2)}
    &:nth-child(198) {margin-left:  p(3)}
    &:nth-child(207) {margin-right: p(1)}
    &:nth-child(208) {margin-left:  p(1)} // 13
    &:nth-child(217) {margin-left:  p(7)}
    &:nth-child(224) {margin-left:  p(5)}
    &:nth-child(233) {margin-right: p(1)}
    &:nth-child(234) {margin-left:  p(1)} // 14
    &:nth-child(244) {margin-left:  p(6)}
    &:nth-child(251) {margin-left:  p(6)}
    &:nth-child(261) {margin-left:  p(1)} // 15
    &:nth-child(264) {margin-left:  p(1)}
    &:nth-child(270) {margin-left:  p(7)}
    &:nth-child(276) {margin-left:  p(7)}
    &:nth-child(281) {margin-left:  p(1)}
    &:nth-child(287) {margin-left:  p(2)} // 16
    &:nth-child(293) {margin-left:  p(7)}
    &:nth-child(300) {margin-left:  p(6)}
    &:nth-child(305) {margin-left:  p(1)}
    &:nth-child(311) {margin-left:  p(2)} // 17
    &:nth-child(318) {margin-left:  p(6)}
    &:nth-child(325) {margin-left:  p(6)}
    &:nth-child(330) {margin-left:  p(1)}
    &:nth-child(336) {margin-left:  p(2)} // 18
    &:nth-child(343) {margin-left:  p(7)}
    &:nth-child(349) {margin-left:  p(7)}
    &:nth-child(352) {margin-left:  p(3)}
    &:nth-child(357) {margin-left:  p(2)} // 19
    &:nth-child(364) {margin-left:  p(7)}
    &:nth-child(371) {margin-left:  p(6)}
    &:nth-child(374) {margin-left:  p(3)}
    &:nth-child(379) {margin-left:  p(3)} // 20
    &:nth-child(386) {margin-left:  p(6)}
    &:nth-child(393) {margin-left:  p(6)}
    &:nth-child(396) {margin-left:  p(3)}
    &:nth-child(401) {margin-left:  p(3)} // 21
    &:nth-child(408) {margin-left:  p(5)}
    &:nth-child(416) {margin-left:  p(5)}
    &:nth-child(419) {margin-left:  p(4)}
    &:nth-child(425) {margin-left:  p(3)} // 22
    &:nth-child(431) {margin-left:  p(5)}
    &:nth-child(440) {margin-left:  p(4)}
    &:nth-child(443) {margin-left:  p(4)}
    &:nth-child(449) {margin-left:  p(3)} // 23
    &:nth-child(456) {margin-left:  p(4)}
    &:nth-child(465) {margin-left:  p(4)}
    &:nth-child(468) {margin-left:  p(3)}
    &:nth-child(471) {margin-left:  p(1)} // 24
    &:nth-child(474) {margin-left:  p(3)}
    &:nth-child(481) {margin-left:  p(3)}
    &:nth-child(484) {margin-left:  p(1)}
    &:nth-child(490) {margin-left:  p(4)}
    &:nth-child(493) {margin-left:  p(3)}
    &:nth-child(496) {margin-left:  p(1)} // 25
    &:nth-child(499) {margin-left:  p(4)}
    &:nth-child(505) {margin-left:  p(3)}
    &:nth-child(508) {margin-left:  p(1)}
    &:nth-child(515) {margin-left:  p(2)}
    &:nth-child(519) {margin-left:  p(3)}
    &:nth-child(522) {margin-left:  p(1)} // 26
    &:nth-child(526) {margin-left:  p(4)}
    &:nth-child(532) {margin-left:  p(1)}
    &:nth-child(536) {margin-left:  p(1)}
    &:nth-child(543) {margin-left:  p(2)}
    &:nth-child(546) {margin-left:  p(4)}
    &:nth-child(547) {margin-right: p(1)}
    &:nth-child(548) {margin-left:  p(1)} // 27
    &:nth-child(552) {margin-left:  p(4)}
    &:nth-child(558) {margin-left:  p(1)}
    &:nth-child(561) {margin-left:  p(3)}
    &:nth-child(572) {margin-left:  p(3)}
    &:nth-child(574) {margin-right: p(1)}
    &:nth-child(575) {margin-left:  p(2)} // 28
    &:nth-child(579) {margin-left:  p(3)}
    &:nth-child(585) {margin-left:  p(1)}
    &:nth-child(588) {margin-left:  p(3)}
    &:nth-child(599) {margin-left:  p(3)}
    &:nth-child(601) {margin-right: p(1)}
    &:nth-child(602) {margin-left:  p(2)} // 29
    &:nth-child(606) {margin-left:  p(4)}
    &:nth-child(615) {margin-left:  p(3)}
    &:nth-child(625) {margin-left:  p(3)}
    &:nth-child(628) {margin-right: p(1)}
    &:nth-child(629) {margin-left:  p(3)} // 30
    &:nth-child(633) {margin-left:  p(3)}
    &:nth-child(641) {margin-left:  p(5)}
    &:nth-child(650) {margin-left:  p(2)}
    &:nth-child(653) {margin-right: p(2)}
    &:nth-child(654) {margin-left:  p(3)} // 31
    &:nth-child(658) {margin-left:  p(3)}
    &:nth-child(666) {margin-left:  p(5)}
    &:nth-child(674) {margin-left:  p(3)}
    &:nth-child(676) {margin-right: p(3)}
    &:nth-child(677) {margin-left:  p(4)} // 32
    &:nth-child(681) {margin-left:  p(3)}
    &:nth-child(688) {margin-left:  p(5)}
    &:nth-child(696) {margin-left:  p(2)}
    &:nth-child(699) {margin-right: p(3)}
    &:nth-child(700) {margin-left:  p(5)} // 33
    &:nth-child(704) {margin-left:  p(2)}
    &:nth-child(710) {margin-left:  p(7)}
    &:nth-child(716) {margin-left:  p(2)}
    &:nth-child(719) {margin-right: p(4)}
    &:nth-child(720) {margin-left:  p(6)} // 34
    &:nth-child(724) {margin-left:  p(1)}
    &:nth-child(730) {margin-left:  p(7)}
    &:nth-child(736) {margin-left:  p(1)}
    &:nth-child(739) {margin-right: p(5)}
    &:nth-child(740) {margin-left:  p(7)} // 35
    &:nth-child(749) {margin-left:  p(9)}
    &:nth-child(757) {margin-right: p(6)}
    &:nth-child(758) {margin-left:  p(8)} // 36
    &:nth-child(766) {margin-left:  p(9)}
    &:nth-child(773) {margin-right: p(7)}
    &:nth-child(774) {margin-left:  p(9)} // 37
    &:nth-child(781) {margin-left:  p(9)}
    &:nth-child(787) {margin-right: p(8)}
    &:nth-child(788) {margin-left:  p(11)}// 38
    &:nth-child(806) {margin-right: p(10)}
    &:nth-child(807) {margin-left:  p(13)}// 39
    &:nth-child(821) {margin-right: p(12)}
    &:nth-child(822) {margin-left:  p(16)}// 40
    &:nth-child(831) {/* fin */}
.a {
  $size: 50%;
  div {
    transition: transform .3s ease-in-out;
  &:hover {
    div {
      transform: translate($size, $size) translateZ(0) scale(.5);

      &:nth-child(2n)  {transform: translate($size * -1, $size * -1) scale(.5);}
      &:nth-child(3n)  {transform: translate($size * -1, $size) scale(.5);}
      &:nth-child(7n)  {transform: translate($size, $size * -1);}
.b {
  overflow: hidden;
  div {
    transition: margin 2s ease-in;
  &:hover {
    div {
      margin: 2px;
.c {
  div {
    position: relative;
  &:hover {
    div {
      transition: transform .2s ease-in-out;
      &:hover {
        z-index: 99;
        transform: scale(3) rotate(135deg);
.d {
  $size: 50%;
  div {
    box-sizing: border-box;
    transition: transform .3s ease-in-out;
  &:hover {
    div {
      transform: scale(.5);

/*      &:nth-child(2n)  {transform: translate($size * -1, $size * -1);}
      &:nth-child(3n)  {transform: translate($size * -1, $size);}
      &:nth-child(7n)  {transform: translate($size, $size * -1);}*/
.template {
  &:hover {
    div {
      transition: all 6s ease-in-out;

      &:nth-child(2n)  {}
      &:nth-child(3n)  {}
      &:nth-child(7n)  {}
      &:nth-child(11n) {}
      &:nth-child(13n) {}
      &:nth-child(17n) {}
      &:nth-child(19n) {}

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................