Skip to content

Instantly share code, notes, and snippets.

@zeroxsecurity

zeroxsecurity/glass-vial-with-luminescent-liquid.markdown

Created October 27, 2018 19:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zeroxsecurity/a49fcb14cea56c633ee231f98a4281d6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zeroxsecurity/a49fcb14cea56c633ee231f98a4281d6 to your computer and use it in GitHub Desktop.
Download ZIP
Glass vial with luminescent liquid
Raw
glass-vial-with-luminescent-liquid.markdown

Glass vial with luminescent liquid

Simple test made for fun. This is a configurable glass vial with a juicy liquid inside.

A Pen by horus023 on CodePen.

License.

Raw
index.pug
.baker
each i in Array(60)
.baker__smoke-fluff
.baker__neck
.baker__liquid
each i in Array(10)
Raw
style.less
// Settings
@background-color: #0D0D0D; // Turn off the liquid light to see it!
@baker-reflection: true; // TRUE OR FALSE
@liquid-color: #FF1744; // Set your liquid color when raimbow OFF
@raimbow-liquid: on; // ON or OFF
@liquid-light: on; // ON or OFF
@bubbles-density: 10; // Must be equal to .baker__liquid-bubble html elements number
@smoke: on;
@smoke-density: 40;
// =============================================
// Main root style
:root {
height: 100%;
width: 100%;
background: @background-color;
// Set dynamic background when raimbow on
& when ( @raimbow-liquid = on ) and ( @liquid-light = on ){
animation: rainbow 15s infinite; }
// Set fixed background when light off
& when ( @raimbow-liquid = on ) and not ( @liquid-light = on ) {
background: @background-color; }
// Set dynamic background when raimbow off and light on
& when not ( @raimbow-liquid = on ) and ( @liquid-light = on ){
background: @liquid-color; }
}
// Body style
body {
height: 100%;
width: 100%;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
flex-direction: column;
// Set background light gradient
& when ( @liquid-light = on ) {
background: radial-gradient( ellipse at center, fade(#000000, 85%) 20%, darken( @liquid-color, 80% ) 100%); }
}
// Baker icon
.baker {
position: relative;
// neck edge
&:before {
content: "";
box-sizing: border-box;
position: absolute;
display: block;
width: 50px;
top: -5px;
height: 5px;
left: 50%;
margin-left: -25px;
border-radius: 5px;
background-color: fade( #FFF, 6% );}
}
// Baker neck
.baker__neck {
box-sizing: border-box;
display: block;
border-left: 5px solid fade( #FFF, 6% );
border-right: 5px solid fade( #FFF, 6% );
width: 40px;
height: 40px;
margin: 0 auto -6px auto;
position: relative;
border-top-left-radius: 0 0;
border-top-right-radius: 0 0;
border-bottom-right-radius: 50px 10px;
border-bottom-left-radius: 50px 10px;
z-index: 1;
background: linear-gradient( to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 100%);
// top liquid surface
&:before {
content: "";
width: 90px;
height: 11px;
position: absolute;
border-radius: 50%;
left: 50%;
margin-left: -45px;
top: 78px;
background-color: lighten( @liquid-color, 10% );
// Set animation background when raimbow is on
& when ( @raimbow-liquid = on ) {
animation: rainbow 15s infinite; }
}
// Glass Reflections
& when ( @baker-reflection = true ) {
&:after {
content: "";
position: absolute;
background-color: rgba(0,0,0,0);
width: 5px;
height: 100%;
bottom: 0;
right: 8px;
box-shadow: 3px 0px 2px 0px rgba(255,255,255, 0.1);
border-radius: 0 0 2px 0; }
}
}
// baker body
.baker-body {
background: linear-gradient( to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 100%);
border: 5px solid fade( #FFF, 6% );
border-top: none;
border-radius: 48%;
width: 100px;
height: 90px;
position: relative;
box-sizing: border-box;
overflow: hidden;
// Glass Reflections
& when ( @baker-reflection = true ) {
// right reflection
&:before {
content: "";
position: absolute;
height: 90px;
width: 90px;
left: -17px;
top: -3px;
border-radius: 50%;
z-index: 20;
background-color: rgba(255, 255, 255, 0);
box-shadow: 13px 2px 8px -8px rgba(255,255,255, 0.2); }
// baker bottom reflection
&:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 48%;
background: linear-gradient( to bottom, rgba(255,255,255,0) 70%, rgba(255,255,255,0.2) 100%); }
}
}
// Baker liquid
.baker__liquid {
background-color: @liquid-color;
position: absolute;
opacity: .8;
border-top-left-radius: 0 0;
border-top-right-radius: 0 0;
border-bottom-right-radius: 50px 40px;
border-bottom-left-radius: 50px 40px;
overflow: hidden;
height: 35px;
bottom: 0;
left: 0;
right: 0;
// Set animation background when raimbow is on
& when ( @raimbow-liquid = on ) {
animation: rainbow 15s infinite; }
}
.baker__liquid-bubble {
position: absolute;
display: block;
border-radius: 50%;
opacity: 0;
animation-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
background-color: fade( #FFF, 60% );
// Bubbles selector helper
.selectBubble( @bubbles-density );
}
// Show smoke when @smoke is on
& when ( @smoke = on ) {
.baker__smoke-fluff {
position: absolute;
display: block;
background-color: #FFF;
border-radius: 50%;
filter: blur(10px);
opacity: 0;
// Smoke generator
.smokeGenerator( @smoke-density );
}
}
// Animations
// =================================================================
// Background animation
@keyframes rainbow {
0% { background: #00BCD4; }
25% { background: #00C853; }
50% { background: #C62828; }
75% { background: #4527A0; }
100% { background: #00BCD4; }
}
// left / right random animation
@keyframes sideWays {
from {
margin-left: 0px; }
to {
margin-left: 4px; }
}
// to top animation
@keyframes moveclouds {
20% {
opacity: 1; }
100% {
opacity: 0;
transform: translateY(-25px); }
}
// left / right random animation
@keyframes smokesideWays {
from {
margin-left: 0px; }
to {
margin-left: 20px; }
}
// to top animation
@keyframes fadeSmoke {
0% {
opacity: 0.03; }
100% {
transform: translateY(-80px); }
}
// Helpers
// =================================================================
// Random number generator
.randomNum(@min: 1, @max: @min + 1, @number: 1) {
@randNum: floor(`Math.random() * @{max} + @{min}`);
}
// Bubbles Generator
// =================================================================
// Generate bubble dimension
.bubble-size() {
.randomNum(1, 2);
width: ~"@{randNum}px";
height: ~"@{randNum}px";
}
// Generate X bubbles origin point
.bubble-X-origin() {
.randomNum(5, 70);
left: ~"@{randNum}px";
}
// Generate Y bubbles origin point
.bubble-Y-origin() {
.randomNum(0, 10);
bottom: ~"@{randNum}px";
}
// Generate bubbles animation
.bubble-animation(@index) {
.randomNum(8, 14);
@toMS: @randNum * 100;
@duration-time: (@toMS / 10) * @index;
animation-delay: ~"@{toMS}ms";
animation: moveclouds ~"@{duration-time}ms" linear infinite, sideWays ~"@{toMS}ms" ease-in-out infinite alternate;
}
// Bubbles generator
.selectBubble(@index) when ( @index >= 0) {
// bubble selector
&:nth-child(@{index}) {
.bubble-size;
.bubble-X-origin;
.bubble-Y-origin;
.bubble-animation(@index); }
.selectBubble( @index - 1 );
}
// Smoke Generator
// =================================================================
// Generate smoke dimension
.smoke-size() {
.randomNum(5, 20);
width: ~"@{randNum}px";
height: ~"@{randNum}px";
}
// Generate X smoke origin point
.smoke-X-origin() {
.randomNum(20, 30);
left: ~"@{randNum}px";
}
// Generate Y smoke origin point
.smoke-Y-origin() {
.randomNum(100, 135);
bottom: ~"@{randNum}px";
}
// Generate smoke animation
.smoke-animation(@index) {
.randomNum(8, 14);
@toMS: @randNum * 200;
@duration-time: (@toMS / 3) * @index;
animation-delay: ~"@{toMS}ms";
animation: fadeSmoke ~"@{duration-time}ms" linear infinite, smokesideWays ~"@{toMS}ms" ease-in-out infinite alternate;
}
// smoke generator
.smokeGenerator(@index) when ( @index >= 0) {
// smoke generator
&:nth-child(@{index}) {
.smoke-size;
.smoke-X-origin;
.smoke-Y-origin;
.smoke-animation(@index); }
.smokeGenerator( @index - 1 );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment