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
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100vw" height="100vh">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<body>
<style>
body {
background: radial-gradient(circle, #24246e, #06051f);
overflow: hidden;
position: relative;
width: 100vw;
height: 100vh;
margin: 0;
}
body:active div,
body:active div::before,
body:active div::after {
padding: 40px;
}
div,
div::before,
div::after {
content: "";
position: fixed;
top: 0;
left: 0;
opacity: 0.9;
transform-origin: top;
transition: all 5s linear 0s;
}
.purple {
-webkit-animation: purple linear 30s alternate infinite;
animation: purple linear 30s alternate infinite;
border: 2px solid #241379;
border-radius: 100%;
width: 21px;
height: 21px;
transform: translate3d(100vw, 18vh, 0);
z-index: 4;
}
.purple::before {
-webkit-animation: purple-pseudo linear 15s alternate infinite;
animation: purple-pseudo linear 15s alternate infinite;
background: #241379;
border: 2px solid #241379;
width: 47px;
height: 26px;
transform: translate3d(-34vw, 37vh, 0) rotate(84deg);
}
.purple::after {
-webkit-animation: purple-pseudo linear 20s alternate infinite;
animation: purple-pseudo linear 20s alternate infinite;
border: 2px solid #241379;
width: 33px;
height: 42px;
transform: translate3d(-94vw, 40vh, 0) rotate(113deg);
}
@-webkit-keyframes purple {
50% {
transform: translate3d(90vw, 93vh, 0);
}
100% {
transform: translate3d(75vw, 28vh, 0);
}
}
@keyframes purple {
50% {
transform: translate3d(90vw, 93vh, 0);
}
100% {
transform: translate3d(75vw, 28vh, 0);
}
}
@-webkit-keyframes purple-pseudo {
33% {
transform: translate3d(-32vw, -69vh, 0) rotate(213deg);
}
100% {
transform: translate3d(-25vw, 24vh, 0) rotate(41deg);
}
}
@keyframes purple-pseudo {
33% {
transform: translate3d(-32vw, -69vh, 0) rotate(213deg);
}
100% {
transform: translate3d(-25vw, 24vh, 0) rotate(41deg);
}
}
.medium-blue {
-webkit-animation: medium-blue linear 30s alternate infinite;
animation: medium-blue linear 30s alternate infinite;
border: 2px solid #2185bf;
border-radius: 100%;
width: 47px;
height: 47px;
transform: translate3d(60vw, 3vh, 0);
z-index: 12;
}
.medium-blue::before {
-webkit-animation: medium-blue-pseudo linear 15s alternate infinite;
animation: medium-blue-pseudo linear 15s alternate infinite;
background: #2185bf;
border: 2px solid #2185bf;
width: 38px;
height: 7px;
transform: translate3d(-47vw, 44vh, 0) rotate(275deg);
}
.medium-blue::after {
-webkit-animation: medium-blue-pseudo linear 20s alternate infinite;
animation: medium-blue-pseudo linear 20s alternate infinite;
border: 2px solid #2185bf;
width: 5px;
height: 17px;
transform: translate3d(-46vw, 81vh, 0) rotate(237deg);
}
@-webkit-keyframes medium-blue {
50% {
transform: translate3d(95vw, 93vh, 0);
}
100% {
transform: translate3d(79vw, 77vh, 0);
}
}
@keyframes medium-blue {
50% {
transform: translate3d(95vw, 93vh, 0);
}
100% {
transform: translate3d(79vw, 77vh, 0);
}
}
@-webkit-keyframes medium-blue-pseudo {
33% {
transform: translate3d(-95vw, -33vh, 0) rotate(3deg);
}
100% {
transform: translate3d(-20vw, -35vh, 0) rotate(53deg);
}
}
@keyframes medium-blue-pseudo {
33% {
transform: translate3d(-95vw, -33vh, 0) rotate(3deg);
}
100% {
transform: translate3d(-20vw, -35vh, 0) rotate(53deg);
}
}
.light-blue {
-webkit-animation: light-blue linear 30s alternate infinite;
animation: light-blue linear 30s alternate infinite;
border: 2px solid #1fbce1;
border-radius: 100%;
width: 8px;
height: 8px;
transform: translate3d(19vw, 25vh, 0);
z-index: 2;
}
.light-blue::before {
-webkit-animation: light-blue-pseudo linear 15s alternate infinite;
animation: light-blue-pseudo linear 15s alternate infinite;
background: #1fbce1;
border: 2px solid #1fbce1;
width: 27px;
height: 16px;
transform: translate3d(73vw, 31vh, 0) rotate(136deg);
}
.light-blue::after {
-webkit-animation: light-blue-pseudo linear 20s alternate infinite;
animation: light-blue-pseudo linear 20s alternate infinite;
border: 2px solid #1fbce1;
width: 37px;
height: 45px;
transform: translate3d(-5vw, 2vh, 0) rotate(272deg);
}
@-webkit-keyframes light-blue {
50% {
transform: translate3d(6vw, 32vh, 0);
}
100% {
transform: translate3d(84vw, 19vh, 0);
}
}
@keyframes light-blue {
50% {
transform: translate3d(6vw, 32vh, 0);
}
100% {
transform: translate3d(84vw, 19vh, 0);
}
}
@-webkit-keyframes light-blue-pseudo {
33% {
transform: translate3d(-3vw, 33vh, 0) rotate(207deg);
}
100% {
transform: translate3d(-20vw, 2vh, 0) rotate(134deg);
}
}
@keyframes light-blue-pseudo {
33% {
transform: translate3d(-3vw, 33vh, 0) rotate(207deg);
}
100% {
transform: translate3d(-20vw, 2vh, 0) rotate(134deg);
}
}
.red {
-webkit-animation: red linear 30s alternate infinite;
animation: red linear 30s alternate infinite;
border: 2px solid #b62f56;
border-radius: 100%;
width: 8px;
height: 8px;
transform: translate3d(8vw, 90vh, 0);
z-index: 8;
}
.red::before {
-webkit-animation: red-pseudo linear 15s alternate infinite;
animation: red-pseudo linear 15s alternate infinite;
background: #b62f56;
border: 2px solid #b62f56;
width: 8px;
height: 28px;
transform: translate3d(-6vw, -45vh, 0) rotate(103deg);
}
.red::after {
-webkit-animation: red-pseudo linear 20s alternate infinite;
animation: red-pseudo linear 20s alternate infinite;
border: 2px solid #b62f56;
width: 15px;
height: 31px;
transform: translate3d(71vw, -46vh, 0) rotate(247deg);
}
@-webkit-keyframes red {
50% {
transform: translate3d(22vw, 100vh, 0);
}
100% {
transform: translate3d(47vw, 57vh, 0);
}
}
@keyframes red {
50% {
transform: translate3d(22vw, 100vh, 0);
}
100% {
transform: translate3d(47vw, 57vh, 0);
}
}
@-webkit-keyframes red-pseudo {
33% {
transform: translate3d(37vw, -81vh, 0) rotate(197deg);
}
100% {
transform: translate3d(33vw, -43vh, 0) rotate(51deg);
}
}
@keyframes red-pseudo {
33% {
transform: translate3d(37vw, -81vh, 0) rotate(197deg);
}
100% {
transform: translate3d(33vw, -43vh, 0) rotate(51deg);
}
}
.orange {
-webkit-animation: orange linear 30s alternate infinite;
animation: orange linear 30s alternate infinite;
border: 2px solid #d5764c;
border-radius: 100%;
width: 19px;
height: 19px;
transform: translate3d(94vw, 46vh, 0);
z-index: 3;
}
.orange::before {
-webkit-animation: orange-pseudo linear 15s alternate infinite;
animation: orange-pseudo linear 15s alternate infinite;
background: #d5764c;
border: 2px solid #d5764c;
width: 40px;
height: 23px;
transform: translate3d(-59vw, -4vh, 0) rotate(273deg);
}
.orange::after {
-webkit-animation: orange-pseudo linear 20s alternate infinite;
animation: orange-pseudo linear 20s alternate infinite;
border: 2px solid #d5764c;
width: 6px;
height: 26px;
transform: translate3d(-23vw, -19vh, 0) rotate(180deg);
}
@-webkit-keyframes orange {
50% {
transform: translate3d(27vw, 4vh, 0);
}
100% {
transform: translate3d(19vw, 78vh, 0);
}
}
@keyframes orange {
50% {
transform: translate3d(27vw, 4vh, 0);
}
100% {
transform: translate3d(19vw, 78vh, 0);
}
}
@-webkit-keyframes orange-pseudo {
33% {
transform: translate3d(16vw, 83vh, 0) rotate(195deg);
}
100% {
transform: translate3d(-15vw, -51vh, 0) rotate(122deg);
}
}
@keyframes orange-pseudo {
33% {
transform: translate3d(16vw, 83vh, 0) rotate(195deg);
}
100% {
transform: translate3d(-15vw, -51vh, 0) rotate(122deg);
}
}
.yellow {
-webkit-animation: yellow linear 30s alternate infinite;
animation: yellow linear 30s alternate infinite;
border: 2px solid #ffd53e;
border-radius: 100%;
width: 35px;
height: 35px;
transform: translate3d(81vw, 98vh, 0);
z-index: 11;
}
.yellow::before {
-webkit-animation: yellow-pseudo linear 15s alternate infinite;
animation: yellow-pseudo linear 15s alternate infinite;
background: #ffd53e;
border: 2px solid #ffd53e;
width: 36px;
height: 36px;
transform: translate3d(-30vw, -64vh, 0) rotate(338deg);
}
.yellow::after {
-webkit-animation: yellow-pseudo linear 20s alternate infinite;
animation: yellow-pseudo linear 20s alternate infinite;
border: 2px solid #ffd53e;
width: 17px;
height: 8px;
transform: translate3d(-27vw, -76vh, 0) rotate(97deg);
}
@-webkit-keyframes yellow {
50% {
transform: translate3d(15vw, 51vh, 0);
}
100% {
transform: translate3d(39vw, 7vh, 0);
}
}
@keyframes yellow {
50% {
transform: translate3d(15vw, 51vh, 0);
}
100% {
transform: translate3d(39vw, 7vh, 0);
}
}
@-webkit-keyframes yellow-pseudo {
33% {
transform: translate3d(42vw, -24vh, 0) rotate(110deg);
}
100% {
transform: translate3d(3vw, 82vh, 0) rotate(105deg);
}
}
@keyframes yellow-pseudo {
33% {
transform: translate3d(42vw, -24vh, 0) rotate(110deg);
}
100% {
transform: translate3d(3vw, 82vh, 0) rotate(105deg);
}
}
.cyan {
-webkit-animation: cyan linear 30s alternate infinite;
animation: cyan linear 30s alternate infinite;
border: 2px solid #78ffba;
border-radius: 100%;
width: 26px;
height: 26px;
transform: translate3d(91vw, 49vh, 0);
z-index: 7;
}
.cyan::before {
-webkit-animation: cyan-pseudo linear 15s alternate infinite;
animation: cyan-pseudo linear 15s alternate infinite;
background: #78ffba;
border: 2px solid #78ffba;
width: 28px;
height: 17px;
transform: translate3d(-23vw, 14vh, 0) rotate(243deg);
}
.cyan::after {
-webkit-animation: cyan-pseudo linear 20s alternate infinite;
animation: cyan-pseudo linear 20s alternate infinite;
border: 2px solid #78ffba;
width: 37px;
height: 6px;
transform: translate3d(-43vw, 1vh, 0) rotate(267deg);
}
@-webkit-keyframes cyan {
50% {
transform: translate3d(79vw, 60vh, 0);
}
100% {
transform: translate3d(66vw, 92vh, 0);
}
}
@keyframes cyan {
50% {
transform: translate3d(79vw, 60vh, 0);
}
100% {
transform: translate3d(66vw, 92vh, 0);
}
}
@-webkit-keyframes cyan-pseudo {
33% {
transform: translate3d(-4vw, 16vh, 0) rotate(297deg);
}
100% {
transform: translate3d(-65vw, -22vh, 0) rotate(82deg);
}
}
@keyframes cyan-pseudo {
33% {
transform: translate3d(-4vw, 16vh, 0) rotate(297deg);
}
100% {
transform: translate3d(-65vw, -22vh, 0) rotate(82deg);
}
}
.light-green {
-webkit-animation: light-green linear 30s alternate infinite;
animation: light-green linear 30s alternate infinite;
border: 2px solid #98fd85;
border-radius: 100%;
width: 30px;
height: 30px;
transform: translate3d(82vw, 47vh, 0);
z-index: 1;
}
.light-green::before {
-webkit-animation: light-green-pseudo linear 15s alternate infinite;
animation: light-green-pseudo linear 15s alternate infinite;
background: #98fd85;
border: 2px solid #98fd85;
width: 47px;
height: 10px;
transform: translate3d(-60vw, -31vh, 0) rotate(80deg);
}
.light-green::after {
-webkit-animation: light-green-pseudo linear 20s alternate infinite;
animation: light-green-pseudo linear 20s alternate infinite;
border: 2px solid #98fd85;
width: 14px;
height: 26px;
transform: translate3d(-45vw, -46vh, 0) rotate(184deg);
}
@-webkit-keyframes light-green {
50% {
transform: translate3d(79vw, 74vh, 0);
}
100% {
transform: translate3d(90vw, 20vh, 0);
}
}
@keyframes light-green {
50% {
transform: translate3d(79vw, 74vh, 0);
}
100% {
transform: translate3d(90vw, 20vh, 0);
}
}
@-webkit-keyframes light-green-pseudo {
33% {
transform: translate3d(18vw, 12vh, 0) rotate(3deg);
}
100% {
transform: translate3d(-41vw, 26vh, 0) rotate(145deg);
}
}
@keyframes light-green-pseudo {
33% {
transform: translate3d(18vw, 12vh, 0) rotate(3deg);
}
100% {
transform: translate3d(-41vw, 26vh, 0) rotate(145deg);
}
}
.lime {
-webkit-animation: lime linear 30s alternate infinite;
animation: lime linear 30s alternate infinite;
border: 2px solid #befb46;
border-radius: 100%;
width: 20px;
height: 20px;
transform: translate3d(79vw, 27vh, 0);
z-index: 1;
}
.lime::before {
-webkit-animation: lime-pseudo linear 15s alternate infinite;
animation: lime-pseudo linear 15s alternate infinite;
background: #befb46;
border: 2px solid #befb46;
width: 23px;
height: 17px;
transform: translate3d(-78vw, 0vh, 0) rotate(281deg);
}
.lime::after {
-webkit-animation: lime-pseudo linear 20s alternate infinite;
animation: lime-pseudo linear 20s alternate infinite;
border: 2px solid #befb46;
width: 9px;
height: 11px;
transform: translate3d(-60vw, -9vh, 0) rotate(250deg);
}
@-webkit-keyframes lime {
50% {
transform: translate3d(55vw, 15vh, 0);
}
100% {
transform: translate3d(36vw, 5vh, 0);
}
}
@keyframes lime {
50% {
transform: translate3d(55vw, 15vh, 0);
}
100% {
transform: translate3d(36vw, 5vh, 0);
}
}
@-webkit-keyframes lime-pseudo {
33% {
transform: translate3d(-27vw, 41vh, 0) rotate(254deg);
}
100% {
transform: translate3d(63vw, 58vh, 0) rotate(313deg);
}
}
@keyframes lime-pseudo {
33% {
transform: translate3d(-27vw, 41vh, 0) rotate(254deg);
}
100% {
transform: translate3d(63vw, 58vh, 0) rotate(313deg);
}
}
.magenta {
-webkit-animation: magenta linear 30s alternate infinite;
animation: magenta linear 30s alternate infinite;
border: 2px solid #6c046c;
border-radius: 100%;
width: 42px;
height: 42px;
transform: translate3d(51vw, 58vh, 0);
z-index: 8;
}
.magenta::before {
-webkit-animation: magenta-pseudo linear 15s alternate infinite;
animation: magenta-pseudo linear 15s alternate infinite;
background: #6c046c;
border: 2px solid #6c046c;
width: 35px;
height: 48px;
transform: translate3d(-41vw, -32vh, 0) rotate(350deg);
}
.magenta::after {
-webkit-animation: magenta-pseudo linear 20s alternate infinite;
animation: magenta-pseudo linear 20s alternate infinite;
border: 2px solid #6c046c;
width: 47px;
height: 13px;
transform: translate3d(-2vw, -32vh, 0) rotate(20deg);
}
@-webkit-keyframes magenta {
50% {
transform: translate3d(97vw, 40vh, 0);
}
100% {
transform: translate3d(29vw, 60vh, 0);
}
}
@keyframes magenta {
50% {
transform: translate3d(97vw, 40vh, 0);
}
100% {
transform: translate3d(29vw, 60vh, 0);
}
}
@-webkit-keyframes magenta-pseudo {
33% {
transform: translate3d(-18vw, 28vh, 0) rotate(127deg);
}
100% {
transform: translate3d(64vw, -18vh, 0) rotate(92deg);
}
}
@keyframes magenta-pseudo {
33% {
transform: translate3d(-18vw, 28vh, 0) rotate(127deg);
}
100% {
transform: translate3d(64vw, -18vh, 0) rotate(92deg);
}
}
.lightish-red {
-webkit-animation: lightish-red linear 30s alternate infinite;
animation: lightish-red linear 30s alternate infinite;
border: 2px solid #f04c81;
border-radius: 100%;
width: 24px;
height: 24px;
transform: translate3d(69vw, 53vh, 0);
z-index: 11;
}
.lightish-red::before {
-webkit-animation: lightish-red-pseudo linear 15s alternate infinite;
animation: lightish-red-pseudo linear 15s alternate infinite;
background: #f04c81;
border: 2px solid #f04c81;
width: 43px;
height: 25px;
transform: translate3d(6vw, 27vh, 0) rotate(326deg);
}
.lightish-red::after {
-webkit-animation: lightish-red-pseudo linear 20s alternate infinite;
animation: lightish-red-pseudo linear 20s alternate infinite;
border: 2px solid #f04c81;
width: 23px;
height: 38px;
transform: translate3d(-34vw, -39vh, 0) rotate(160deg);
}
@-webkit-keyframes lightish-red {
50% {
transform: translate3d(48vw, 39vh, 0);
}
100% {
transform: translate3d(36vw, 57vh, 0);
}
}
@keyframes lightish-red {
50% {
transform: translate3d(48vw, 39vh, 0);
}
100% {
transform: translate3d(36vw, 57vh, 0);
}
}
@-webkit-keyframes lightish-red-pseudo {
33% {
transform: translate3d(40vw, 14vh, 0) rotate(201deg);
}
100% {
transform: translate3d(-33vw, -15vh, 0) rotate(334deg);
}
}
@keyframes lightish-red-pseudo {
33% {
transform: translate3d(40vw, 14vh, 0) rotate(201deg);
}
100% {
transform: translate3d(-33vw, -15vh, 0) rotate(334deg);
}
}
.pink {
-webkit-animation: pink linear 30s alternate infinite;
animation: pink linear 30s alternate infinite;
border: 2px solid #ff4293;
border-radius: 100%;
width: 12px;
height: 12px;
transform: translate3d(34vw, 51vh, 0);
z-index: 1;
}
.pink::before {
-webkit-animation: pink-pseudo linear 15s alternate infinite;
animation: pink-pseudo linear 15s alternate infinite;
background: #ff4293;
border: 2px solid #ff4293;
width: 33px;
height: 49px;
transform: translate3d(0vw, 4vh, 0) rotate(117deg);
}
.pink::after {
-webkit-animation: pink-pseudo linear 20s alternate infinite;
animation: pink-pseudo linear 20s alternate infinite;
border: 2px solid #ff4293;
width: 47px;
height: 10px;
transform: translate3d(-1vw, -21vh, 0) rotate(39deg);
}
@-webkit-keyframes pink {
50% {
transform: translate3d(17vw, 75vh, 0);
}
100% {
transform: translate3d(55vw, 84vh, 0);
}
}
@keyframes pink {
50% {
transform: translate3d(17vw, 75vh, 0);
}
100% {
transform: translate3d(55vw, 84vh, 0);
}
}
@-webkit-keyframes pink-pseudo {
33% {
transform: translate3d(71vw, 18vh, 0) rotate(313deg);
}
100% {
transform: translate3d(-12vw, 6vh, 0) rotate(165deg);
}
}
@keyframes pink-pseudo {
33% {
transform: translate3d(71vw, 18vh, 0) rotate(313deg);
}
100% {
transform: translate3d(-12vw, 6vh, 0) rotate(165deg);
}
}
</style>
<div class="purple"></div>
<div class="medium-blue"></div>
<div class="light-blue"></div>
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="cyan"></div>
<div class="light-green"></div>
<div class="lime"></div>
<div class="magenta"></div>
<div class="lightish-red"></div>
<div class="pink"></div>
</body>
</div>
</foreignObject>
</svg>
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