Skip to content

Instantly share code, notes, and snippets.

@Undistraction
Last active August 29, 2015 14:27
Show Gist options
  • Save Undistraction/30018a8daa1d2965824e to your computer and use it in GitHub Desktop.
Save Undistraction/30018a8daa1d2965824e to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<?xml version="1.0" encoding="utf-8"?>
<svg
version="1.1"
class="test"
x="0px"
y="0px"
viewBox="0 0 100 100"
xml:space="preserve">
<rect class="st0" width="50" height="50"/>
<rect x="50" class="st1" width="50" height="50"/>
<rect y="50" class="st1" width="50" height="50"/>
<rect x="50" y="50" class="st0" width="50" height="50"/>
<circle class="st2" cx="50" cy="50" r="50"/>
<circle class="st3" cx="50" cy="50" r="45"/>
<circle class="st4" cx="50" cy="50" r="35"/>
<circle class="st5" cx="50" cy="50" r="35"/>
<circle class="st3" cx="50" cy="50" r="15"/>
<circle cx="50" cy="50" r="0.5"/>
</svg>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
version="1.1"
class="test test_2"
viewBox="0 0 100 100"
xml:space="preserve">
<rect class="st0" width="50" height="50"/>
<rect x="50" class="st1" width="50" height="50"/>
<rect y="50" class="st1" width="50" height="50"/>
<rect x="50" y="50" class="st0" width="50" height="50"/>
<circle class="st2" cx="50" cy="50" r="50"/>
<circle class="st3" cx="50" cy="50" r="45"/>
<circle class="st4" cx="50" cy="50" r="35"/>
<circle class="st5" cx="50" cy="50" r="35"/>
<circle class="st3" cx="50" cy="50" r="15"/>
<circle cx="50" cy="50" r="0.5"/>
</svg>
</svg>
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
.test {
width: 400px;
height: 400px;
background: black;
}
.st0{
fill:#EA285F;
}
.st1 {
fill:#14E9F4;
}
.st2 {
fill:#F2E716;
}
.st3 {
opacity: 0.2;
fill:#FFFFFF;
}
.st4 {
fill: none;
stroke: #000;
stroke-miterlimit:10;
stroke-width: 10px;
}
.st5 {
opacity: 0.2;
fill: none;
stroke: #FFFFFF;
stroke-miterlimit: 10;
}
.test {
width: 400px;
height: 400px;
background: black;
}
.st0 {
fill: #EA285F;
}
.st1 {
fill: #14E9F4;
}
.st2 {
fill: #F2E716;
}
.st3 {
opacity: 0.2;
fill: #FFFFFF;
}
.st4 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 10px;
}
.st5 {
opacity: 0.2;
fill: none;
stroke: #FFFFFF;
stroke-miterlimit: 10;
}
<?xml version="1.0" encoding="utf-8"?>
<svg
version="1.1"
class="test"
x="0px"
y="0px"
viewBox="0 0 100 100"
xml:space="preserve">
<rect class="st0" width="50" height="50"/>
<rect x="50" class="st1" width="50" height="50"/>
<rect y="50" class="st1" width="50" height="50"/>
<rect x="50" y="50" class="st0" width="50" height="50"/>
<circle class="st2" cx="50" cy="50" r="50"/>
<circle class="st3" cx="50" cy="50" r="45"/>
<circle class="st4" cx="50" cy="50" r="35"/>
<circle class="st5" cx="50" cy="50" r="35"/>
<circle class="st3" cx="50" cy="50" r="15"/>
<circle cx="50" cy="50" r="0.5"/>
</svg>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
version="1.1"
class="test test_2"
viewBox="0 0 100 100"
xml:space="preserve">
<rect class="st0" width="50" height="50"/>
<rect x="50" class="st1" width="50" height="50"/>
<rect y="50" class="st1" width="50" height="50"/>
<rect x="50" y="50" class="st0" width="50" height="50"/>
<circle class="st2" cx="50" cy="50" r="50"/>
<circle class="st3" cx="50" cy="50" r="45"/>
<circle class="st4" cx="50" cy="50" r="35"/>
<circle class="st5" cx="50" cy="50" r="35"/>
<circle class="st3" cx="50" cy="50" r="15"/>
<circle cx="50" cy="50" r="0.5"/>
</svg>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment