Skip to content

Instantly share code, notes, and snippets.

@Nooshu
Last active May 19, 2018 22:11
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Nooshu/1a6ff0dfd6ec47bbceb07c5841060f29 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
> 1%
last 2 versions
<svg class="cloud-1" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<svg class="cloud-2" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<svg class="cloud-3" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<svg class="cloud-4" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<svg class="cloud-5" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<svg class="cloud-6" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<svg class="cloud-7" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<div class='red-box no-filter'></div>
<div class='red-box with-filter'></div>
<ul class="example-key">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
// ----
// libsass (v3.5.4)
// ----
/**
Basic example to display broken filter CSS property in
Chrome 65, 66, 67
**/
@keyframes cloud-animation {
0% {
transform: translateY(0);
}
100% {
transform: translateY(2831px);
}
}
/** 1: SVG Cloud with blur and animation **/
.cloud-1 {
animation: cloud-animation 502s infinite linear;
left: 40px;
filter: blur(2.2px);
}
/** 2: SVG Cloud with no blur and animation **/
.cloud-2 {
animation: cloud-animation 502s infinite linear;
left: 150px;
}
/** 3: SVG Cloud with blur and no animation **/
.cloud-3 {
left: 260px;
filter: blur(2.2px);
}
/** 4: SVG Cloud with no blur and no animation **/
.cloud-4 {
left: 370px;
}
/** 5: SVG Cloud with minimal blur and no animation **/
.cloud-5 {
left: 480px;
filter: blur(0.1px);
}
/** 6: SVG Cloud with blur set to 0 and no animation **/
.cloud-6 {
left: 590px;
filter: blur(0);
}
/** 7: SVG Cloud with different filter and no animation **/
.cloud-7 {
left: 700px;
filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
}
.red-box {
/** 8: Non-SVG content animated with no filter **/
&.no-filter {
left: 840px;
}
/** 9: Non-SVG content animated with with filter **/
&.with-filter {
left: 955px;
filter: blur(2.2px);
}
}
/**
Basic setup start
**/
$top-position: 60px;
body {
background: #004c70;
}
svg {
top: $top-position;
width: 86px;
height: 50px;
position: absolute;
border: 1px solid white;
}
.red-box {
animation: cloud-animation 502s infinite linear;
width: 20px;
height: 20px;
background: red;
top: $top-position;
position: absolute;
border: 1px solid white;
}
.example-key {
list-style: none;
margin: ($top-position / 3) 0 0 20px;
padding: 0;
overflow: hidden;
li {
color: white;
font-family: Arial, sans-serif;
float: left;
width: 110px;
text-align: center;
}
}
/**
Basic setup end
**/
/**
Basic example to display broken filter CSS property in
Chrome 65, 66, 67
**/
@-webkit-keyframes cloud-animation {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(2831px);
transform: translateY(2831px);
}
}
@keyframes cloud-animation {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(2831px);
transform: translateY(2831px);
}
}
/** 1: SVG Cloud with blur and animation **/
.cloud-1 {
-webkit-animation: cloud-animation 502s infinite linear;
animation: cloud-animation 502s infinite linear;
left: 40px;
-webkit-filter: blur(2.2px);
filter: blur(2.2px);
}
/** 2: SVG Cloud with no blur and animation **/
.cloud-2 {
-webkit-animation: cloud-animation 502s infinite linear;
animation: cloud-animation 502s infinite linear;
left: 150px;
}
/** 3: SVG Cloud with blur and no animation **/
.cloud-3 {
left: 260px;
-webkit-filter: blur(2.2px);
filter: blur(2.2px);
}
/** 4: SVG Cloud with no blur and no animation **/
.cloud-4 {
left: 370px;
}
/** 5: SVG Cloud with minimal blur and no animation **/
.cloud-5 {
left: 480px;
-webkit-filter: blur(0.1px);
filter: blur(0.1px);
}
/** 6: SVG Cloud with blur set to 0 and no animation **/
.cloud-6 {
left: 590px;
-webkit-filter: blur(0);
filter: blur(0);
}
/** 7: SVG Cloud with different filter and no animation **/
.cloud-7 {
left: 700px;
-webkit-filter: drop-shadow(16px 16px 10px rgba(0, 0, 0, 0.9));
filter: drop-shadow(16px 16px 10px rgba(0, 0, 0, 0.9));
}
.red-box {
/** 8: Non-SVG content animated with no filter **/
/** 9: Non-SVG content animated with with filter **/
}
.red-box.no-filter {
left: 840px;
}
.red-box.with-filter {
left: 955px;
-webkit-filter: blur(2.2px);
filter: blur(2.2px);
}
/**
Basic setup start
**/
body {
background: #004c70;
}
svg {
top: 60px;
width: 86px;
height: 50px;
position: absolute;
border: 1px solid white;
}
.red-box {
-webkit-animation: cloud-animation 502s infinite linear;
animation: cloud-animation 502s infinite linear;
width: 20px;
height: 20px;
background: red;
top: 60px;
position: absolute;
border: 1px solid white;
}
.example-key {
list-style: none;
margin: 20px 0 0 20px;
padding: 0;
overflow: hidden;
}
.example-key li {
color: white;
font-family: Arial, sans-serif;
float: left;
width: 110px;
text-align: center;
}
/**
Basic setup end
**/
<svg class="cloud-1" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<svg class="cloud-2" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<svg class="cloud-3" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<svg class="cloud-4" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<svg class="cloud-5" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<svg class="cloud-6" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<svg class="cloud-7" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none">
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/>
</svg>
<div class='red-box no-filter'></div>
<div class='red-box with-filter'></div>
<ul class="example-key">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment