- for (i = 0; i < 50; i++) div(class="snowflake") See how this drawing was made html, body { padding: 0; margin: 0; width: 100vw; height: 100vh; position: relative; overflow: hidden; background: linear-gradient(#123, #111); } .snowflake { --size: 1vw; width: var(--size); height: var(--size); background: white; border-radius: 50%; position: absolute; top: -5vh; } @keyframes snowfall { 0% { transform: translate3d(var(--left-ini), 0, 0); } 100% { transform: translate3d(var(--left-end), 110vh, 0); } } @for $i from 1 through 50 { .snowflake:nth-child(#{$i}) { --size: #{random(5) * 0.2}vw; --left-ini: #{random(20) - 10}vw; --left-end: #{random(20) - 10}vw; left: #{random(100)}vw; animation: snowfall #{5 + random(10)}s linear infinite; animation-delay: -#{random(10)}s; } } /* added small blur every 6 snowflakes*/ .snowflake:nth-child(6n) { filter: blur(1px); } /***/ #youtube { z-index: 2; display: block; width: 100px; height: 70px; position: absolute; bottom: 20px; right: 20px; background: red; border-radius: 50% / 11%; transition: transform 0.5s; } #youtube:hover, #youtube:focus { transform: scale(1.1); } #youtube::before { content: ""; display: block; position: absolute; top: 7.5%; left: -6%; width: 112%; height: 85%; background: red; border-radius: 9% / 50%; } #youtube::after { content: ""; display: block; position: absolute; top: 20px; left: 40px; width: 45px; height: 30px; border: 15px solid transparent; box-sizing: border-box; border-left: 30px solid white; } #youtube span { font-size: 0; position: absolute; width: 0; height: 0; overflow: hidden; }
top of page

STUDENT SHOWCASE

Visit ComXnaut Studio's gallery of all our students' work from across different educational courses, ranging from a variety of illustration work, cover art, manga and comic pages.

Our studio residents are always available to accept any commissions, reach out to us today to get started!

bottom of page