Skip to content

Instantly share code, notes, and snippets.

@Closer2U

Closer2U/000_svg_css_TOC.md

Last active February 28, 2021 18:10
Show Gist options
  • Save Closer2U/ab7751aacfb8888c2c1f866d173831e0 to your computer and use it in GitHub Desktop.
Save Closer2U/ab7751aacfb8888c2c1f866d173831e0 to your computer and use it in GitHub Desktop.
Download ZIP
Nice SVGs and CSS stuff I came across online
Raw
000_svg_css_TOC.md
Display the source blob
Display the rendered blob
Raw
CSS_TextEffects_3D.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
SVG_Background_MovingCircles.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
SVG_Background_MovingShapes.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
SVG_HeaderFooterDivider_Slurp.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
SVG_HeaderFooterDivider_wave.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
SVG_Loader_EqualizerWave.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/"
viewBox="0 0 300 70">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<html >
<body>
<div id="loader-7">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
margin: 10px auto;
text-align: center;
background: transparent;
}
* {
color: #666;
}
span {
display: inline-block;
height: 15px;
width: 15px;
background: #2FAC9B;
border-radius: 0px;
}
.border-radius {
border-radius: 500px;
}
*[id*="loader-"] {
margin-bottom: 30px;
}
#loader-7 span:nth-child(1) {
-webkit-animation: temp 1s 0.05s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.05s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(2) {
-webkit-animation: temp 1s 0.1s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.1s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(3) {
-webkit-animation: temp 1s 0.15s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.15s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(4) {
-webkit-animation: temp 1s 0.2s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.2s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(5) {
-webkit-animation: temp 1s 0.25s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.25s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(6) {
-webkit-animation: temp 1s 0.3s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.3s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(7) {
-webkit-animation: temp 1s 0.35s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.35s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(8) {
-webkit-animation: temp 1s 0.4s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.4s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(9) {
-webkit-animation: temp 1s 0.45s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.45s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(10) {
-webkit-animation: temp 1s 0.5s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.5s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(11) {
-webkit-animation: temp 1s 0.55s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.55s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(12) {
-webkit-animation: temp 1s 0.6s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.6s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(13) {
-webkit-animation: temp 1s 0.65s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.65s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(14) {
-webkit-animation: temp 1s 0.7s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.7s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(15) {
-webkit-animation: temp 1s 0.75s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.75s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(16) {
-webkit-animation: temp 1s 0.8s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.8s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(17) {
-webkit-animation: temp 1s 0.85s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.85s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(18) {
-webkit-animation: temp 1s 0.9s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.9s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(19) {
-webkit-animation: temp 1s 0.95s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 0.95s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
#loader-7 span:nth-child(20) {
-webkit-animation: temp 1s 1s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
animation: temp 1s 1s infinite cubic-bezier(0.005, 0.56, 0.58, 1.59);
width: 7.5px;
height: 7.5px;
margin: 0 2px;
}
@-webkit-keyframes scale {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
background: #93e1d7;
}
50% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
margin: 0 3px;
background: #2FAC9B;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes scale {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
-webkit-transform: scale(0.9, 0.9);
transform: scale(0.9, 0.9);
background: #93e1d7;
}
50% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
margin: 0 3px;
background: #2FAC9B;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
@-webkit-keyframes rotateY {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
background: #93e1d7;
}
100% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
@keyframes rotateY {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
background: #93e1d7;
}
100% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
@-webkit-keyframes rotateX {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
50% {
-webkit-transform: rotateX(90deg) scale(0.5, 0.5);
transform: rotateX(90deg) scale(0.5, 0.5);
background: #93e1d7;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
@keyframes rotateX {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
50% {
-webkit-transform: rotateX(90deg) scale(0.5, 0.5);
transform: rotateX(90deg) scale(0.5, 0.5);
background: #93e1d7;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
@-webkit-keyframes push {
0% {
-webkit-transform: translateX(0px) scale(0.9, 0.6);
transform: translateX(0px) scale(0.9, 0.6);
}
50% {
-webkit-transform: translateY(-20px) scale(0.7, 1.1);
transform: translateY(-20px) scale(0.7, 1.1);
background: #6bd6c8;
}
100% {
-webkit-transform: translateX(0px) scale(0.9, 0.6);
transform: translateX(0px) scale(0.9, 0.6);
}
}
@keyframes push {
0% {
-webkit-transform: translateX(0px) scale(0.9, 0.6);
transform: translateX(0px) scale(0.9, 0.6);
}
50% {
-webkit-transform: translateY(-20px) scale(0.7, 1.1);
transform: translateY(-20px) scale(0.7, 1.1);
background: #6bd6c8;
}
100% {
-webkit-transform: translateX(0px) scale(0.9, 0.6);
transform: translateX(0px) scale(0.9, 0.6);
}
}
@-webkit-keyframes rotateZ {
0% {
-webkit-transform: rotateZ(-20deg);
transform: rotateZ(-20deg);
}
50% {
-webkit-transform: rotateZ(20deg) scaleY(1.2);
transform: rotateZ(20deg) scaleY(1.2);
background: #6bd6c8;
}
100% {
-webkit-transform: rotateZ(-20deg);
transform: rotateZ(-20deg);
}
}
@keyframes rotateZ {
0% {
-webkit-transform: rotateZ(-20deg);
transform: rotateZ(-20deg);
}
50% {
-webkit-transform: rotateZ(20deg) scaleY(1.2);
transform: rotateZ(20deg) scaleY(1.2);
background: #6bd6c8;
}
100% {
-webkit-transform: rotateZ(-20deg);
transform: rotateZ(-20deg);
}
}
@-webkit-keyframes cuve {
0% {
-webkit-transform: rotateY(-90deg) perspective(50px);
transform: rotateY(-90deg) perspective(50px);
background: #195c53;
}
50% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
background: #6bd6c8;
}
100% {
-webkit-transform: rotateY(90deg) perspective(50px);
transform: rotateY(90deg) perspective(50px);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
background: #195c53;
}
}
@keyframes cuve {
0% {
-webkit-transform: rotateY(-90deg) perspective(50px);
transform: rotateY(-90deg) perspective(50px);
background: #195c53;
}
50% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
background: #6bd6c8;
}
100% {
-webkit-transform: rotateY(90deg) perspective(50px);
transform: rotateY(90deg) perspective(50px);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
background: #195c53;
}
}
@-webkit-keyframes temp {
50% {
-webkit-transform: scale(1, 5);
transform: scale(1, 5);
background: #195c53;
}
}
@keyframes temp {
50% {
-webkit-transform: scale(1, 5);
transform: scale(1, 5);
background: #195c53;
}
}
</style>
</body>
</html>
</div>
</foreignObject>
</svg>
Display the source blob
Display the rendered blob
Raw
SVG_Loader_GooeyBalls.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
SVG_Loader_RectWave.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
SVG_Loader_YRectWave.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
SVG_TextEffects_BlockReveal.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment