Skip to content

Instantly share code, notes, and snippets.

@bookwyrm

bookwyrm/SassMeister-input-HTML.html

Last active August 29, 2015 14:16
Show Gist options
  • Save bookwyrm/eafd9e4c18368fdab02c to your computer and use it in GitHub Desktop.
Save bookwyrm/eafd9e4c18368fdab02c to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
main.scss
%seg {
opacity: 0;
}
@each $seg in seg_list() {
.sevseg-#{$seg} {
@extend %seg;
}
}
.seven-seg.animating {
@each $seg in seg_list() {
.sevseg-#{$seg} {
@include animation(sevseg-#{$seg} $count_time step-end 0s infinite alternate);
}
}
}
Raw
SassMeister-input-HTML.html
<span class="seven-seg animating">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="44" height="82" viewBox="0, 0, 44, 82">
<g class="Layer_1">
<g class="off-segs">
<path d="M7.041,44 L12,49.209 L11.973,67.143 L6.986,72 L2,67.171 L2,49.101 L7.041,44 z" fill="#DBDADA" class="Shape"/>
<path d="M37.041,10 L42,15.209 L41.973,33.143 L36.986,38 L32,33.171 L32,15.101 L37.041,10 z" fill="#DBDADA" class="Shape"/>
<path d="M37.041,44 L42,49.209 L41.973,67.143 L36.986,72 L32,67.171 L32,49.101 L37.041,44 z" fill="#DBDADA" class="Shape"/>
<path d="M36,41.041 L30.791,46 L12.857,45.973 L8,40.986 L12.829,36 L30.899,36 L36,41.041 z" fill="#DBDADA" class="Shape"/>
<path d="M36,7.041 L30.791,12 L12.857,11.973 L8,6.986 L12.829,2 L30.899,2 L36,7.041 z" fill="#DBDADA" class="Shape"/>
<path d="M36,75.041 L30.791,80 L12.857,79.973 L8,74.986 L12.829,70 L30.899,70 L36,75.041 z" fill="#DBDADA" class="Shape"/>
<path d="M7.041,10 L12,15.209 L11.973,33.143 L6.986,38 L2,33.171 L2,15.101 L7.041,10 z" fill="#DBDADA" class="Shape"/>
</g>
<g class="on-segs">
<path d="M7.041,44 L12,49.209 L11.973,67.143 L6.986,72 L2,67.171 L2,49.101 L7.041,44 z" fill="#CF3B3B" class="sevseg-bl"/>
<path d="M37.041,10 L42,15.209 L41.973,33.143 L36.986,38 L32,33.171 L32,15.101 L37.041,10 z" fill="#CF3B3B" class="sevseg-tr"/>
<path d="M37.041,44 L42,49.209 L41.973,67.143 L36.986,72 L32,67.171 L32,49.101 L37.041,44 z" fill="#CF3B3B" class="sevseg-br"/>
<path d="M36,41.041 L30.791,46 L12.857,45.973 L8,40.986 L12.829,36 L30.899,36 L36,41.041 z" fill="#CF3B3B" class="sevseg-m"/>
<path d="M36,7.041 L30.791,12 L12.857,11.973 L8,6.986 L12.829,2 L30.899,2 L36,7.041 z" fill="#CF3B3B" class="sevseg-t"/>
<path d="M36,75.041 L30.791,80 L12.857,79.973 L8,74.986 L12.829,70 L30.899,70 L36,75.041 z" fill="#CF3B3B" class="sevseg-b"/>
<path d="M7.041,10 L12,15.209 L11.973,33.143 L6.986,38 L2,33.171 L2,15.101 L7.041,10 z" fill="#CF3B3B" class="sevseg-tl"/>
</g>
</g>
</svg>
</span>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$count_to: 9;
$count_time: 9s;
@function seg_list() {
@return tr, br, b, bl, tl, t, m;
}
@function seg_opacity($seg, $number) {
$_return: 0;
$_index: $number + 1;
$seg_mask: (
// seg: 0 1 2 3 4 5 6 7 8 9
tr: 1 1 1 1 1 0 0 1 1 1,
br: 1 1 0 1 1 1 1 1 1 1,
b: 1 0 1 1 0 1 1 0 1 1,
bl: 1 0 1 0 0 0 1 0 1 0,
tl: 1 0 0 0 1 1 1 0 1 1,
t: 1 0 1 1 0 1 1 1 1 1,
m: 0 0 1 1 1 1 1 0 1 1
);
@if map-has-key($seg_mask, $seg) {
$_mask: map-get($seg_mask, $seg);
@if length($_mask) >= $_index {
$_return: nth($_mask, $_index);
}
}
@return $_return;
}
@function seg_animation_percent($seg__slice, $i) {
@return $seg__slice * ($i - 1);
}
@mixin keyframes($animation_name) {
@-moz-keyframes #{$animation_name} {
@content;
}
@-webkit-keyframes #{$animation_name} {
@content;
}
@keyframes #{$animation_name} {
@content;
}
}
@mixin animation($args) {
-moz-animation: $args;
-webkit-animation: $args;
animation: $args;
}
@mixin seg-animation($seg, $count_to) {
$seg__slice: 100%/$count_to;
$seg__opacity: 0;
@include keyframes(sevseg-#{$seg}) {
@for $i from 1 through $count_to {
#{seg_animation_percent($seg__slice, $i)} {
$seg__opacity: seg_opacity($seg, $i);
opacity: $seg__opacity;
}
}
100% {
opacity: $seg__opacity;
}
}
}
@mixin seven-seg-animation($count_to) {
@each $seg in seg_list() {
@include seg-animation($seg, $count_to);
}
}
@include seven-seg-animation($count_to);
%seg {
opacity: 0;
}
@each $seg in seg_list() {
.sevseg-#{$seg} {
@extend %seg;
}
}
.seven-seg.animating {
@each $seg in seg_list() {
.sevseg-#{$seg} {
@include animation(sevseg-#{$seg} $count_time step-end 0s infinite alternate);
}
}
}
Raw
SassMeister-output.css
@-moz-keyframes sevseg-tr {
0% {
opacity: 1;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 1;
}
44.44444% {
opacity: 0;
}
55.55556% {
opacity: 0;
}
66.66667% {
opacity: 1;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes sevseg-tr {
0% {
opacity: 1;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 1;
}
44.44444% {
opacity: 0;
}
55.55556% {
opacity: 0;
}
66.66667% {
opacity: 1;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes sevseg-tr {
0% {
opacity: 1;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 1;
}
44.44444% {
opacity: 0;
}
55.55556% {
opacity: 0;
}
66.66667% {
opacity: 1;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes sevseg-br {
0% {
opacity: 1;
}
11.11111% {
opacity: 0;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 1;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 1;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes sevseg-br {
0% {
opacity: 1;
}
11.11111% {
opacity: 0;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 1;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 1;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes sevseg-br {
0% {
opacity: 1;
}
11.11111% {
opacity: 0;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 1;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 1;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes sevseg-b {
0% {
opacity: 0;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 0;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 0;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes sevseg-b {
0% {
opacity: 0;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 0;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 0;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes sevseg-b {
0% {
opacity: 0;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 0;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 0;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes sevseg-bl {
0% {
opacity: 0;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 0;
}
33.33333% {
opacity: 0;
}
44.44444% {
opacity: 0;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 0;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes sevseg-bl {
0% {
opacity: 0;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 0;
}
33.33333% {
opacity: 0;
}
44.44444% {
opacity: 0;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 0;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes sevseg-bl {
0% {
opacity: 0;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 0;
}
33.33333% {
opacity: 0;
}
44.44444% {
opacity: 0;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 0;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-moz-keyframes sevseg-tl {
0% {
opacity: 0;
}
11.11111% {
opacity: 0;
}
22.22222% {
opacity: 0;
}
33.33333% {
opacity: 1;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 0;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes sevseg-tl {
0% {
opacity: 0;
}
11.11111% {
opacity: 0;
}
22.22222% {
opacity: 0;
}
33.33333% {
opacity: 1;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 0;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes sevseg-tl {
0% {
opacity: 0;
}
11.11111% {
opacity: 0;
}
22.22222% {
opacity: 0;
}
33.33333% {
opacity: 1;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 0;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes sevseg-t {
0% {
opacity: 0;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 0;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 1;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes sevseg-t {
0% {
opacity: 0;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 0;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 1;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes sevseg-t {
0% {
opacity: 0;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 0;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 1;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes sevseg-m {
0% {
opacity: 0;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 1;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 0;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes sevseg-m {
0% {
opacity: 0;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 1;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 0;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes sevseg-m {
0% {
opacity: 0;
}
11.11111% {
opacity: 1;
}
22.22222% {
opacity: 1;
}
33.33333% {
opacity: 1;
}
44.44444% {
opacity: 1;
}
55.55556% {
opacity: 1;
}
66.66667% {
opacity: 0;
}
77.77778% {
opacity: 1;
}
88.88889% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.sevseg-tr, .sevseg-br, .sevseg-b, .sevseg-bl, .sevseg-tl, .sevseg-t, .sevseg-m {
opacity: 0;
}
.seven-seg.animating .sevseg-tr {
-moz-animation: sevseg-tr 9s step-end 0s infinite alternate;
-webkit-animation: sevseg-tr 9s step-end 0s infinite alternate;
animation: sevseg-tr 9s step-end 0s infinite alternate;
}
.seven-seg.animating .sevseg-br {
-moz-animation: sevseg-br 9s step-end 0s infinite alternate;
-webkit-animation: sevseg-br 9s step-end 0s infinite alternate;
animation: sevseg-br 9s step-end 0s infinite alternate;
}
.seven-seg.animating .sevseg-b {
-moz-animation: sevseg-b 9s step-end 0s infinite alternate;
-webkit-animation: sevseg-b 9s step-end 0s infinite alternate;
animation: sevseg-b 9s step-end 0s infinite alternate;
}
.seven-seg.animating .sevseg-bl {
-moz-animation: sevseg-bl 9s step-end 0s infinite alternate;
-webkit-animation: sevseg-bl 9s step-end 0s infinite alternate;
animation: sevseg-bl 9s step-end 0s infinite alternate;
}
.seven-seg.animating .sevseg-tl {
-moz-animation: sevseg-tl 9s step-end 0s infinite alternate;
-webkit-animation: sevseg-tl 9s step-end 0s infinite alternate;
animation: sevseg-tl 9s step-end 0s infinite alternate;
}
.seven-seg.animating .sevseg-t {
-moz-animation: sevseg-t 9s step-end 0s infinite alternate;
-webkit-animation: sevseg-t 9s step-end 0s infinite alternate;
animation: sevseg-t 9s step-end 0s infinite alternate;
}
.seven-seg.animating .sevseg-m {
-moz-animation: sevseg-m 9s step-end 0s infinite alternate;
-webkit-animation: sevseg-m 9s step-end 0s infinite alternate;
animation: sevseg-m 9s step-end 0s infinite alternate;
}
Raw
SassMeister-rendered.html
<span class="seven-seg animating">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="44" height="82" viewBox="0, 0, 44, 82">
<g class="Layer_1">
<g class="off-segs">
<path d="M7.041,44 L12,49.209 L11.973,67.143 L6.986,72 L2,67.171 L2,49.101 L7.041,44 z" fill="#DBDADA" class="Shape"/>
<path d="M37.041,10 L42,15.209 L41.973,33.143 L36.986,38 L32,33.171 L32,15.101 L37.041,10 z" fill="#DBDADA" class="Shape"/>
<path d="M37.041,44 L42,49.209 L41.973,67.143 L36.986,72 L32,67.171 L32,49.101 L37.041,44 z" fill="#DBDADA" class="Shape"/>
<path d="M36,41.041 L30.791,46 L12.857,45.973 L8,40.986 L12.829,36 L30.899,36 L36,41.041 z" fill="#DBDADA" class="Shape"/>
<path d="M36,7.041 L30.791,12 L12.857,11.973 L8,6.986 L12.829,2 L30.899,2 L36,7.041 z" fill="#DBDADA" class="Shape"/>
<path d="M36,75.041 L30.791,80 L12.857,79.973 L8,74.986 L12.829,70 L30.899,70 L36,75.041 z" fill="#DBDADA" class="Shape"/>
<path d="M7.041,10 L12,15.209 L11.973,33.143 L6.986,38 L2,33.171 L2,15.101 L7.041,10 z" fill="#DBDADA" class="Shape"/>
</g>
<g class="on-segs">
<path d="M7.041,44 L12,49.209 L11.973,67.143 L6.986,72 L2,67.171 L2,49.101 L7.041,44 z" fill="#CF3B3B" class="sevseg-bl"/>
<path d="M37.041,10 L42,15.209 L41.973,33.143 L36.986,38 L32,33.171 L32,15.101 L37.041,10 z" fill="#CF3B3B" class="sevseg-tr"/>
<path d="M37.041,44 L42,49.209 L41.973,67.143 L36.986,72 L32,67.171 L32,49.101 L37.041,44 z" fill="#CF3B3B" class="sevseg-br"/>
<path d="M36,41.041 L30.791,46 L12.857,45.973 L8,40.986 L12.829,36 L30.899,36 L36,41.041 z" fill="#CF3B3B" class="sevseg-m"/>
<path d="M36,7.041 L30.791,12 L12.857,11.973 L8,6.986 L12.829,2 L30.899,2 L36,7.041 z" fill="#CF3B3B" class="sevseg-t"/>
<path d="M36,75.041 L30.791,80 L12.857,79.973 L8,74.986 L12.829,70 L30.899,70 L36,75.041 z" fill="#CF3B3B" class="sevseg-b"/>
<path d="M7.041,10 L12,15.209 L11.973,33.143 L6.986,38 L2,33.171 L2,15.101 L7.041,10 z" fill="#CF3B3B" class="sevseg-tl"/>
</g>
</g>
</svg>
</span>
Raw
seg-animation.scss
@mixin seg-animation($seg, $count_to) {
$seg__slice: 100%/$count_to;
$seg__opacity: 0;
@include keyframes(sevseg-#{$seg}) {
@for $i from 1 through $count_to {
#{seg_animation_percent($seg__slice, $i)} {
$seg__opacity: seg_opacity($seg, $i);
opacity: $seg__opacity;
}
}
100% {
opacity: $seg__opacity;
}
}
}
Raw
seg_opacity.scss
@function seg_opacity($seg, $number) {
$_return: 0;
$_index: $number + 1;
$seg_mask: (
// seg: 0 1 2 3 4 5 6 7 8 9
tr: 1 1 1 1 1 0 0 1 1 1,
br: 1 1 0 1 1 1 1 1 1 1,
b: 1 0 1 1 0 1 1 0 1 1,
bl: 1 0 1 0 0 0 1 0 1 0,
tl: 1 0 0 0 1 1 1 0 1 1,
t: 1 0 1 1 0 1 1 1 1 1,
m: 0 0 1 1 1 1 1 0 1 1
);
@if map-has-key($seg_mask, $seg) {
$_mask: map-get($seg_mask, $seg);
@if length($_mask) >= $_index {
$_return: nth($_mask, $_index);
}
}
@return $_return;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment