Skip to content

Instantly share code, notes, and snippets.

@Harrisonkamau

Harrisonkamau/SCSS Mended Heart tribute Pray for Orlando.markdown

Forked from anonymous/SCSS Mended Heart tribute Pray for Orlando.markdown
Created June 14, 2016 11:36
Show Gist options
  • Save Harrisonkamau/b5867ec9f3b84b51c29eaf2f2ff2b4c7 to your computer and use it in GitHub Desktop.
Save Harrisonkamau/b5867ec9f3b84b51c29eaf2f2ff2b4c7 to your computer and use it in GitHub Desktop.
Download ZIP
SCSS Mended Heart tribute Pray for Orlando
Raw
index.jade
.heart
<h1> Pray for Orlando </h1>
Raw
SCSS Mended Heart tribute Pray for Orlando.markdown

SCSS Mended Heart tribute Pray for Orlando

Tribute for all of the lives loss in the Orlando attack @ Pulse nightclub. Mended heart using sass

A Pen by Harrison on CodePen.

License.

Raw
style.scss
$size: 240px;
$s: 240; // $size
$base-color: #dd2525;
@import url(https://fonts.googleapis.com/css?family=Abel);
//-------------------------------------------
h1 {
color: white;
font-family:"Abel",sans-serif;
font-size:60px;
margin-top:275px;
margin-left:625px;
}
$cell: 50.1% / 8;
$color1: red;
$color2: orange;
$color3: yellow;
$color4: green;
$color5: blue;
$color6: purple;
$pattern1: 135deg;
$pattern2: -135deg;
$pattern3: -45deg;
$pattern4: 45deg;
// ------------------------------------------------
body { background-color: black;}
.heart {
width: $size;
height: $size;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
transform: translate(-50%,-50%);
will-change: transform;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: animation 3.2s cubic-bezier(1,0,0,1) 0.5s infinite both alternate;
background-image:
// 1*1
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 1*2
linear-gradient($pattern2, $color6 $cell, transparent $cell),
linear-gradient($pattern4, $color4 $cell, transparent $cell),
// 1*3
linear-gradient($pattern1, $color3 $cell, transparent $cell),
linear-gradient($pattern3, $color1 $cell, transparent $cell),
// 1*4
linear-gradient($pattern2, $color2 $cell, transparent $cell),
// 2*1
linear-gradient($pattern2, $color3 $cell, transparent $cell),
linear-gradient($pattern4, $color5 $cell, transparent $cell),
// 2*2
linear-gradient($pattern1, $color1 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 2*3
linear-gradient($pattern1, $color5 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 2*4
linear-gradient($pattern2, $color4 $cell, transparent $cell),
linear-gradient($pattern4, $color3 $cell, transparent $cell),
// 2*5
linear-gradient($pattern2, $color6 $cell, transparent $cell),
// 3*1
linear-gradient($pattern4, $color1 $cell, transparent $cell),
// 3*2
linear-gradient($pattern1, $color2 $cell, transparent $cell),
linear-gradient($pattern3, $color4 $cell, transparent $cell),
// 3*3
linear-gradient($pattern2, $color3 $cell, transparent $cell),
linear-gradient($pattern4, $color6 $cell, transparent $cell),
// 3*4
linear-gradient($pattern1, $color1 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 3*5
linear-gradient($pattern2, $color2 $cell, transparent $cell),
linear-gradient($pattern4, $color4 $cell, transparent $cell),
// 3*6
linear-gradient($pattern2, $color3 $cell, transparent $cell),
// 4*1
linear-gradient($pattern3, $color2 $cell, transparent $cell),
// 4*2
linear-gradient($pattern1, $color6 $cell, transparent $cell),
linear-gradient($pattern3, $color2 $cell, transparent $cell),
// 4*3
linear-gradient($pattern1, $color1 $cell, transparent $cell),
linear-gradient($pattern3, $color5 $cell, transparent $cell),
// 4*4
linear-gradient($pattern2, $color2 $cell, transparent $cell),
linear-gradient($pattern4, $color1 $cell, transparent $cell),
// 4*5
linear-gradient($pattern1, $color3 $cell, transparent $cell),
linear-gradient($pattern3, $color5 $cell, transparent $cell),
// 4*6
linear-gradient($pattern1, $color1 $cell, transparent $cell),
// 5*1
linear-gradient($pattern1, $color5 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 5*2
linear-gradient($pattern2, $color5 $cell, transparent $cell),
linear-gradient($pattern4, $color3 $cell, transparent $cell),
// 5*3
linear-gradient($pattern1, $color6 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 5*4
linear-gradient($pattern1, $color4 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 5*5
linear-gradient($pattern1, $color6 $cell, transparent $cell),
// 6*1
linear-gradient($pattern4, $color6 $cell, transparent $cell),
// 6*2
linear-gradient($pattern1, $color2 $cell, transparent $cell),
linear-gradient($pattern3, $color3 $cell, transparent $cell),
// 6*3
linear-gradient($pattern2, $color5 $cell, transparent $cell),
linear-gradient($pattern4, $color4 $cell, transparent $cell),
// 6*4
linear-gradient($pattern1, $color1 $cell, transparent $cell),
;
background-position:
// 1*1
random($s)+px random($s)+px,
// 1*2
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 1*3
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 1*4
random($s)+px random($s)+px,
// 2*1
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 2*2
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 2*3
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 2*4
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 2*5
random($s)+px random($s)+px,
// 3*1
random($s)+px random($s)+px,
// 3*2
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 3*3
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 3*4
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 3*5
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 3*6
random($s)+px random($s)+px,
// 4*1
random($s)+px random($s)+px,
// 4*2
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 4*3
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 4*4
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 4*5
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 4*6
random($s)+px random($s)+px,
// 5*1
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 5*2
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 5*3
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 5*4
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 5*5
random($s)+px random($s)+px,
// 6*1
random($s)+px random($s)+px,
// 6*2
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 6*3
random($s)+px random($s)+px, random($s)+px random($s)+px,
// 6*4
random($s)+px random($s)+px,
;
}
}
//----------------------------------------
// Animation
//----------------------------------------
@keyframes animation {
50%,100% {
background-position:
// 1*1
$size*2/8 $size*2/8,
// 1*2
$size*2/8 $size*2/8, $size*1/8 $size*3/8,
// 1*3
$size*1/8 $size*3/8, $size*2/8 $size*4/8,
// 1*4
$size*2/8 $size*4/8,
// 2*1
$size*3/8 $size*1/8, $size*2/8 $size*2/8,
// 2*2
$size*2/8 $size*2/8, $size*3/8 $size*3/8,
// 2*3
$size*2/8 $size*3/8, $size*3/8 $size*4/8,
// 2*4
$size*3/8 $size*4/8, $size*2/8 $size*5/8,
// 2*5
$size*3/8 $size*5/8,
// 3*1
$size*3/8 $size*2/8,
// 3*2
$size*3/8 $size*2/8, $size*4/8 $size*3/8,
// 3*3
$size*4/8 $size*3/8, $size*3/8 $size*4/8,
// 3*4
$size*3/8 $size*4/8, $size*4/8 $size*5/8,
// 3*5
$size*4/8 $size*5/8, $size*3/8 $size*6/8,
// 3*6
$size*4/8 $size*6/8,
// 4*1
$size*5/8 $size*2/8,
// 4*2
$size*4/8 $size*2/8, $size*5/8 $size*3/8,
// 4*3
$size*4/8 $size*3/8, $size*5/8 $size*4/8,
// 4*4
$size*5/8 $size*4/8, $size*4/8 $size*5/8,
// 4*5
$size*4/8 $size*5/8, $size*5/8 $size*6/8,
// 4*6
$size*4/8 $size*6/8,
// 5*1
$size*5/8 $size*1/8, $size*6/8 $size*2/8,
// 5*2
$size*6/8 $size*2/8, $size*5/8 $size*3/8,
// 5*3
$size*5/8 $size*3/8, $size*6/8 $size*4/8,
// 5*4
$size*5/8 $size*4/8, $size*6/8 $size*5/8,
// 5*5
$size*5/8 $size*5/8,
// 6*1
$size*6/8 $size*2/8,
// 6*2
$size*6/8 $size*2/8, $size*7/8 $size*3/8,
// 6*3
$size*7/8 $size*3/8, $size*6/8 $size*4/8,
// 6*4
$size*6/8 $size*4/8,
;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment