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
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<body>
<style>
@keyframes move {
100% {
transform: translate3d(0, 0, 1px) rotate(360deg);
}
}
.background {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: #251240;
overflow: hidden;
}
.background span {
width: 20vmin;
height: 20vmin;
border-radius: 20vmin;
backface-visibility: hidden;
position: absolute;
animation: move;
animation-duration: 45;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.background span:nth-child(0) {
color: #39736f;
top: 61%;
left: 59%;
animation-duration: 38s;
animation-delay: -29s;
transform-origin: 20vw 15vh;
box-shadow: -40vmin 0 5.82046146169121vmin currentColor;
}
.background span:nth-child(1) {
color: #39736f;
top: 19%;
left: 57%;
animation-duration: 22s;
animation-delay: -46s;
transform-origin: 4vw 24vh;
box-shadow: -40vmin 0 5.934790765179956vmin currentColor;
}
.background span:nth-child(2) {
color: #66ff9c;
top: 9%;
left: 87%;
animation-duration: 20s;
animation-delay: -8s;
transform-origin: 14vw 20vh;
box-shadow: 40vmin 0 5.036876010231833vmin currentColor;
}
.background span:nth-child(3) {
color: #66ff9c;
top: 86%;
left: 52%;
animation-duration: 49s;
animation-delay: -26s;
transform-origin: 5vw 8vh;
box-shadow: -40vmin 0 5.212824453944094vmin currentColor;
}
.background span:nth-child(4) {
color: #66ff9c;
top: 92%;
left: 21%;
animation-duration: 11s;
animation-delay: -17s;
transform-origin: 21vw -1vh;
box-shadow: -40vmin 0 5.669726353821806vmin currentColor;
}
.background span:nth-child(5) {
color: #39736f;
top: 11%;
left: 78%;
animation-duration: 14s;
animation-delay: -16s;
transform-origin: -7vw -22vh;
box-shadow: 40vmin 0 5.8393989925241vmin currentColor;
}
.background span:nth-child(6) {
color: #66ff9c;
top: 61%;
left: 4%;
animation-duration: 14s;
animation-delay: -12s;
transform-origin: 23vw -15vh;
box-shadow: -40vmin 0 5.318062047534715vmin currentColor;
}
.background span:nth-child(7) {
color: #66ff9c;
top: 30%;
left: 29%;
animation-duration: 13s;
animation-delay: -33s;
transform-origin: -5vw 9vh;
box-shadow: -40vmin 0 5.656164926553318vmin currentColor;
}
.background span:nth-child(8) {
color: #39736f;
top: 56%;
left: 70%;
animation-duration: 18s;
animation-delay: -40s;
transform-origin: -8vw 5vh;
box-shadow: -40vmin 0 5.2380523678613695vmin currentColor;
}
.background span:nth-child(9) {
color: #69e2f0;
top: 87%;
left: 92%;
animation-duration: 15s;
animation-delay: -31s;
transform-origin: 3vw 8vh;
box-shadow: 40vmin 0 5.409740141767424vmin currentColor;
}
.background span:nth-child(10) {
color: #66ff9c;
top: 86%;
left: 94%;
animation-duration: 55s;
animation-delay: -5s;
transform-origin: -8vw 18vh;
box-shadow: -40vmin 0 5.722693432997652vmin currentColor;
}
.background span:nth-child(11) {
color: #39736f;
top: 36%;
left: 5%;
animation-duration: 35s;
animation-delay: -39s;
transform-origin: 4vw -22vh;
box-shadow: -40vmin 0 5.831212712218915vmin currentColor;
}
.background span:nth-child(12) {
color: #39736f;
top: 68%;
left: 89%;
animation-duration: 54s;
animation-delay: -22s;
transform-origin: -8vw 23vh;
box-shadow: -40vmin 0 5.641483912770735vmin currentColor;
}
.background span:nth-child(13) {
color: #66ff9c;
top: 76%;
left: 25%;
animation-duration: 38s;
animation-delay: -45s;
transform-origin: -13vw 2vh;
box-shadow: 40vmin 0 5.082282083302626vmin currentColor;
}
.background span:nth-child(14) {
color: #66ff9c;
top: 12%;
left: 100%;
animation-duration: 49s;
animation-delay: -36s;
transform-origin: -2vw 11vh;
box-shadow: 40vmin 0 5.753649410287672vmin currentColor;
}
.background span:nth-child(15) {
color: #39736f;
top: 9%;
left: 6%;
animation-duration: 30s;
animation-delay: -16s;
transform-origin: 25vw 2vh;
box-shadow: -40vmin 0 5.163714185646463vmin currentColor;
}
.background span:nth-child(16) {
color: #66ff9c;
top: 72%;
left: 15%;
animation-duration: 40s;
animation-delay: -28s;
transform-origin: 21vw 18vh;
box-shadow: 40vmin 0 5.510854520634495vmin currentColor;
}
.background span:nth-child(17) {
color: #66ff9c;
top: 17%;
left: 74%;
animation-duration: 30s;
animation-delay: -41s;
transform-origin: -22vw -5vh;
box-shadow: 40vmin 0 5.03726216354867vmin currentColor;
}
.background span:nth-child(18) {
color: #69e2f0;
top: 44%;
left: 30%;
animation-duration: 15s;
animation-delay: -6s;
transform-origin: -16vw 14vh;
box-shadow: -40vmin 0 5.181108547568289vmin currentColor;
}
.background span:nth-child(19) {
color: #66ff9c;
top: 42%;
left: 46%;
animation-duration: 34s;
animation-delay: -7s;
transform-origin: 11vw 21vh;
box-shadow: 40vmin 0 5.126277295586558vmin currentColor;
}
</style>
<div class="background">
<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>
</body>
</div>
</foreignObject>
</svg>
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
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_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