Skip to content

Instantly share code, notes, and snippets.

@Encrypted-Thoughts

Encrypted-Thoughts/1 - html.html

Last active November 4, 2021 23:43
Show Gist options
  • Save Encrypted-Thoughts/ca4e3895b92b3220aa908e204d6f41ab to your computer and use it in GitHub Desktop.
Save Encrypted-Thoughts/ca4e3895b92b3220aa908e204d6f41ab to your computer and use it in GitHub Desktop.
Download ZIP
Custom Streamlabs Sub Goal Bar - Minecraft Hearts
Raw
1 - html.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<div id='bar' class='bar'></div>
Raw
2 - css.css
/* All html objects will be wrapped in the #wrap div */
:root {
--bar-bevel: 25px;
--bar-border-color: #000000;
--bar-border-thickness: 5px;
--bar-border-style: solid;
--animate-duration: 1500ms;
--animate-delay: 1s;
--tier0-background: #000000;
--heart0-primary: #000000;
--heart0-secondary: #000000;
--heart0-shine: #000000;
--heart0-outline: #000000;
--heart0-outline-special: #000000;
--tier1-background: #000000;
--heart1-primary: #000000;
--heart1-secondary: #000000;
--heart1-shine: #000000;
--heart1-outline: #000000;
--heart1-outline-special: #000000;
--tier2-background: #000000;
--heart2-primary: #000000;
--heart2-secondary: #000000;
--heart2-shine: #000000;
--heart2-outline: #000000;
--heart2-outline-special: #000000;
--tier3-background: #000000;
--heart3-primary: #000000;
--heart3-secondary: #000000;
--heart3-shine: #000000;
--heart3-outline: #000000;
--heart3-outline-special: #000000;
--tier4-background: #000000;
--heart4-primary: #000000;
--heart4-secondary: #000000;
--heart4-shine: #000000;
--heart4-outline: #000000;
--heart4-outline-special: #000000;
--tier5-background: #000000;
--heart5-primary: #000000;
--heart5-secondary: #000000;
--heart5-shine: #000000;
--heart5-outline: #000000;
--heart5-outline-special: #000000;
--tier6-background: #000000;
--heart6-primary: #000000;
--heart6-secondary: #000000;
--heart6-shine: #000000;
--heart6-outline: #000000;
--heart6-outline-special: #000000;
--tier7-background: #000000;
--heart7-primary: #000000;
--heart7-secondary: #000000;
--heart7-shine: #000000;
--heart7-outline: #000000;
--heart7-outline-special: #000000;
--tier8-background: #000000;
--heart8-primary: #000000;
--heart8-secondary: #000000;
--heart8-shine: #000000;
--heart8-outline: #000000;
--heart8-outline-special: #000000;
}
.bar {
border-radius: var(--bar-bevel);
border-style: var(--bar-border-style);
border-width: var(--bar-border-thickness);
border-color: var(--bar-border-color);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 100%;
}
.animate__updown {
-webkit-animation-name: updown;
animation-name: updown;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
}
@-webkit-keyframes updown {
0% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
50% {
-webkit-transform: translateY(25%);
transform: translateY(25%);
}
100% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
}
@keyframes updown {
0% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
50% {
-webkit-transform: translateY(25%);
transform: translateY(25%);
}
100% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
}
.heart-container {
position: relative;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
height: 9em;
min-width: 9em;
padding-left: 1em;
}
.block {
position: absolute;
}
.heart {
display: block;
width: 1.05em;
height: 1.05em;
}
.heart0-fill {
-webkit-box-shadow: 2em 1em var(--heart0-primary), 3em 1em var(--heart0-primary), 5em 1em var(--heart0-primary), 6em 1em var(--heart0-primary), 1em 2em var(--heart0-primary), 2em 2em var(--heart0-shine), 3em 2em var(--heart0-primary), 4em 2em var(--heart0-primary), 5em 2em var(--heart0-primary), 6em 2em var(--heart0-primary), 7em 2em var(--heart0-primary), 1em 3em var(--heart0-primary), 2em 3em var(--heart0-primary), 3em 3em var(--heart0-primary), 4em 3em var(--heart0-primary), 5em 3em var(--heart0-primary), 6em 3em var(--heart0-primary), 7em 3em var(--heart0-primary), 1em 4em var(--heart0-secondary), 2em 4em var(--heart0-primary), 3em 4em var(--heart0-primary), 4em 4em var(--heart0-primary), 5em 4em var(--heart0-primary), 6em 4em var(--heart0-primary), 7em 4em var(--heart0-primary), 2em 5em var(--heart0-secondary), 3em 5em var(--heart0-primary), 4em 5em var(--heart0-primary), 5em 5em var(--heart0-primary), 6em 5em var(--heart0-secondary), 3em 6em var(--heart0-secondary), 4em 6em var(--heart0-primary), 5em 6em var(--heart0-secondary), 4em 7em var(--heart0-secondary);
box-shadow: 2em 1em var(--heart0-primary), 3em 1em var(--heart0-primary), 5em 1em var(--heart0-primary), 6em 1em var(--heart0-primary), 1em 2em var(--heart0-primary), 2em 2em var(--heart0-shine), 3em 2em var(--heart0-primary), 4em 2em var(--heart0-primary), 5em 2em var(--heart0-primary), 6em 2em var(--heart0-primary), 7em 2em var(--heart0-primary), 1em 3em var(--heart0-primary), 2em 3em var(--heart0-primary), 3em 3em var(--heart0-primary), 4em 3em var(--heart0-primary), 5em 3em var(--heart0-primary), 6em 3em var(--heart0-primary), 7em 3em var(--heart0-primary), 1em 4em var(--heart0-secondary), 2em 4em var(--heart0-primary), 3em 4em var(--heart0-primary), 4em 4em var(--heart0-primary), 5em 4em var(--heart0-primary), 6em 4em var(--heart0-primary), 7em 4em var(--heart0-primary), 2em 5em var(--heart0-secondary), 3em 5em var(--heart0-primary), 4em 5em var(--heart0-primary), 5em 5em var(--heart0-primary), 6em 5em var(--heart0-secondary), 3em 6em var(--heart0-secondary), 4em 6em var(--heart0-primary), 5em 6em var(--heart0-secondary), 4em 7em var(--heart0-secondary);
}
.heart0-outline {
-webkit-box-shadow: 2em 0em var(--heart0-outline), 3em 0em var(--heart0-outline), 5em 0em var(--heart0-outline), 6em 0em var(--heart0-outline), 1em 1em var(--heart0-outline), 4em 1em var(--heart0-outline), 7em 1em var(--heart0-outline), 0em 2em var(--heart0-outline), 8em 2em var(--heart0-outline), 0em 3em var(--heart0-outline), 8em 3em var(--heart0-outline), 0em 4em var(--heart0-outline), 8em 4em var(--heart0-outline), 1em 5em var(--heart0-outline), 7em 5em var(--heart0-outline), 2em 6em var(--heart0-outline), 6em 6em var(--heart0-outline), 3em 7em var(--heart0-outline), 5em 7em var(--heart0-outline), 4em 8em var(--heart0-outline);
box-shadow: 2em 0em var(--heart0-outline), 3em 0em var(--heart0-outline), 5em 0em var(--heart0-outline), 6em 0em var(--heart0-outline), 1em 1em var(--heart0-outline), 4em 1em var(--heart0-outline), 7em 1em var(--heart0-outline), 0em 2em var(--heart0-outline), 8em 2em var(--heart0-outline), 0em 3em var(--heart0-outline), 8em 3em var(--heart0-outline), 0em 4em var(--heart0-outline), 8em 4em var(--heart0-outline), 1em 5em var(--heart0-outline), 7em 5em var(--heart0-outline), 2em 6em var(--heart0-outline), 6em 6em var(--heart0-outline), 3em 7em var(--heart0-outline), 5em 7em var(--heart0-outline), 4em 8em var(--heart0-outline);
}
.heart0-outline-special {
-webkit-box-shadow: 2em 0em var(--heart0-outline-special), 3em 0em var(--heart0-outline-special), 5em 0em var(--heart0-outline-special), 6em 0em var(--heart0-outline-special), 1em 1em var(--heart0-outline-special), 4em 1em var(--heart0-outline-special), 7em 1em var(--heart0-outline-special), 0em 2em var(--heart0-outline-special), 8em 2em var(--heart0-outline-special), 0em 3em var(--heart0-outline-special), 8em 3em var(--heart0-outline-special), 0em 4em var(--heart0-outline-special), 8em 4em var(--heart0-outline-special), 1em 5em var(--heart0-outline-special), 7em 5em var(--heart0-outline-special), 2em 6em var(--heart0-outline-special), 6em 6em var(--heart0-outline-special), 3em 7em var(--heart0-outline-special), 5em 7em var(--heart0-outline-special), 4em 8em var(--heart0-outline-special);
box-shadow: 2em 0em var(--heart0-outline-special), 3em 0em var(--heart0-outline-special), 5em 0em var(--heart0-outline-special), 6em 0em var(--heart0-outline-special), 1em 1em var(--heart0-outline-special), 4em 1em var(--heart0-outline-special), 7em 1em var(--heart0-outline-special), 0em 2em var(--heart0-outline-special), 8em 2em var(--heart0-outline-special), 0em 3em var(--heart0-outline-special), 8em 3em var(--heart0-outline-special), 0em 4em var(--heart0-outline-special), 8em 4em var(--heart0-outline-special), 1em 5em var(--heart0-outline-special), 7em 5em var(--heart0-outline-special), 2em 6em var(--heart0-outline-special), 6em 6em var(--heart0-outline-special), 3em 7em var(--heart0-outline-special), 5em 7em var(--heart0-outline-special), 4em 8em var(--heart0-outline-special);
}
.heart1-fill {
-webkit-box-shadow: 2em 1em var(--heart1-primary), 3em 1em var(--heart1-primary), 5em 1em var(--heart1-primary), 6em 1em var(--heart1-primary), 1em 2em var(--heart1-primary), 2em 2em var(--heart1-shine), 3em 2em var(--heart1-primary), 4em 2em var(--heart1-primary), 5em 2em var(--heart1-primary), 6em 2em var(--heart1-primary), 7em 2em var(--heart1-primary), 1em 3em var(--heart1-primary), 2em 3em var(--heart1-primary), 3em 3em var(--heart1-primary), 4em 3em var(--heart1-primary), 5em 3em var(--heart1-primary), 6em 3em var(--heart1-primary), 7em 3em var(--heart1-primary), 1em 4em var(--heart1-secondary), 2em 4em var(--heart1-primary), 3em 4em var(--heart1-primary), 4em 4em var(--heart1-primary), 5em 4em var(--heart1-primary), 6em 4em var(--heart1-primary), 7em 4em var(--heart1-primary), 2em 5em var(--heart1-secondary), 3em 5em var(--heart1-primary), 4em 5em var(--heart1-primary), 5em 5em var(--heart1-primary), 6em 5em var(--heart1-secondary), 3em 6em var(--heart1-secondary), 4em 6em var(--heart1-primary), 5em 6em var(--heart1-secondary), 4em 7em var(--heart1-secondary);
box-shadow: 2em 1em var(--heart1-primary), 3em 1em var(--heart1-primary), 5em 1em var(--heart1-primary), 6em 1em var(--heart1-primary), 1em 2em var(--heart1-primary), 2em 2em var(--heart1-shine), 3em 2em var(--heart1-primary), 4em 2em var(--heart1-primary), 5em 2em var(--heart1-primary), 6em 2em var(--heart1-primary), 7em 2em var(--heart1-primary), 1em 3em var(--heart1-primary), 2em 3em var(--heart1-primary), 3em 3em var(--heart1-primary), 4em 3em var(--heart1-primary), 5em 3em var(--heart1-primary), 6em 3em var(--heart1-primary), 7em 3em var(--heart1-primary), 1em 4em var(--heart1-secondary), 2em 4em var(--heart1-primary), 3em 4em var(--heart1-primary), 4em 4em var(--heart1-primary), 5em 4em var(--heart1-primary), 6em 4em var(--heart1-primary), 7em 4em var(--heart1-primary), 2em 5em var(--heart1-secondary), 3em 5em var(--heart1-primary), 4em 5em var(--heart1-primary), 5em 5em var(--heart1-primary), 6em 5em var(--heart1-secondary), 3em 6em var(--heart1-secondary), 4em 6em var(--heart1-primary), 5em 6em var(--heart1-secondary), 4em 7em var(--heart1-secondary);
}
.heart1-outline {
-webkit-box-shadow: 2em 0em var(--heart1-outline), 3em 0em var(--heart1-outline), 5em 0em var(--heart1-outline), 6em 0em var(--heart1-outline), 1em 1em var(--heart1-outline), 4em 1em var(--heart1-outline), 7em 1em var(--heart1-outline), 0em 2em var(--heart1-outline), 8em 2em var(--heart1-outline), 0em 3em var(--heart1-outline), 8em 3em var(--heart1-outline), 0em 4em var(--heart1-outline), 8em 4em var(--heart1-outline), 1em 5em var(--heart1-outline), 7em 5em var(--heart1-outline), 2em 6em var(--heart1-outline), 6em 6em var(--heart1-outline), 3em 7em var(--heart1-outline), 5em 7em var(--heart1-outline), 4em 8em var(--heart1-outline);
box-shadow: 2em 0em var(--heart1-outline), 3em 0em var(--heart1-outline), 5em 0em var(--heart1-outline), 6em 0em var(--heart1-outline), 1em 1em var(--heart1-outline), 4em 1em var(--heart1-outline), 7em 1em var(--heart1-outline), 0em 2em var(--heart1-outline), 8em 2em var(--heart1-outline), 0em 3em var(--heart1-outline), 8em 3em var(--heart1-outline), 0em 4em var(--heart1-outline), 8em 4em var(--heart1-outline), 1em 5em var(--heart1-outline), 7em 5em var(--heart1-outline), 2em 6em var(--heart1-outline), 6em 6em var(--heart1-outline), 3em 7em var(--heart1-outline), 5em 7em var(--heart1-outline), 4em 8em var(--heart1-outline);
}
.heart1-outline-special {
-webkit-box-shadow: 2em 0em var(--heart1-outline-special), 3em 0em var(--heart1-outline-special), 5em 0em var(--heart1-outline-special), 6em 0em var(--heart1-outline-special), 1em 1em var(--heart1-outline-special), 4em 1em var(--heart1-outline-special), 7em 1em var(--heart1-outline-special), 0em 2em var(--heart1-outline-special), 8em 2em var(--heart1-outline-special), 0em 3em var(--heart1-outline-special), 8em 3em var(--heart1-outline-special), 0em 4em var(--heart1-outline-special), 8em 4em var(--heart1-outline-special), 1em 5em var(--heart1-outline-special), 7em 5em var(--heart1-outline-special), 2em 6em var(--heart1-outline-special), 6em 6em var(--heart1-outline-special), 3em 7em var(--heart1-outline-special), 5em 7em var(--heart1-outline-special), 4em 8em var(--heart1-outline-special);
box-shadow: 2em 0em var(--heart1-outline-special), 3em 0em var(--heart1-outline-special), 5em 0em var(--heart1-outline-special), 6em 0em var(--heart1-outline-special), 1em 1em var(--heart1-outline-special), 4em 1em var(--heart1-outline-special), 7em 1em var(--heart1-outline-special), 0em 2em var(--heart1-outline-special), 8em 2em var(--heart1-outline-special), 0em 3em var(--heart1-outline-special), 8em 3em var(--heart1-outline-special), 0em 4em var(--heart1-outline-special), 8em 4em var(--heart1-outline-special), 1em 5em var(--heart1-outline-special), 7em 5em var(--heart1-outline-special), 2em 6em var(--heart1-outline-special), 6em 6em var(--heart1-outline-special), 3em 7em var(--heart1-outline-special), 5em 7em var(--heart1-outline-special), 4em 8em var(--heart1-outline-special);
}
.heart2-fill {
-webkit-box-shadow: 2em 1em var(--heart2-primary), 3em 1em var(--heart2-primary), 5em 1em var(--heart2-primary), 6em 1em var(--heart2-primary), 1em 2em var(--heart2-primary), 2em 2em var(--heart2-shine), 3em 2em var(--heart2-primary), 4em 2em var(--heart2-primary), 5em 2em var(--heart2-primary), 6em 2em var(--heart2-primary), 7em 2em var(--heart2-primary), 1em 3em var(--heart2-primary), 2em 3em var(--heart2-primary), 3em 3em var(--heart2-primary), 4em 3em var(--heart2-primary), 5em 3em var(--heart2-primary), 6em 3em var(--heart2-primary), 7em 3em var(--heart2-primary), 1em 4em var(--heart2-secondary), 2em 4em var(--heart2-primary), 3em 4em var(--heart2-primary), 4em 4em var(--heart2-primary), 5em 4em var(--heart2-primary), 6em 4em var(--heart2-primary), 7em 4em var(--heart2-primary), 2em 5em var(--heart2-secondary), 3em 5em var(--heart2-primary), 4em 5em var(--heart2-primary), 5em 5em var(--heart2-primary), 6em 5em var(--heart2-secondary), 3em 6em var(--heart2-secondary), 4em 6em var(--heart2-primary), 5em 6em var(--heart2-secondary), 4em 7em var(--heart2-secondary);
box-shadow: 2em 1em var(--heart2-primary), 3em 1em var(--heart2-primary), 5em 1em var(--heart2-primary), 6em 1em var(--heart2-primary), 1em 2em var(--heart2-primary), 2em 2em var(--heart2-shine), 3em 2em var(--heart2-primary), 4em 2em var(--heart2-primary), 5em 2em var(--heart2-primary), 6em 2em var(--heart2-primary), 7em 2em var(--heart2-primary), 1em 3em var(--heart2-primary), 2em 3em var(--heart2-primary), 3em 3em var(--heart2-primary), 4em 3em var(--heart2-primary), 5em 3em var(--heart2-primary), 6em 3em var(--heart2-primary), 7em 3em var(--heart2-primary), 1em 4em var(--heart2-secondary), 2em 4em var(--heart2-primary), 3em 4em var(--heart2-primary), 4em 4em var(--heart2-primary), 5em 4em var(--heart2-primary), 6em 4em var(--heart2-primary), 7em 4em var(--heart2-primary), 2em 5em var(--heart2-secondary), 3em 5em var(--heart2-primary), 4em 5em var(--heart2-primary), 5em 5em var(--heart2-primary), 6em 5em var(--heart2-secondary), 3em 6em var(--heart2-secondary), 4em 6em var(--heart2-primary), 5em 6em var(--heart2-secondary), 4em 7em var(--heart2-secondary);
}
.heart2-outline {
-webkit-box-shadow: 2em 0em var(--heart2-outline), 3em 0em var(--heart2-outline), 5em 0em var(--heart2-outline), 6em 0em var(--heart2-outline), 1em 1em var(--heart2-outline), 4em 1em var(--heart2-outline), 7em 1em var(--heart2-outline), 0em 2em var(--heart2-outline), 8em 2em var(--heart2-outline), 0em 3em var(--heart2-outline), 8em 3em var(--heart2-outline), 0em 4em var(--heart2-outline), 8em 4em var(--heart2-outline), 1em 5em var(--heart2-outline), 7em 5em var(--heart2-outline), 2em 6em var(--heart2-outline), 6em 6em var(--heart2-outline), 3em 7em var(--heart2-outline), 5em 7em var(--heart2-outline), 4em 8em var(--heart2-outline);
box-shadow: 2em 0em var(--heart2-outline), 3em 0em var(--heart2-outline), 5em 0em var(--heart2-outline), 6em 0em var(--heart2-outline), 1em 1em var(--heart2-outline), 4em 1em var(--heart2-outline), 7em 1em var(--heart2-outline), 0em 2em var(--heart2-outline), 8em 2em var(--heart2-outline), 0em 3em var(--heart2-outline), 8em 3em var(--heart2-outline), 0em 4em var(--heart2-outline), 8em 4em var(--heart2-outline), 1em 5em var(--heart2-outline), 7em 5em var(--heart2-outline), 2em 6em var(--heart2-outline), 6em 6em var(--heart2-outline), 3em 7em var(--heart2-outline), 5em 7em var(--heart2-outline), 4em 8em var(--heart2-outline);
}
.heart2-outline-special {
-webkit-box-shadow: 2em 0em var(--heart2-outline-special), 3em 0em var(--heart2-outline-special), 5em 0em var(--heart2-outline-special), 6em 0em var(--heart2-outline-special), 1em 1em var(--heart2-outline-special), 4em 1em var(--heart2-outline-special), 7em 1em var(--heart2-outline-special), 0em 2em var(--heart2-outline-special), 8em 2em var(--heart2-outline-special), 0em 3em var(--heart2-outline-special), 8em 3em var(--heart2-outline-special), 0em 4em var(--heart2-outline-special), 8em 4em var(--heart2-outline-special), 1em 5em var(--heart2-outline-special), 7em 5em var(--heart2-outline-special), 2em 6em var(--heart2-outline-special), 6em 6em var(--heart2-outline-special), 3em 7em var(--heart2-outline-special), 5em 7em var(--heart2-outline-special), 4em 8em var(--heart2-outline-special);
box-shadow: 2em 0em var(--heart2-outline-special), 3em 0em var(--heart2-outline-special), 5em 0em var(--heart2-outline-special), 6em 0em var(--heart2-outline-special), 1em 1em var(--heart2-outline-special), 4em 1em var(--heart2-outline-special), 7em 1em var(--heart2-outline-special), 0em 2em var(--heart2-outline-special), 8em 2em var(--heart2-outline-special), 0em 3em var(--heart2-outline-special), 8em 3em var(--heart2-outline-special), 0em 4em var(--heart2-outline-special), 8em 4em var(--heart2-outline-special), 1em 5em var(--heart2-outline-special), 7em 5em var(--heart2-outline-special), 2em 6em var(--heart2-outline-special), 6em 6em var(--heart2-outline-special), 3em 7em var(--heart2-outline-special), 5em 7em var(--heart2-outline-special), 4em 8em var(--heart2-outline-special);
}
.heart3-fill {
-webkit-box-shadow: 2em 1em var(--heart3-primary), 3em 1em var(--heart3-primary), 5em 1em var(--heart3-primary), 6em 1em var(--heart3-primary), 1em 2em var(--heart3-primary), 2em 2em var(--heart3-shine), 3em 2em var(--heart3-primary), 4em 2em var(--heart3-primary), 5em 2em var(--heart3-primary), 6em 2em var(--heart3-primary), 7em 2em var(--heart3-primary), 1em 3em var(--heart3-primary), 2em 3em var(--heart3-primary), 3em 3em var(--heart3-primary), 4em 3em var(--heart3-primary), 5em 3em var(--heart3-primary), 6em 3em var(--heart3-primary), 7em 3em var(--heart3-primary), 1em 4em var(--heart3-secondary), 2em 4em var(--heart3-primary), 3em 4em var(--heart3-primary), 4em 4em var(--heart3-primary), 5em 4em var(--heart3-primary), 6em 4em var(--heart3-primary), 7em 4em var(--heart3-primary), 2em 5em var(--heart3-secondary), 3em 5em var(--heart3-primary), 4em 5em var(--heart3-primary), 5em 5em var(--heart3-primary), 6em 5em var(--heart3-secondary), 3em 6em var(--heart3-secondary), 4em 6em var(--heart3-primary), 5em 6em var(--heart3-secondary), 4em 7em var(--heart3-secondary);
box-shadow: 2em 1em var(--heart3-primary), 3em 1em var(--heart3-primary), 5em 1em var(--heart3-primary), 6em 1em var(--heart3-primary), 1em 2em var(--heart3-primary), 2em 2em var(--heart3-shine), 3em 2em var(--heart3-primary), 4em 2em var(--heart3-primary), 5em 2em var(--heart3-primary), 6em 2em var(--heart3-primary), 7em 2em var(--heart3-primary), 1em 3em var(--heart3-primary), 2em 3em var(--heart3-primary), 3em 3em var(--heart3-primary), 4em 3em var(--heart3-primary), 5em 3em var(--heart3-primary), 6em 3em var(--heart3-primary), 7em 3em var(--heart3-primary), 1em 4em var(--heart3-secondary), 2em 4em var(--heart3-primary), 3em 4em var(--heart3-primary), 4em 4em var(--heart3-primary), 5em 4em var(--heart3-primary), 6em 4em var(--heart3-primary), 7em 4em var(--heart3-primary), 2em 5em var(--heart3-secondary), 3em 5em var(--heart3-primary), 4em 5em var(--heart3-primary), 5em 5em var(--heart3-primary), 6em 5em var(--heart3-secondary), 3em 6em var(--heart3-secondary), 4em 6em var(--heart3-primary), 5em 6em var(--heart3-secondary), 4em 7em var(--heart3-secondary);
}
.heart3-outline {
-webkit-box-shadow: 2em 0em var(--heart3-outline), 3em 0em var(--heart3-outline), 5em 0em var(--heart3-outline), 6em 0em var(--heart3-outline), 1em 1em var(--heart3-outline), 4em 1em var(--heart3-outline), 7em 1em var(--heart3-outline), 0em 2em var(--heart3-outline), 8em 2em var(--heart3-outline), 0em 3em var(--heart3-outline), 8em 3em var(--heart3-outline), 0em 4em var(--heart3-outline), 8em 4em var(--heart3-outline), 1em 5em var(--heart3-outline), 7em 5em var(--heart3-outline), 2em 6em var(--heart3-outline), 6em 6em var(--heart3-outline), 3em 7em var(--heart3-outline), 5em 7em var(--heart3-outline), 4em 8em var(--heart3-outline);
box-shadow: 2em 0em var(--heart3-outline), 3em 0em var(--heart3-outline), 5em 0em var(--heart3-outline), 6em 0em var(--heart3-outline), 1em 1em var(--heart3-outline), 4em 1em var(--heart3-outline), 7em 1em var(--heart3-outline), 0em 2em var(--heart3-outline), 8em 2em var(--heart3-outline), 0em 3em var(--heart3-outline), 8em 3em var(--heart3-outline), 0em 4em var(--heart3-outline), 8em 4em var(--heart3-outline), 1em 5em var(--heart3-outline), 7em 5em var(--heart3-outline), 2em 6em var(--heart3-outline), 6em 6em var(--heart3-outline), 3em 7em var(--heart3-outline), 5em 7em var(--heart3-outline), 4em 8em var(--heart3-outline);
}
.heart3-outline-special {
-webkit-box-shadow: 2em 0em var(--heart3-outline-special), 3em 0em var(--heart3-outline-special), 5em 0em var(--heart3-outline-special), 6em 0em var(--heart3-outline-special), 1em 1em var(--heart3-outline-special), 4em 1em var(--heart3-outline-special), 7em 1em var(--heart3-outline-special), 0em 2em var(--heart3-outline-special), 8em 2em var(--heart3-outline-special), 0em 3em var(--heart3-outline-special), 8em 3em var(--heart3-outline-special), 0em 4em var(--heart3-outline-special), 8em 4em var(--heart3-outline-special), 1em 5em var(--heart3-outline-special), 7em 5em var(--heart3-outline-special), 2em 6em var(--heart3-outline-special), 6em 6em var(--heart3-outline-special), 3em 7em var(--heart3-outline-special), 5em 7em var(--heart3-outline-special), 4em 8em var(--heart3-outline-special);
box-shadow: 2em 0em var(--heart3-outline-special), 3em 0em var(--heart3-outline-special), 5em 0em var(--heart3-outline-special), 6em 0em var(--heart3-outline-special), 1em 1em var(--heart3-outline-special), 4em 1em var(--heart3-outline-special), 7em 1em var(--heart3-outline-special), 0em 2em var(--heart3-outline-special), 8em 2em var(--heart3-outline-special), 0em 3em var(--heart3-outline-special), 8em 3em var(--heart3-outline-special), 0em 4em var(--heart3-outline-special), 8em 4em var(--heart3-outline-special), 1em 5em var(--heart3-outline-special), 7em 5em var(--heart3-outline-special), 2em 6em var(--heart3-outline-special), 6em 6em var(--heart3-outline-special), 3em 7em var(--heart3-outline-special), 5em 7em var(--heart3-outline-special), 4em 8em var(--heart3-outline-special);
}
.heart4-fill {
-webkit-box-shadow: 2em 1em var(--heart4-primary), 3em 1em var(--heart4-primary), 5em 1em var(--heart4-primary), 6em 1em var(--heart4-primary), 1em 2em var(--heart4-primary), 2em 2em var(--heart4-shine), 3em 2em var(--heart4-primary), 4em 2em var(--heart4-primary), 5em 2em var(--heart4-primary), 6em 2em var(--heart4-primary), 7em 2em var(--heart4-primary), 1em 3em var(--heart4-primary), 2em 3em var(--heart4-primary), 3em 3em var(--heart4-primary), 4em 3em var(--heart4-primary), 5em 3em var(--heart4-primary), 6em 3em var(--heart4-primary), 7em 3em var(--heart4-primary), 1em 4em var(--heart4-secondary), 2em 4em var(--heart4-primary), 3em 4em var(--heart4-primary), 4em 4em var(--heart4-primary), 5em 4em var(--heart4-primary), 6em 4em var(--heart4-primary), 7em 4em var(--heart4-primary), 2em 5em var(--heart4-secondary), 3em 5em var(--heart4-primary), 4em 5em var(--heart4-primary), 5em 5em var(--heart4-primary), 6em 5em var(--heart4-secondary), 3em 6em var(--heart4-secondary), 4em 6em var(--heart4-primary), 5em 6em var(--heart4-secondary), 4em 7em var(--heart4-secondary);
box-shadow: 2em 1em var(--heart4-primary), 3em 1em var(--heart4-primary), 5em 1em var(--heart4-primary), 6em 1em var(--heart4-primary), 1em 2em var(--heart4-primary), 2em 2em var(--heart4-shine), 3em 2em var(--heart4-primary), 4em 2em var(--heart4-primary), 5em 2em var(--heart4-primary), 6em 2em var(--heart4-primary), 7em 2em var(--heart4-primary), 1em 3em var(--heart4-primary), 2em 3em var(--heart4-primary), 3em 3em var(--heart4-primary), 4em 3em var(--heart4-primary), 5em 3em var(--heart4-primary), 6em 3em var(--heart4-primary), 7em 3em var(--heart4-primary), 1em 4em var(--heart4-secondary), 2em 4em var(--heart4-primary), 3em 4em var(--heart4-primary), 4em 4em var(--heart4-primary), 5em 4em var(--heart4-primary), 6em 4em var(--heart4-primary), 7em 4em var(--heart4-primary), 2em 5em var(--heart4-secondary), 3em 5em var(--heart4-primary), 4em 5em var(--heart4-primary), 5em 5em var(--heart4-primary), 6em 5em var(--heart4-secondary), 3em 6em var(--heart4-secondary), 4em 6em var(--heart4-primary), 5em 6em var(--heart4-secondary), 4em 7em var(--heart4-secondary);
}
.heart4-outline {
-webkit-box-shadow: 2em 0em var(--heart4-outline), 3em 0em var(--heart4-outline), 5em 0em var(--heart4-outline), 6em 0em var(--heart4-outline), 1em 1em var(--heart4-outline), 4em 1em var(--heart4-outline), 7em 1em var(--heart4-outline), 0em 2em var(--heart4-outline), 8em 2em var(--heart4-outline), 0em 3em var(--heart4-outline), 8em 3em var(--heart4-outline), 0em 4em var(--heart4-outline), 8em 4em var(--heart4-outline), 1em 5em var(--heart4-outline), 7em 5em var(--heart4-outline), 2em 6em var(--heart4-outline), 6em 6em var(--heart4-outline), 3em 7em var(--heart4-outline), 5em 7em var(--heart4-outline), 4em 8em var(--heart4-outline);
box-shadow: 2em 0em var(--heart4-outline), 3em 0em var(--heart4-outline), 5em 0em var(--heart4-outline), 6em 0em var(--heart4-outline), 1em 1em var(--heart4-outline), 4em 1em var(--heart4-outline), 7em 1em var(--heart4-outline), 0em 2em var(--heart4-outline), 8em 2em var(--heart4-outline), 0em 3em var(--heart4-outline), 8em 3em var(--heart4-outline), 0em 4em var(--heart4-outline), 8em 4em var(--heart4-outline), 1em 5em var(--heart4-outline), 7em 5em var(--heart4-outline), 2em 6em var(--heart4-outline), 6em 6em var(--heart4-outline), 3em 7em var(--heart4-outline), 5em 7em var(--heart4-outline), 4em 8em var(--heart4-outline);
}
.heart4-outline-special {
-webkit-box-shadow: 2em 0em var(--heart4-outline-special), 3em 0em var(--heart4-outline-special), 5em 0em var(--heart4-outline-special), 6em 0em var(--heart4-outline-special), 1em 1em var(--heart4-outline-special), 4em 1em var(--heart4-outline-special), 7em 1em var(--heart4-outline-special), 0em 2em var(--heart4-outline-special), 8em 2em var(--heart4-outline-special), 0em 3em var(--heart4-outline-special), 8em 3em var(--heart4-outline-special), 0em 4em var(--heart4-outline-special), 8em 4em var(--heart4-outline-special), 1em 5em var(--heart4-outline-special), 7em 5em var(--heart4-outline-special), 2em 6em var(--heart4-outline-special), 6em 6em var(--heart4-outline-special), 3em 7em var(--heart4-outline-special), 5em 7em var(--heart4-outline-special), 4em 8em var(--heart4-outline-special);
box-shadow: 2em 0em var(--heart4-outline-special), 3em 0em var(--heart4-outline-special), 5em 0em var(--heart4-outline-special), 6em 0em var(--heart4-outline-special), 1em 1em var(--heart4-outline-special), 4em 1em var(--heart4-outline-special), 7em 1em var(--heart4-outline-special), 0em 2em var(--heart4-outline-special), 8em 2em var(--heart4-outline-special), 0em 3em var(--heart4-outline-special), 8em 3em var(--heart4-outline-special), 0em 4em var(--heart4-outline-special), 8em 4em var(--heart4-outline-special), 1em 5em var(--heart4-outline-special), 7em 5em var(--heart4-outline-special), 2em 6em var(--heart4-outline-special), 6em 6em var(--heart4-outline-special), 3em 7em var(--heart4-outline-special), 5em 7em var(--heart4-outline-special), 4em 8em var(--heart4-outline-special);
}
.heart5-fill {
-webkit-box-shadow: 2em 1em var(--heart5-primary), 3em 1em var(--heart5-primary), 5em 1em var(--heart5-primary), 6em 1em var(--heart5-primary), 1em 2em var(--heart5-primary), 2em 2em var(--heart5-shine), 3em 2em var(--heart5-primary), 4em 2em var(--heart5-primary), 5em 2em var(--heart5-primary), 6em 2em var(--heart5-primary), 7em 2em var(--heart5-primary), 1em 3em var(--heart5-primary), 2em 3em var(--heart5-primary), 3em 3em var(--heart5-primary), 4em 3em var(--heart5-primary), 5em 3em var(--heart5-primary), 6em 3em var(--heart5-primary), 7em 3em var(--heart5-primary), 1em 4em var(--heart5-secondary), 2em 4em var(--heart5-primary), 3em 4em var(--heart5-primary), 4em 4em var(--heart5-primary), 5em 4em var(--heart5-primary), 6em 4em var(--heart5-primary), 7em 4em var(--heart5-primary), 2em 5em var(--heart5-secondary), 3em 5em var(--heart5-primary), 4em 5em var(--heart5-primary), 5em 5em var(--heart5-primary), 6em 5em var(--heart5-secondary), 3em 6em var(--heart5-secondary), 4em 6em var(--heart5-primary), 5em 6em var(--heart5-secondary), 4em 7em var(--heart5-secondary);
box-shadow: 2em 1em var(--heart5-primary), 3em 1em var(--heart5-primary), 5em 1em var(--heart5-primary), 6em 1em var(--heart5-primary), 1em 2em var(--heart5-primary), 2em 2em var(--heart5-shine), 3em 2em var(--heart5-primary), 4em 2em var(--heart5-primary), 5em 2em var(--heart5-primary), 6em 2em var(--heart5-primary), 7em 2em var(--heart5-primary), 1em 3em var(--heart5-primary), 2em 3em var(--heart5-primary), 3em 3em var(--heart5-primary), 4em 3em var(--heart5-primary), 5em 3em var(--heart5-primary), 6em 3em var(--heart5-primary), 7em 3em var(--heart5-primary), 1em 4em var(--heart5-secondary), 2em 4em var(--heart5-primary), 3em 4em var(--heart5-primary), 4em 4em var(--heart5-primary), 5em 4em var(--heart5-primary), 6em 4em var(--heart5-primary), 7em 4em var(--heart5-primary), 2em 5em var(--heart5-secondary), 3em 5em var(--heart5-primary), 4em 5em var(--heart5-primary), 5em 5em var(--heart5-primary), 6em 5em var(--heart5-secondary), 3em 6em var(--heart5-secondary), 4em 6em var(--heart5-primary), 5em 6em var(--heart5-secondary), 4em 7em var(--heart5-secondary);
}
.heart5-outline {
-webkit-box-shadow: 2em 0em var(--heart5-outline), 3em 0em var(--heart5-outline), 5em 0em var(--heart5-outline), 6em 0em var(--heart5-outline), 1em 1em var(--heart5-outline), 4em 1em var(--heart5-outline), 7em 1em var(--heart5-outline), 0em 2em var(--heart5-outline), 8em 2em var(--heart5-outline), 0em 3em var(--heart5-outline), 8em 3em var(--heart5-outline), 0em 4em var(--heart5-outline), 8em 4em var(--heart5-outline), 1em 5em var(--heart5-outline), 7em 5em var(--heart5-outline), 2em 6em var(--heart5-outline), 6em 6em var(--heart5-outline), 3em 7em var(--heart5-outline), 5em 7em var(--heart5-outline), 4em 8em var(--heart5-outline);
box-shadow: 2em 0em var(--heart5-outline), 3em 0em var(--heart5-outline), 5em 0em var(--heart5-outline), 6em 0em var(--heart5-outline), 1em 1em var(--heart5-outline), 4em 1em var(--heart5-outline), 7em 1em var(--heart5-outline), 0em 2em var(--heart5-outline), 8em 2em var(--heart5-outline), 0em 3em var(--heart5-outline), 8em 3em var(--heart5-outline), 0em 4em var(--heart5-outline), 8em 4em var(--heart5-outline), 1em 5em var(--heart5-outline), 7em 5em var(--heart5-outline), 2em 6em var(--heart5-outline), 6em 6em var(--heart5-outline), 3em 7em var(--heart5-outline), 5em 7em var(--heart5-outline), 4em 8em var(--heart5-outline);
}
.heart5-outline-special {
-webkit-box-shadow: 2em 0em var(--heart5-outline-special), 3em 0em var(--heart5-outline-special), 5em 0em var(--heart5-outline-special), 6em 0em var(--heart5-outline-special), 1em 1em var(--heart5-outline-special), 4em 1em var(--heart5-outline-special), 7em 1em var(--heart5-outline-special), 0em 2em var(--heart5-outline-special), 8em 2em var(--heart5-outline-special), 0em 3em var(--heart5-outline-special), 8em 3em var(--heart5-outline-special), 0em 4em var(--heart5-outline-special), 8em 4em var(--heart5-outline-special), 1em 5em var(--heart5-outline-special), 7em 5em var(--heart5-outline-special), 2em 6em var(--heart5-outline-special), 6em 6em var(--heart5-outline-special), 3em 7em var(--heart5-outline-special), 5em 7em var(--heart5-outline-special), 4em 8em var(--heart5-outline-special);
box-shadow: 2em 0em var(--heart5-outline-special), 3em 0em var(--heart5-outline-special), 5em 0em var(--heart5-outline-special), 6em 0em var(--heart5-outline-special), 1em 1em var(--heart5-outline-special), 4em 1em var(--heart5-outline-special), 7em 1em var(--heart5-outline-special), 0em 2em var(--heart5-outline-special), 8em 2em var(--heart5-outline-special), 0em 3em var(--heart5-outline-special), 8em 3em var(--heart5-outline-special), 0em 4em var(--heart5-outline-special), 8em 4em var(--heart5-outline-special), 1em 5em var(--heart5-outline-special), 7em 5em var(--heart5-outline-special), 2em 6em var(--heart5-outline-special), 6em 6em var(--heart5-outline-special), 3em 7em var(--heart5-outline-special), 5em 7em var(--heart5-outline-special), 4em 8em var(--heart5-outline-special);
}
.heart6-fill {
-webkit-box-shadow: 2em 1em var(--heart6-primary), 3em 1em var(--heart6-primary), 5em 1em var(--heart6-primary), 6em 1em var(--heart6-primary), 1em 2em var(--heart6-primary), 2em 2em var(--heart6-shine), 3em 2em var(--heart6-primary), 4em 2em var(--heart6-primary), 5em 2em var(--heart6-primary), 6em 2em var(--heart6-primary), 7em 2em var(--heart6-primary), 1em 3em var(--heart6-primary), 2em 3em var(--heart6-primary), 3em 3em var(--heart6-primary), 4em 3em var(--heart6-primary), 5em 3em var(--heart6-primary), 6em 3em var(--heart6-primary), 7em 3em var(--heart6-primary), 1em 4em var(--heart6-secondary), 2em 4em var(--heart6-primary), 3em 4em var(--heart6-primary), 4em 4em var(--heart6-primary), 5em 4em var(--heart6-primary), 6em 4em var(--heart6-primary), 7em 4em var(--heart6-primary), 2em 5em var(--heart6-secondary), 3em 5em var(--heart6-primary), 4em 5em var(--heart6-primary), 5em 5em var(--heart6-primary), 6em 5em var(--heart6-secondary), 3em 6em var(--heart6-secondary), 4em 6em var(--heart6-primary), 5em 6em var(--heart6-secondary), 4em 7em var(--heart6-secondary);
box-shadow: 2em 1em var(--heart6-primary), 3em 1em var(--heart6-primary), 5em 1em var(--heart6-primary), 6em 1em var(--heart6-primary), 1em 2em var(--heart6-primary), 2em 2em var(--heart6-shine), 3em 2em var(--heart6-primary), 4em 2em var(--heart6-primary), 5em 2em var(--heart6-primary), 6em 2em var(--heart6-primary), 7em 2em var(--heart6-primary), 1em 3em var(--heart6-primary), 2em 3em var(--heart6-primary), 3em 3em var(--heart6-primary), 4em 3em var(--heart6-primary), 5em 3em var(--heart6-primary), 6em 3em var(--heart6-primary), 7em 3em var(--heart6-primary), 1em 4em var(--heart6-secondary), 2em 4em var(--heart6-primary), 3em 4em var(--heart6-primary), 4em 4em var(--heart6-primary), 5em 4em var(--heart6-primary), 6em 4em var(--heart6-primary), 7em 4em var(--heart6-primary), 2em 5em var(--heart6-secondary), 3em 5em var(--heart6-primary), 4em 5em var(--heart6-primary), 5em 5em var(--heart6-primary), 6em 5em var(--heart6-secondary), 3em 6em var(--heart6-secondary), 4em 6em var(--heart6-primary), 5em 6em var(--heart6-secondary), 4em 7em var(--heart6-secondary);
}
.heart6-outline {
-webkit-box-shadow: 2em 0em var(--heart6-outline), 3em 0em var(--heart6-outline), 5em 0em var(--heart6-outline), 6em 0em var(--heart6-outline), 1em 1em var(--heart6-outline), 4em 1em var(--heart6-outline), 7em 1em var(--heart6-outline), 0em 2em var(--heart6-outline), 8em 2em var(--heart6-outline), 0em 3em var(--heart6-outline), 8em 3em var(--heart6-outline), 0em 4em var(--heart6-outline), 8em 4em var(--heart6-outline), 1em 5em var(--heart6-outline), 7em 5em var(--heart6-outline), 2em 6em var(--heart6-outline), 6em 6em var(--heart6-outline), 3em 7em var(--heart6-outline), 5em 7em var(--heart6-outline), 4em 8em var(--heart6-outline);
box-shadow: 2em 0em var(--heart6-outline), 3em 0em var(--heart6-outline), 5em 0em var(--heart6-outline), 6em 0em var(--heart6-outline), 1em 1em var(--heart6-outline), 4em 1em var(--heart6-outline), 7em 1em var(--heart6-outline), 0em 2em var(--heart6-outline), 8em 2em var(--heart6-outline), 0em 3em var(--heart6-outline), 8em 3em var(--heart6-outline), 0em 4em var(--heart6-outline), 8em 4em var(--heart6-outline), 1em 5em var(--heart6-outline), 7em 5em var(--heart6-outline), 2em 6em var(--heart6-outline), 6em 6em var(--heart6-outline), 3em 7em var(--heart6-outline), 5em 7em var(--heart6-outline), 4em 8em var(--heart6-outline);
}
.heart6-outline-special {
-webkit-box-shadow: 2em 0em var(--heart6-outline-special), 3em 0em var(--heart6-outline-special), 5em 0em var(--heart6-outline-special), 6em 0em var(--heart6-outline-special), 1em 1em var(--heart6-outline-special), 4em 1em var(--heart6-outline-special), 7em 1em var(--heart6-outline-special), 0em 2em var(--heart6-outline-special), 8em 2em var(--heart6-outline-special), 0em 3em var(--heart6-outline-special), 8em 3em var(--heart6-outline-special), 0em 4em var(--heart6-outline-special), 8em 4em var(--heart6-outline-special), 1em 5em var(--heart6-outline-special), 7em 5em var(--heart6-outline-special), 2em 6em var(--heart6-outline-special), 6em 6em var(--heart6-outline-special), 3em 7em var(--heart6-outline-special), 5em 7em var(--heart6-outline-special), 4em 8em var(--heart6-outline-special);
box-shadow: 2em 0em var(--heart6-outline-special), 3em 0em var(--heart6-outline-special), 5em 0em var(--heart6-outline-special), 6em 0em var(--heart6-outline-special), 1em 1em var(--heart6-outline-special), 4em 1em var(--heart6-outline-special), 7em 1em var(--heart6-outline-special), 0em 2em var(--heart6-outline-special), 8em 2em var(--heart6-outline-special), 0em 3em var(--heart6-outline-special), 8em 3em var(--heart6-outline-special), 0em 4em var(--heart6-outline-special), 8em 4em var(--heart6-outline-special), 1em 5em var(--heart6-outline-special), 7em 5em var(--heart6-outline-special), 2em 6em var(--heart6-outline-special), 6em 6em var(--heart6-outline-special), 3em 7em var(--heart6-outline-special), 5em 7em var(--heart6-outline-special), 4em 8em var(--heart6-outline-special);
}
.heart7-fill {
-webkit-box-shadow: 2em 1em var(--heart7-primary), 3em 1em var(--heart7-primary), 5em 1em var(--heart7-primary), 6em 1em var(--heart7-primary), 1em 2em var(--heart7-primary), 2em 2em var(--heart7-shine), 3em 2em var(--heart7-primary), 4em 2em var(--heart7-primary), 5em 2em var(--heart7-primary), 6em 2em var(--heart7-primary), 7em 2em var(--heart7-primary), 1em 3em var(--heart7-primary), 2em 3em var(--heart7-primary), 3em 3em var(--heart7-primary), 4em 3em var(--heart7-primary), 5em 3em var(--heart7-primary), 6em 3em var(--heart7-primary), 7em 3em var(--heart7-primary), 1em 4em var(--heart7-secondary), 2em 4em var(--heart7-primary), 3em 4em var(--heart7-primary), 4em 4em var(--heart7-primary), 5em 4em var(--heart7-primary), 6em 4em var(--heart7-primary), 7em 4em var(--heart7-primary), 2em 5em var(--heart7-secondary), 3em 5em var(--heart7-primary), 4em 5em var(--heart7-primary), 5em 5em var(--heart7-primary), 6em 5em var(--heart7-secondary), 3em 6em var(--heart7-secondary), 4em 6em var(--heart7-primary), 5em 6em var(--heart7-secondary), 4em 7em var(--heart7-secondary);
box-shadow: 2em 1em var(--heart7-primary), 3em 1em var(--heart7-primary), 5em 1em var(--heart7-primary), 6em 1em var(--heart7-primary), 1em 2em var(--heart7-primary), 2em 2em var(--heart7-shine), 3em 2em var(--heart7-primary), 4em 2em var(--heart7-primary), 5em 2em var(--heart7-primary), 6em 2em var(--heart7-primary), 7em 2em var(--heart7-primary), 1em 3em var(--heart7-primary), 2em 3em var(--heart7-primary), 3em 3em var(--heart7-primary), 4em 3em var(--heart7-primary), 5em 3em var(--heart7-primary), 6em 3em var(--heart7-primary), 7em 3em var(--heart7-primary), 1em 4em var(--heart7-secondary), 2em 4em var(--heart7-primary), 3em 4em var(--heart7-primary), 4em 4em var(--heart7-primary), 5em 4em var(--heart7-primary), 6em 4em var(--heart7-primary), 7em 4em var(--heart7-primary), 2em 5em var(--heart7-secondary), 3em 5em var(--heart7-primary), 4em 5em var(--heart7-primary), 5em 5em var(--heart7-primary), 6em 5em var(--heart7-secondary), 3em 6em var(--heart7-secondary), 4em 6em var(--heart7-primary), 5em 6em var(--heart7-secondary), 4em 7em var(--heart7-secondary);
}
.heart7-outline {
-webkit-box-shadow: 2em 0em var(--heart7-outline), 3em 0em var(--heart7-outline), 5em 0em var(--heart7-outline), 6em 0em var(--heart7-outline), 1em 1em var(--heart7-outline), 4em 1em var(--heart7-outline), 7em 1em var(--heart7-outline), 0em 2em var(--heart7-outline), 8em 2em var(--heart7-outline), 0em 3em var(--heart7-outline), 8em 3em var(--heart7-outline), 0em 4em var(--heart7-outline), 8em 4em var(--heart7-outline), 1em 5em var(--heart7-outline), 7em 5em var(--heart7-outline), 2em 6em var(--heart7-outline), 6em 6em var(--heart7-outline), 3em 7em var(--heart7-outline), 5em 7em var(--heart7-outline), 4em 8em var(--heart7-outline);
box-shadow: 2em 0em var(--heart7-outline), 3em 0em var(--heart7-outline), 5em 0em var(--heart7-outline), 6em 0em var(--heart7-outline), 1em 1em var(--heart7-outline), 4em 1em var(--heart7-outline), 7em 1em var(--heart7-outline), 0em 2em var(--heart7-outline), 8em 2em var(--heart7-outline), 0em 3em var(--heart7-outline), 8em 3em var(--heart7-outline), 0em 4em var(--heart7-outline), 8em 4em var(--heart7-outline), 1em 5em var(--heart7-outline), 7em 5em var(--heart7-outline), 2em 6em var(--heart7-outline), 6em 6em var(--heart7-outline), 3em 7em var(--heart7-outline), 5em 7em var(--heart7-outline), 4em 8em var(--heart7-outline);
}
.heart7-outline-special {
-webkit-box-shadow: 2em 0em var(--heart7-outline-special), 3em 0em var(--heart7-outline-special), 5em 0em var(--heart7-outline-special), 6em 0em var(--heart7-outline-special), 1em 1em var(--heart7-outline-special), 4em 1em var(--heart7-outline-special), 7em 1em var(--heart7-outline-special), 0em 2em var(--heart7-outline-special), 8em 2em var(--heart7-outline-special), 0em 3em var(--heart7-outline-special), 8em 3em var(--heart7-outline-special), 0em 4em var(--heart7-outline-special), 8em 4em var(--heart7-outline-special), 1em 5em var(--heart7-outline-special), 7em 5em var(--heart7-outline-special), 2em 6em var(--heart7-outline-special), 6em 6em var(--heart7-outline-special), 3em 7em var(--heart7-outline-special), 5em 7em var(--heart7-outline-special), 4em 8em var(--heart7-outline-special);
box-shadow: 2em 0em var(--heart7-outline-special), 3em 0em var(--heart7-outline-special), 5em 0em var(--heart7-outline-special), 6em 0em var(--heart7-outline-special), 1em 1em var(--heart7-outline-special), 4em 1em var(--heart7-outline-special), 7em 1em var(--heart7-outline-special), 0em 2em var(--heart7-outline-special), 8em 2em var(--heart7-outline-special), 0em 3em var(--heart7-outline-special), 8em 3em var(--heart7-outline-special), 0em 4em var(--heart7-outline-special), 8em 4em var(--heart7-outline-special), 1em 5em var(--heart7-outline-special), 7em 5em var(--heart7-outline-special), 2em 6em var(--heart7-outline-special), 6em 6em var(--heart7-outline-special), 3em 7em var(--heart7-outline-special), 5em 7em var(--heart7-outline-special), 4em 8em var(--heart7-outline-special);
}
.heart8-fill {
-webkit-box-shadow: 2em 1em var(--heart8-primary), 3em 1em var(--heart8-primary), 5em 1em var(--heart8-primary), 6em 1em var(--heart8-primary), 1em 2em var(--heart8-primary), 2em 2em var(--heart8-shine), 3em 2em var(--heart8-primary), 4em 2em var(--heart8-primary), 5em 2em var(--heart8-primary), 6em 2em var(--heart8-primary), 7em 2em var(--heart8-primary), 1em 3em var(--heart8-primary), 2em 3em var(--heart8-primary), 3em 3em var(--heart8-primary), 4em 3em var(--heart8-primary), 5em 3em var(--heart8-primary), 6em 3em var(--heart8-primary), 7em 3em var(--heart8-primary), 1em 4em var(--heart8-secondary), 2em 4em var(--heart8-primary), 3em 4em var(--heart8-primary), 4em 4em var(--heart8-primary), 5em 4em var(--heart8-primary), 6em 4em var(--heart8-primary), 7em 4em var(--heart8-primary), 2em 5em var(--heart8-secondary), 3em 5em var(--heart8-primary), 4em 5em var(--heart8-primary), 5em 5em var(--heart8-primary), 6em 5em var(--heart8-secondary), 3em 6em var(--heart8-secondary), 4em 6em var(--heart8-primary), 5em 6em var(--heart8-secondary), 4em 7em var(--heart8-secondary);
box-shadow: 2em 1em var(--heart8-primary), 3em 1em var(--heart8-primary), 5em 1em var(--heart8-primary), 6em 1em var(--heart8-primary), 1em 2em var(--heart8-primary), 2em 2em var(--heart8-shine), 3em 2em var(--heart8-primary), 4em 2em var(--heart8-primary), 5em 2em var(--heart8-primary), 6em 2em var(--heart8-primary), 7em 2em var(--heart8-primary), 1em 3em var(--heart8-primary), 2em 3em var(--heart8-primary), 3em 3em var(--heart8-primary), 4em 3em var(--heart8-primary), 5em 3em var(--heart8-primary), 6em 3em var(--heart8-primary), 7em 3em var(--heart8-primary), 1em 4em var(--heart8-secondary), 2em 4em var(--heart8-primary), 3em 4em var(--heart8-primary), 4em 4em var(--heart8-primary), 5em 4em var(--heart8-primary), 6em 4em var(--heart8-primary), 7em 4em var(--heart8-primary), 2em 5em var(--heart8-secondary), 3em 5em var(--heart8-primary), 4em 5em var(--heart8-primary), 5em 5em var(--heart8-primary), 6em 5em var(--heart8-secondary), 3em 6em var(--heart8-secondary), 4em 6em var(--heart8-primary), 5em 6em var(--heart8-secondary), 4em 7em var(--heart8-secondary);
}
.heart8-outline {
-webkit-box-shadow: 2em 0em var(--heart8-outline), 3em 0em var(--heart8-outline), 5em 0em var(--heart8-outline), 6em 0em var(--heart8-outline), 1em 1em var(--heart8-outline), 4em 1em var(--heart8-outline), 7em 1em var(--heart8-outline), 0em 2em var(--heart8-outline), 8em 2em var(--heart8-outline), 0em 3em var(--heart8-outline), 8em 3em var(--heart8-outline), 0em 4em var(--heart8-outline), 8em 4em var(--heart8-outline), 1em 5em var(--heart8-outline), 7em 5em var(--heart8-outline), 2em 6em var(--heart8-outline), 6em 6em var(--heart8-outline), 3em 7em var(--heart8-outline), 5em 7em var(--heart8-outline), 4em 8em var(--heart8-outline);
box-shadow: 2em 0em var(--heart8-outline), 3em 0em var(--heart8-outline), 5em 0em var(--heart8-outline), 6em 0em var(--heart8-outline), 1em 1em var(--heart8-outline), 4em 1em var(--heart8-outline), 7em 1em var(--heart8-outline), 0em 2em var(--heart8-outline), 8em 2em var(--heart8-outline), 0em 3em var(--heart8-outline), 8em 3em var(--heart8-outline), 0em 4em var(--heart8-outline), 8em 4em var(--heart8-outline), 1em 5em var(--heart8-outline), 7em 5em var(--heart8-outline), 2em 6em var(--heart8-outline), 6em 6em var(--heart8-outline), 3em 7em var(--heart8-outline), 5em 7em var(--heart8-outline), 4em 8em var(--heart8-outline);
}
.heart8-outline-special {
-webkit-box-shadow: 2em 0em var(--heart8-outline-special), 3em 0em var(--heart8-outline-special), 5em 0em var(--heart8-outline-special), 6em 0em var(--heart8-outline-special), 1em 1em var(--heart8-outline-special), 4em 1em var(--heart8-outline-special), 7em 1em var(--heart8-outline-special), 0em 2em var(--heart8-outline-special), 8em 2em var(--heart8-outline-special), 0em 3em var(--heart8-outline-special), 8em 3em var(--heart8-outline-special), 0em 4em var(--heart8-outline-special), 8em 4em var(--heart8-outline-special), 1em 5em var(--heart8-outline-special), 7em 5em var(--heart8-outline-special), 2em 6em var(--heart8-outline-special), 6em 6em var(--heart8-outline-special), 3em 7em var(--heart8-outline-special), 5em 7em var(--heart8-outline-special), 4em 8em var(--heart8-outline-special);
box-shadow: 2em 0em var(--heart8-outline-special), 3em 0em var(--heart8-outline-special), 5em 0em var(--heart8-outline-special), 6em 0em var(--heart8-outline-special), 1em 1em var(--heart8-outline-special), 4em 1em var(--heart8-outline-special), 7em 1em var(--heart8-outline-special), 0em 2em var(--heart8-outline-special), 8em 2em var(--heart8-outline-special), 0em 3em var(--heart8-outline-special), 8em 3em var(--heart8-outline-special), 0em 4em var(--heart8-outline-special), 8em 4em var(--heart8-outline-special), 1em 5em var(--heart8-outline-special), 7em 5em var(--heart8-outline-special), 2em 6em var(--heart8-outline-special), 6em 6em var(--heart8-outline-special), 3em 7em var(--heart8-outline-special), 5em 7em var(--heart8-outline-special), 4em 8em var(--heart8-outline-special);
}
Raw
3 - js.js
var tierCount = 0;
var progressCount = 1;
var slData = {};
var slSettings = {};
var tierLimit = 110;
var heartAmount = 100;
var totalHearts = 0;
document.addEventListener('goalLoad', function(obj) {
console.log(obj.detail);
slSettings = obj.detail.settings;
applySettings();
$('#bar').empty();
updateGlobarVars(obj);
setBackground();
for (let i=1; i <= heartAmount; i++)
addHeart(i);
});
document.addEventListener('goalEvent', function(obj) {
console.log(obj.detail);
updateGlobarVars(obj);
setBackground();
for (let i=1; i <= heartAmount; i++)
updateHeart(i);
});
function updateGlobarVars(obj){
slData = obj.detail.amount;
heartAmount = slSettings.custom_json.heart_amount.value;
totalHearts = Math.floor(slData.current / slSettings.custom_json.subs_per_heart.value);
tierLimit = heartAmount ** 2;
if (slSettings.custom_json.rank_up_point.value === "after_last")
tierLimit += heartAmount;
tierCount = Math.floor(totalHearts/tierLimit);
progressCount = Math.floor((totalHearts-(tierCount * tierLimit))/heartAmount);
}
function setBackground() {
for(var j = slSettings.custom_json.max_tier.value; j > 0; j--) {
if(slSettings.custom_json.max_tier.value >= j && tierCount >= j) {
$('#bar').css("background", `var(--tier${j}-background)`);
return;
}
}
$('#bar').css("background", "var(--tier0-background)");
}
function addHeart(i) {
$('#bar').append(`<div id='heart-container-${i}' class='heart-container ${getAnimateClass(i)}'></div>`);
$(`#heart-container-${i}`).append(`<div id='outline-block-${i}' class='block'></div>`);
$(`#outline-block-${i}`).append(
`<span id='heart-outline-${i}' class='heart ${getOutlineClass(i)}'></span>`
);
$(`#heart-container-${i}`).append(`<div id='fill-block-${i}' class='block'></div>`);
$(`#fill-block-${i}`).append(
`<span id='heart-fill-${i}' class='heart ${getFillClass(i)}'></span>`
);
}
function updateHeart(i) {
$(`#heart-container-${i}`).removeClass();
$(`#heart-outline-${i}`).removeClass();
$(`#heart-fill-${i}`).removeClass();
$(`#heart-container-${i}`).addClass(`heart-container ${getAnimateClass(i)}`);
$(`#heart-outline-${i}`).addClass(`heart ${getOutlineClass(i)}`);
$(`#heart-fill-${i}`).addClass(`heart ${getFillClass(i)}`);
}
function getOutlineClass(i) {
for(var j = slSettings.custom_json.max_tier.value; j > 0; j--) {
if (slSettings.custom_json.max_tier.value === j && tierCount >= j)
return `heart${j}-outline`;
}
if (progressCount >= i)
return `heart${tierCount+1}-outline-special`;
return `heart${tierCount+1}-outline`;
}
function getFillClass(i) {
for(var j = slSettings.custom_json.max_tier.value; j > 0; j--) {
if (slSettings.custom_json.max_tier.value === j && tierCount >= j)
return `heart${j}-fill`;
}
if (i <= (totalHearts-(tierCount * tierLimit))%heartAmount)
return `heart${tierCount+1}-fill`;
return `heart${tierCount}-fill`
}
function getAnimateClass(i) {
if (totalHearts < slSettings.custom_json.animate_stop_threshold.value)
return `animate__animated animate__${slSettings.custom_json.animate_type_begin.value} animate__infinite animate__delay-${i%3}s`;
if (tierCount >= slSettings.custom_json.max_tier.value)
return `animate__animated animate__${slSettings.custom_json.animate_type_end.value} animate__infinite animate__delay-${i%3}s`;
return "";
}
function applySettings() {
document.documentElement.style.setProperty('--bar-bevel', slSettings.custom_json.bar_bevel.value + "px");
document.documentElement.style.setProperty('--bar-border-color', slSettings.custom_json.bar_border_color.value);
document.documentElement.style.setProperty('--bar-border-style', slSettings.custom_json.bar_border_style.value);
document.documentElement.style.setProperty('--bar-border-thickness', slSettings.custom_json.bar_border_thickness.value + "px");
document.documentElement.style.setProperty('--animate-duration', slSettings.custom_json.animate_duration.value + "ms");
document.documentElement.style.setProperty('--animate-delay', slSettings.custom_json.animate_delay.value + "ms");
document.documentElement.style.setProperty('--tier0-background', slSettings.custom_json.empty_background.value);
document.documentElement.style.setProperty('--heart0-primary', slSettings.custom_json.empty_primary.value);
document.documentElement.style.setProperty('--heart0-secondary', slSettings.custom_json.empty_primary.value);
document.documentElement.style.setProperty('--heart0-shine', slSettings.custom_json.empty_primary.value);
for(var i = 1; i <= slSettings.custom_json.max_tier.value; i++) {
document.documentElement.style.setProperty(`--tier${i}-background`, slSettings.custom_json[`tier${i}_background`].value);
document.documentElement.style.setProperty(`--heart${i}-primary`, slSettings.custom_json[`heart${i}_primary`].value);
document.documentElement.style.setProperty(`--heart${i}-secondary`, slSettings.custom_json[`heart${i}_secondary`].value);
document.documentElement.style.setProperty(`--heart${i}-shine`, slSettings.custom_json[`heart${i}_shine`].value);
document.documentElement.style.setProperty(`--heart${i}-outline`, slSettings.custom_json[`heart${i}_outline`].value);
document.documentElement.style.setProperty(`--heart${i}-outline-special`, slSettings.custom_json[`heart${i}_outline_special`].value);
}
}
Raw
4 - custom fields.json
{
"heart_amount": {
"label": "How Many Heart Containers",
"type": "textfield",
"value": "10"
},
"subs_per_heart": {
"label": "How Many Subs to Fill a Single Heart",
"type": "textfield",
"value": "1"
},
"rank_up_point": {
"label": "Rank Up Rollover Point",
"type": "dropdown",
"options": {
"at_last": "At Last Heart (Maxed Bar = Heart Container Count^2 * Max Tier)",
"after_last": "After Last Heart (Maxed Bar = (Heart Container Count^2 + Heart Container Count) * Max Tier)"
},
"value": "at_last"
},
"max_tier": {
"label": "Set Max Tier",
"type": "dropdown",
"options": {
"1": "1 Tier",
"2": "2 Tiers",
"3": "3 Tiers",
"4": "4 Tiers",
"5": "5 Tiers",
"6": "6 Tiers",
"7": "7 Tiers",
"8": "8 Tiers"
},
"value": "8"
},
"bar_bevel": {
"label": "Bar Bevel",
"type": "slider",
"name": "",
"value": 25,
"max": 200,
"min": 0,
"steps": 1
},
"bar_border_style": {
"label": "Bar Border Style",
"type": "dropdown",
"options": {
"dotted": "Dotted",
"dashed": "Dashed",
"solid": "Solid",
"double": "Double",
"groove": "Groove",
"ridge": "Ridge",
"inset": "Inset",
"outset": "Outset",
"none": "None"
},
"value": "solid"
},
"bar_border_thickness": {
"label": "Bar Border Thickness",
"type": "slider",
"name": "",
"value": 10,
"max": 100,
"min": 0,
"steps": 1
},
"bar_border_color": {
"label": "Bar Border Color",
"type": "colorpicker",
"value": "#292929"
},
"animate_type_begin": {
"label": "Beginning Animation Type",
"type": "dropdown",
"options": {
"updown": "Up Down",
"bounce": "Bounce",
"shakeY": "Shake",
"pulse": "Pulse",
"heartBeat": "Heartbeat",
"flip": "Flip"
},
"value": "shakeY"
},
"animate_type_end": {
"label": "Ending Animation Type",
"type": "dropdown",
"options": {
"updown": "Up Down",
"bounce": "Bounce",
"shakeY": "Shake",
"pulse": "Pulse",
"heartBeat": "Heartbeat",
"flip": "Flip"
},
"value": "bounce"
},
"animate_stop_threshold": {
"label": "Stop Animation After This Sub Amount",
"type": "textfield",
"value": "4"
},
"animate_duration": {
"label": "Animation Duration",
"type": "slider",
"name": "",
"value": 1500,
"max": 5000,
"min": 0,
"steps": 50
},
"animate_delay": {
"label": "Animation Delay",
"type": "slider",
"name": "",
"value": 1000,
"max": 5000,
"min": 0,
"steps": 50
},
"empty_background": {
"label": "Empty - Background",
"type": "colorpicker",
"value": "#000000"
},
"empty_primary": {
"label": "Empty Heart - Primary",
"type": "colorpicker",
"value": "#353535"
},
"tier1_background": {
"label": "Tier 1 - Background",
"type": "colorpicker",
"value": "#9b4428"
},
"heart1_primary": {
"label": "Heart 1 - Primary",
"type": "colorpicker",
"value": "#ff1313"
},
"heart1_secondary": {
"label": "Heart 1 - Secondary",
"type": "colorpicker",
"value": "#bb1313"
},
"heart1_shine": {
"label": "Heart 1 - Shine",
"type": "colorpicker",
"value": "#ffffff"
},
"heart1_outline": {
"label": "Heart 1 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart1_outline_special": {
"label": "Heart 1 - Outline Special",
"type": "colorpicker",
"value": "#e47c56"
},
"tier2_background": {
"label": "Tier 2 - Background",
"type": "colorpicker",
"value": "#737373"
},
"heart2_primary": {
"label": "Heart 2 - Primary",
"type": "colorpicker",
"value": "#e47c56"
},
"heart2_secondary": {
"label": "Heart 2 - Secondary",
"type": "colorpicker",
"value": "#c15938"
},
"heart2_shine": {
"label": "Heart 2 - Shine",
"type": "colorpicker",
"value": "#ffc2b2"
},
"heart2_outline": {
"label": "Heart 2 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart2_outline_special": {
"label": "Heart 2 - Outline Special",
"type": "colorpicker",
"value": "#d9d9d9"
},
"tier3_background": {
"label": "Tier 3 - Background",
"type": "colorpicker",
"value": "#bc880a"
},
"heart3_primary": {
"label": "Heart 3 - Primary",
"type": "colorpicker",
"value": "#d9d9d9"
},
"heart3_secondary": {
"label": "Heart 3 - Secondary",
"type": "colorpicker",
"value": "#a9a9a9"
},
"heart3_shine": {
"label": "Heart 3 - Shine",
"type": "colorpicker",
"value": "#fefefe"
},
"heart3_outline": {
"label": "Heart 3 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart3_outline_special": {
"label": "Heart 3 - Outline Special",
"type": "colorpicker",
"value": "#f5b20f"
},
"tier4_background": {
"label": "Tier 4 - Background",
"type": "colorpicker",
"value": "#11418f"
},
"heart4_primary": {
"label": "Heart 4 - Primary",
"type": "colorpicker",
"value": "#f5b20f"
},
"heart4_secondary": {
"label": "Heart 4 - Secondary",
"type": "colorpicker",
"value": "#bc880a"
},
"heart4_shine": {
"label": "Heart 4 - Shine",
"type": "colorpicker",
"value": "#fbc443"
},
"heart4_outline": {
"label": "Heart 4 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart4_outline_special": {
"label": "Heart 4 - Outline Special",
"type": "colorpicker",
"value": "#5b85df"
},
"tier5_background": {
"label": "Tier 5 - Background",
"type": "colorpicker",
"value": "#012d01"
},
"heart5_primary": {
"label": "Heart 5 - Primary",
"type": "colorpicker",
"value": "#5b85df"
},
"heart5_secondary": {
"label": "Heart 5 - Secondary",
"type": "colorpicker",
"value": "#3061c2"
},
"heart5_shine": {
"label": "Heart 5 - Shine",
"type": "colorpicker",
"value": "#7299ed"
},
"heart5_outline": {
"label": "Heart 5 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart5_outline_special": {
"label": "Heart 5 - Outline Special",
"type": "colorpicker",
"value": "#00ab2e"
},
"tier6_background": {
"label": "Tier 6 - Background",
"type": "colorpicker",
"value": "#13737c"
},
"heart6_primary": {
"label": "Heart 6 - Primary",
"type": "colorpicker",
"value": "#00ab2e"
},
"heart6_secondary": {
"label": "Heart 6 - Secondary",
"type": "colorpicker",
"value": "#007d17"
},
"heart6_shine": {
"label": "Heart 6 - Shine",
"type": "colorpicker",
"value": "#aeffcd"
},
"heart6_outline": {
"label": "Heart 6 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart6_outline_special": {
"label": "Heart 6 - Outline Special",
"type": "colorpicker",
"value": "#2dcdb3"
},
"tier7_background": {
"label": "Tier 7 - Background",
"type": "colorpicker",
"value": "#401f17"
},
"heart7_primary": {
"label": "Heart 7 - Primary",
"type": "colorpicker",
"value": "#8bf4e3"
},
"heart7_secondary": {
"label": "Heart 7 - Secondary",
"type": "colorpicker",
"value": "#2dcdb3"
},
"heart7_shine": {
"label": "Heart 7 - Shine",
"type": "colorpicker",
"value": "#d5f8f4"
},
"heart7_outline": {
"label": "Heart 7 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart7_outline_special": {
"label": "Heart 7 - Outline Special",
"type": "colorpicker",
"value": "#66473f"
},
"tier8_background": {
"label": "Tier 8 - Background",
"type": "colorpicker",
"value": "#ffffff"
},
"heart8_primary": {
"label": "Heart 8 - Primary",
"type": "colorpicker",
"value": "#66473f"
},
"heart8_secondary": {
"label": "Heart 8 - Secondary",
"type": "colorpicker",
"value": "#5d332d"
},
"heart8_shine": {
"label": "Heart 8 - Shine",
"type": "colorpicker",
"value": "#98857b"
},
"heart8_outline": {
"label": "Heart 8 - Outline",
"type": "colorpicker",
"value": "#191919"
},
"heart8_outline_special": {
"label": "Heart 8 - Outline Special",
"type": "colorpicker",
"value": "#ffffff"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment