Dextilitygamer

You can edit your profile's content on your account profile settings.

Color

Text

Link

Text

Font

Kanit

Size

Images

Banner

Background

My Projects

Layout

Grid

B. Radius

Bootcamp Dodger

Scale To The Top

Samsarahs Wild Magic

Not your King

GetDiced

Bert the Beetle

Sorting Chaos

Out of Body

Flappy Bird Clone

Deadline

Misc

Custom CSS

.user_profile{}

.text_header{
    z-index: 50;
    font-family:Luminari,Impact,Snell Roundhand, cursive;
    font-size: 50px;
    box-shadow: 0px 0px 30px 0px #2E4774;
    background-color: #a76fc3;
    color: #0f2306;
}

.custom-hex {
  position: relative;
  width: 1000px;
  height: 750px;
  margin: 3rem auto;
  box-shadow: 0 0 30px 0 rgba(149, 32, 207, 0.7);
  overflow: hidden;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  transition: transform 200ms ease-in, box-shadow 200ms ease-in;
}

.custom-hex:hover {
  transform: scale(1.02) rotate(-3deg);
  box-shadow: 0 0 60px 10px rgba(149, 32, 207, 0.8);
}

.custom-hex .custom-hex-slice {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
  cursor: pointer;

transition:
    opacity 400ms ease,
    transform 400ms ease,
    clip-path 600ms ease,
    background-position 600ms ease,
    background-size 600ms ease;
}

.custom-hex:hover .custom-hex-slice {
  opacity: 0;
}
.custom-hex .custom-hex-slice:hover {
  opacity: 1;
  transform: scale(1.03);
  z-index: 5;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background-position: 50% 50%;
  background-size: 85%;
}

.custom-hex .custom-slice-1 { clip-path: polygon(25% 0%, 75% 0%, 50% 50%); }
.custom-hex .custom-slice-2 { clip-path: polygon(75% 0%, 100% 50%, 50% 50%); }
.custom-hex .custom-slice-3 { clip-path: polygon(100% 50%, 75% 100%, 50% 50%); }
.custom-hex .custom-slice-4 { clip-path: polygon(75% 100%, 25% 100%, 50% 50%); }
.custom-hex .custom-slice-5 { clip-path: polygon(25% 100%, 0% 50%, 50% 50%); }
.custom-hex .custom-slice-6 { clip-path: polygon(0% 50%, 25% 0%, 50% 50%); }

/* Slice 1 */
.custom-hex .custom-slice-1:hover { animation: fill-slice-1 0.9s ease-out forwards; }

@keyframes fill-slice-1 {
  0% { clip-path: polygon(50% 5%, 55% 7%, 70% 20%, 60% 35%, 40% 35%, 30% 20%); }
  40% { clip-path: polygon(30% 0%, 70% 0%, 95% 30%, 70% 55%, 30% 55%, 5% 30%); }
  100% { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
}

/* Slice 2 */
.custom-hex .custom-slice-2:hover { animation: fill-slice-2 0.9s ease-out forwards; }

@keyframes fill-slice-2 {
  0% { clip-path: polygon(75% 0%, 85% 5%, 100% 50%, 85% 55%, 60% 35%, 70% 20%); }
  40% { clip-path: polygon(75% 0%, 100% 25%, 100% 50%, 100% 75%, 60% 55%, 60% 25%); }
  100% { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
}

/* Slice 3 */
.custom-hex .custom-slice-3:hover { animation: fill-slice-3 0.9s ease-out forwards; }

@keyframes fill-slice-3 {
  0% { clip-path: polygon(100% 50%, 95% 60%, 75% 100%, 60% 85%, 70% 70%, 85% 55%); }
  40% { clip-path: polygon(100% 50%, 95% 75%, 75% 100%, 50% 100%, 60% 55%, 80% 40%); }
  100% { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
}

/* Slice 4 */
.custom-hex .custom-slice-4:hover { animation: fill-slice-4 0.9s ease-out forwards; }

@keyframes fill-slice-4 {
  0% { clip-path: polygon(75% 100%, 70% 95%, 50% 50%, 40% 65%, 55% 80%, 65% 95%); }
  40% { clip-path: polygon(75% 100%, 50% 100%, 25% 100%, 40% 75%, 60% 50%, 80% 75%); }
  100% { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
}

/* Slice 5 */
.custom-hex .custom-slice-5:hover { animation: fill-slice-5 0.9s ease-out forwards; }

@keyframes fill-slice-5 {
  0% { clip-path: polygon(25% 100%, 20% 95%, 0% 50%, 20% 40%, 35% 55%, 40% 80%); }
  40% { clip-path: polygon(25% 100%, 0% 75%, 0% 50%, 0% 25%, 40% 45%, 40% 65%); }
  100% { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
}

/* Slice 6 */
.custom-hex .custom-slice-6:hover { animation: fill-slice-6 0.9s ease-out forwards; }

@keyframes fill-slice-6 {
  0% { clip-path: polygon(0% 50%, 5% 40%, 25% 0%, 35% 15%, 20% 30%, 5% 60%); }
  40% { clip-path: polygon(0% 50%, 0% 25%, 25% 0%, 50% 0%, 30% 45%, 10% 65%); }
  100% { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
}

.custom-hex .custom-slice-1 {
  background-image: url("https://img.itch.zone/aW1nLzE3NDM3Nzk5LnBuZw==/315x250%23c/5MDTv1.png");
  background-position: 10% -450%;
  background-size: 90%;
}

.custom-hex .custom-slice-2 {
  background-image: url("https://img.itch.zone/aW1nLzU3NjM1MjIucG5n/315x250%23c/z6P%2BZ8.png");
  background-position: 115% -180%;
  background-size: 60%;
}

.custom-hex .custom-slice-3 {
  background-image: url("https://img.itch.zone/aW1nLzEyNzI5NjE4LnBuZw==/315x250%23c/qICfrg.png");
  background-position: 0% 590%;
  background-size: 90%;
}

.custom-hex .custom-slice-4 {
  background-image: url("https://img.itch.zone/aW1nLzY0OTE5NTUucG5n/315x250%23c/8LGR4W.png");
  background-position: 0% 99%;
  background-size: 30%;
}
.custom-hex .custom-slice-5 {
  background-image: url("https://img.itch.zone/aW1nLzgyMDQ1ODMucG5n/315x250%23c/bYl8%2Bw.png");
  background-position: 0% 120%;
  background-size: 85%;
}
.custom-hex .custom-slice-6 {
  background-image: url("https://img.itch.zone/aW1nLzY4NTAyMzcucG5n/315x250%23c/qLW7Ms.png");
  background-position: 1% 93%;
  background-size: 45%;
}

Dextilitygamer

Hello there! I am an electronics technician who loves making games in his sparetime!

(Unity programmer)

Bootcamp Dodger

Dextilitygamer

Play in browser

Scale To The Top

You need to get to top of the mountain, where an ice cream is located, using different items and scale machines.

BraekSkaeg

Adventure

Not your King

Dextilitygamer