New Year, New You?

Burst From Your Cocoon!

Jan 1st - Jan 22nd

Prompts

You can do one or both of them!

Blog / Page

Make a page or write a blog post that explores a reflection on past decisions (good or bad), or brainstorms / shares plans for the future.

Pixel Art

Customize your own Butterfly or Moth!

You can make them static or animated. Why not put a jar for it on your site too!

Get the assets and code here

Submit
Entry

Credits

Pixel Art Instructions

Static

If you want to make a static little bug, just right click and save one or both of these templates.

Animated

If you want an animated bug, you gotta download multiple images. They're each named after the part they represent.

Moth's parts.

Butterfly's parts.

After you got your bug parts downloaded, you gotta add the following code to your site and properly link the sources of your bug parts. For the outer div, make sure to only use the "moth" class or the "butterfly" class. It's because they're different sizes.

And lastly, you have to add this CSS to the page holding your bugs.

.insect {
    image-rendering: pixelated;
    overflow: hidden;
    width: 100%;
}

.insect img { margin: 0; }

.moth { aspect-ratio: 74 / 36 !important; }
.moth .wing { aspect-ratio: 37 / 36 !important; }
.butterfly { aspect-ratio: 76 / 47 !important; }
.butterfly .wing { aspect-ratio: 38 / 47 !important; }

.insect .body {
    z-index: 6;
    width: 100%;
}

.insect .wings {
    position: relative;
    top: -106%;

display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.insect .left,
.insect .right {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.insect .wing {
    width: 100%;
}
.insect .top {
    z-index: 8;
    position: relative;
}
.insect .bottom {
    z-index: 7;
    position: relative;
    top: calc(100% * -1);
}

.insect .left .wing { transform-origin: right center;}
.insect .right .wing { transform-origin: left center; }
.insect .top {
    animation: flutter 300ms infinite;
}
.insect .bottom {
    animation: flutter_offset 300ms infinite;
}

@keyframes flutter {
  0% { transform: rotateY(0); }
  45% { transform: rotateY(70deg); }
  95%, 100% { transform: rotateY(0); }
}

@keyframes flutter_offset {
  0%, 5% { transform: rotateY(0); }
  50% { transform: rotateY(70deg); }
  100% { transform: rotateY(0); }
}

Jar

Finally, we have the jar. If you want a jar like the one on this page, download the jar image and add the CSS to your site.

Create a div, or other element, to be your jar. Don't forget the ID. The jar works as a border-image. It'll resize with your div.

Feel free to edit the jar image and CSS to fit your style.