Skip to content

Instantly share code, notes, and snippets.

@artygus

artygus/rotate_anim+drop_shadow-svg_vs_css.html

Created July 27, 2018 20:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save artygus/1eea37338722598fbb8953e9859d2f1c to your computer and use it in GitHub Desktop.
Save artygus/1eea37338722598fbb8953e9859d2f1c to your computer and use it in GitHub Desktop.
Download ZIP
svg rotate drop shadow comparison (svg animation vs css)
Raw
rotate_anim+drop_shadow-svg_vs_css.html
<html>
<body style="background:blue;">
<style>
@keyframes spinner {
to { transform: rotate(360deg); }
}
.spinner {
background: no-repeat center center;
background-size: 100%;
display: inline-block;
filter: drop-shadow(0px 10px 0px rgba(0, 0, 0, .2));
height: 108px;
margin: 20px;
width: 108px;
}
.spinner1 {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIzNnB4IiBoZWlnaHQ9IjM2cHgiIHZpZXdCb3g9IjAgMCAzNiAzNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+DQogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQuMyAoMTYwNDQpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5PdmFsIDE3IENvcHkgKyBPdmFsIDE3IENvcHkgMjwvdGl0bGU+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPg0KICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlVHlwZT0ieG1sIg0KICAgICAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIg0KICAgICAgICAgICAgICAgICAgICAgICAgdHlwZT0icm90YXRlIg0KICAgICAgICAgICAgICAgICAgICAgICAgZnJvbT0iMCAxOCAxNyINCiAgICAgICAgICAgICAgICAgICAgICAgIHRvPSIzNjAgMTggMTciDQogICAgICAgICAgICAgICAgICAgICAgICBkdXI9IjZzIg0KICAgICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4NCiAgICAgICAgPGcgaWQ9IkF1dG9wbGF5LSstbXV0ZS1Db3B5LTIiIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMDIuMDAwMDAwLCAtMTIxLjAwMDAwMCkiPg0KICAgICAgICAgICAgPGcgaWQ9Ik92YWwtMTctQ29weS0rLU92YWwtMTctQ29weS0yIiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMDUuMDAwMDAwLCAxMjMuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+DQogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNi41ODIwMTI3LDI5LjkxNzU2NzYgQzI0LjEyMjY0MjQsMjkuMTI3MTY1OCAzMCwyMi43NDk5NDgxIDMwLDE1IEMzMCw2LjcxNTcyODc1IDIzLjI4NDI3MTIsMCAxNSwwIEM2LjcxNTcyODc1LDAgMCw2LjcxNTcyODc1IDAsMTUiIGlkPSJPdmFsLTE3LUNvcHkiIHN0cm9rZT0iI0ZGRkNGQyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiPjwvcGF0aD4NCiAgICAgICAgICAgICAgICAgICAgPCEtLSA8Y2lyY2xlIGlkPSJPdmFsLTE3LUNvcHktMiIgZmlsbD0iI0ZGRkZGRiIgY3g9IjE1IiBjeT0iMTUiIHI9IjQiPjwvY2lyY2xlPi0tPg0KICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==");
}
.spinner2 {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIzNnB4IiBoZWlnaHQ9IjM2cHgiIHZpZXdCb3g9IjAgMCAzNiAzNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+DQogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQuMyAoMTYwNDQpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5PdmFsIDE3IENvcHkgKyBPdmFsIDE3IENvcHkgMjwvdGl0bGU+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPg0KICAgICAgICA8ZyBpZD0iQXV0b3BsYXktKy1tdXRlLUNvcHktMiIgc2tldGNoOnR5cGU9Ik1TQXJ0Ym9hcmRHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMwMi4wMDAwMDAsIC0xMjEuMDAwMDAwKSI+DQogICAgICAgICAgICA8ZyBpZD0iT3ZhbC0xNy1Db3B5LSstT3ZhbC0xNy1Db3B5LTIiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwNS4wMDAwMDAsIDEyMy4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8ZyBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj4NCiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2LjU4MjAxMjcsMjkuOTE3NTY3NiBDMjQuMTIyNjQyNCwyOS4xMjcxNjU4IDMwLDIyLjc0OTk0ODEgMzAsMTUgQzMwLDYuNzE1NzI4NzUgMjMuMjg0MjcxMiwwIDE1LDAgQzYuNzE1NzI4NzUsMCAwLDYuNzE1NzI4NzUgMCwxNSIgaWQ9Ik92YWwtMTctQ29weSIgc3Ryb2tlPSIjRkZGQ0ZDIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PC9wYXRoPg0KICAgICAgICAgICAgICAgICAgICA8IS0tIDxjaXJjbGUgaWQ9Ik92YWwtMTctQ29weS0yIiBmaWxsPSIjRkZGRkZGIiBjeD0iMTUiIGN5PSIxNSIgcj0iNCI+PC9jaXJjbGU+LS0+DQogICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+");
animation: spinner 6s linear infinite;
transform-origin: 54px 51px;
}
</style>
<div class="spinner spinner1"></div>
<div class="spinner spinner2"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment