I need svg cracks to appear when hitting with a pickaxe - javascript

I'm a beginner, and I'm creating an animation using svg in which a pickaxe hits a block, and after that cracks should appear, starting from the point where the pickaxe itself hit, in a random downward direction. I would be glad if you could help.
<svg class="main">
<g id="pickaxe">
<path d="M 130 200 Q280 5, 440 200 L 440 200 Q280 80 130 200" fill="#808080" stroke-width="1" />
<rect x="270" y="140" width="20" height="250" fill="#8B4513" />
</g>
</svg>
<svg class="secondary">
<rect x="0" y="0" width="200" height="200" fill="white" />
</svg>
<svg>
<polyline points="0,200 100,125 0,75 100,0" fill="none" stroke="white" />
</svg>
<button id="button" onclick="toggle()">hit!</button>
body {
background-color: black;
}
button {
position: absolute;
left: 65%;
top: 55%;
}
.main {
position: absolute;
left: 1250px;
top: 80px;
width: 560px;
height: 450px;
}
.secondary {
position: absolute;
left: 1110px;
top: 500px;
width: 200px;
height: 200px;
}
.pickaxe {
transition: transform .3s;
animation: move .3s infinite forwards;
animation-play-state: paused;
}
#keyframes hit {
from {
transform: rotate(0deg);
transform-origin: center 400px;
}
to {
transform: rotate(-60deg);
transform-origin: center 400px;
}
}
#keyframes swing {
from {
transform: rotate(-60deg);
transform-origin: center 400px;
}
to {
transform: rotate(0deg);
transform-origin: center 400px;
}
}
.hit {
animation-name: hit;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.swing {
animation-name: swing;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
window.isSmall = true;
window.toggle = () => {
const pickaxe = document.getElementById("pickaxe");
if (isSmall) {
pickaxe.classList.remove("swing");
pickaxe.classList.add("hit");
innerText = 'raise!';
} else {
pickaxe.classList.remove("hit");
pickaxe.classList.add("swing");
innerText = 'hit!';
}
isSmall = !isSmall;
}
I'm a beginner and don't really understand how to create random svg elements, I'd be glad if you could help

Related

Row Low / Minimalistic One page

I tried to figure out, how the website Link is made, especially the SVG fill out and the polygon which is alternating. But yet I did not achieve to make a suitable css.
What I want is:
Make a alternating background like them
and also the svg fillings.
They use also row low but I could not install it on my ubuntu, since i am using Ubuntu 22.04, does anybody know a suitable responsive grid layout for rowlow?
I made a CSS:
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
0% {
height: 100vh;
display: flex; }
15% {
height: 100vh;
display: flex;
color: white; }
100% {
height: 0px;
display: none;
color: black; } }
/* Standard syntax */
#keyframes example {
0% {
height: 100vh;
display: flex; }
15% {
height: 100vh;
display: flex;
color: white; }
100% {
height: 0px;
display: none;
color: black; } }
#keyframes svg-animation {
to {
stroke-dashoffset: 0; } }
#keyframes fill {
from {
fill: transparent; }
to {
fill: white; } }
#keyframes fade-logo {
0% {
opacity: 0; }
80% {
opacity: 0; }
100% {
opacity: 100%; } }
#keyframes no-scroll {
0% {
overflow: hidden; }
99% {
overflow: hidden; }
100% {
overflow: auto; } }
.menu-btn {
position: absolute;
z-index: 3;
right: 35px;
top: 25px;
cursor: pointer;
transition: all .75s ease-out; }
.menu-btn .btn-line {
width: 30px;
height: 3px;
margin: 0 0 5px 0;
background: black;
transition: all .75s ease-out; }
.menu-btn.close {
transform: rotate(180deg); }
.menu-btn.close .btn-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px); }
.menu-btn.close .btn-line:nth-child(2) {
opacity: 0; }
.menu-btn.close .btn-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px); }
.menu {
position: fixed;
top: 0;
width: 100%;
z-index: 2; }
.menu .menu-nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
display: none;
justify-content: center;
transition-property: none; }
.menu .menu-nav.mobile {
display: flex;
background-color: pink;
flex-direction: column;
height: 100vh;
width: 100vw;
position: absolute;
z-index: 2;
left: 100%; }
.menu .menu-nav.mobile.show {
left: 0; }
.menu .menu-nav li {
float: left;
text-align: center;
color: black;
padding: 25px 16px;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
font-size: .85rem;
letter-spacing: .2rem; }
.menu .menu-nav li:hover {
cursor: pointer;
color: #87c6bd; }
#content_1 {
padding: 30px 0;
text-align: center;
height: 100vh;
background-color: #F3F3F3;
clip-path: polygon(0 0, 100% 0, 100% 86%, 0% 100%); }
#content_1 .logo {
width: 220px;
height: auto;
animation: fade-logo 5s ease forwards; }
#content_2 {
margin-top: 0;
position: relative;
padding-top: 100px;
background: #FFF; }
#content_2 .gem-image {
transform: translate(-50%, -80%);
width: 30%;
max-width: 400px;
min-width: 250px;
height: auto;
left: 50%;
top: 0;
position: absolute;
z-index: 200; }
.loading-svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
#svg_logo {
width: 220px;
height: auto;
animation: fill 2s ease forwards 2.25s; }
#svg_logo path:nth-child(1) {
stroke-dasharray: 493px;
stroke-dashoffset: 493px;
animation: svg-animation .75s ease forwards; }
#svg_logo path:nth-child(2) {
stroke-dasharray: 364px;
stroke-dashoffset: 364px;
animation: svg-animation .75s ease forwards 0.15s; }
#svg_logo path:nth-child(3) {
stroke-dasharray: 329px;
stroke-dashoffset: 329px;
animation: svg-animation .75s ease forwards 0.3s; }
#svg_logo path:nth-child(4) {
stroke-dasharray: 162px;
stroke-dashoffset: 162px;
animation: svg-animation .75s ease forwards 0.45s; }
#svg_logo path:nth-child(5) {
stroke-dasharray: 386px;
stroke-dashoffset: 386px;
animation: svg-animation .75s ease forwards .6s; }
#svg_logo path:nth-child(6) {
stroke-dasharray: 77px;
stroke-dashoffset: 77px;
animation: svg-animation .75s ease forwards .75s; }
#svg_logo path:nth-child(7) {
stroke-dasharray: 253px;
stroke-dashoffset: 253px;
animation: svg-animation .75s ease forwards .9s; }
#svg_logo path:nth-child(8) {
stroke-dasharray: 314px;
stroke-dashoffset: 314px;
animation: svg-animation .75s ease forwards 1.05s; }
#svg_logo path:nth-child(9) {
stroke-dasharray: 236px;
stroke-dashoffset: 236px;
animation: svg-animation .75s ease forwards 1.20s; }
#svg_logo path:nth-child(10) {
stroke-dasharray: 329px;
stroke-dashoffset: 329px;
animation: svg-animation .75s ease forwards 1.35s; }
#svg_logo path:nth-child(11) {
stroke-dasharray: 361px;
stroke-dashoffset: 361px;
animation: svg-animation .75s ease forwards 1.5s; }
#svg_logo path:nth-child(12) {
stroke-dasharray: 253px;
stroke-dashoffset: 253px;
animation: svg-animation .75s ease forwards 1.65s; }
#svg_logo path:nth-child(13) {
stroke-dasharray: 162px;
stroke-dashoffset: 162px;
animation: svg-animation .75s ease forwards 1.8s; }
#svg_logo path:nth-child(14) {
stroke-dasharray: 310px;
stroke-dashoffset: 310px;
animation: svg-animation .75s ease forwards 1.95s; }
#svg_logo path:nth-child(15) {
stroke-dasharray: 223px;
stroke-dashoffset: 223px;
animation: svg-animation .75s ease forwards 2.1s; }
#svg_logo path:nth-child(16) {
stroke-dasharray: 223px;
stroke-dashoffset: 223px;
animation: svg-animation .75s ease forwards 2.25s; }
* {
box-sizing: border-box; }
body {
height: 100%;
margin: 0;
font-family: 'Lato', Tahoma, Verdana, sans-serif;
background-color: white;
animation: no-scroll 5s ease forwards; }
h1, h2, h3 {
margin: 0;
font-weight: 600; }
a {
color: white;
text-decoration: none; }
#load {
content: '';
background-color: black;
width: 100%;
color: white;
text-align: center;
letter-spacing: .3rem;
display: flex;
height: 0;
justify-content: center;
align-items: center;
height: 100vh;
-webkit-animation: example 4s ease forwards 2.25s;
/* Safari 4.0 - 8.0 */
animation-name: example 4s ease forwards 2.25s; }
.headline {
position: relative;
text-align: center;
top: 0;
left: 0;
width: 100%;
z-index: 200;
font-size: 2rem;
letter-spacing: 1rem;
font-weight: 900;
margin-top: 100px; }
.headline:after {
width: 100px;
margin: 70px auto;
content: '';
display: block;
background: #1D1D1F;
height: 4px; }
The index.html is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>We Ain't Plastic Clone</title>
<meta name="description" content="We Ain't Plastic Clone">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css?v=1.0">
<!-- <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="load"></div>
<div class="loading-svg">
<svg id="svg_logo" width="1252" height="355" viewBox="0 0 1252 355" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.968 202H16.376L1.49597 134.8H15.8L24.92 180.4L38.072 134.8H51.128L64.184 180.208L73.304 134.8H87.128L72.248 202H57.656L44.312 155.056L30.968 202Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M121.624 202V134.8H173.272V146.896H135.544V162.256H160.408V173.968H135.544V189.904H173.656V202H121.624Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M248.22 202L275.868 134.8H291.996L319.26 202H304.188L297.372 184.336H269.628L262.716 202H248.22ZM273.948 173.2H293.148L283.644 148.432L273.948 173.2Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M350.884 202V134.8H364.804V202H350.884Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M402.96 134.8H416.208L449.616 178.288V134.8H462.672V202H450.384L416.112 157.072V202H402.96V134.8Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M503.955 130.864H517.587L507.219 156.112H497.331L503.955 130.864Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M549.012 147.088V134.8H608.148V147.088H585.588V202H571.668V147.088H549.012Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M687.109 202V134.8H720.805C724.069 134.8 727.077 135.344 729.829 136.432C732.645 137.456 735.045 138.896 737.029 140.752C739.013 142.608 740.549 144.848 741.637 147.472C742.789 150.032 743.365 152.848 743.365 155.92C743.365 158.928 742.789 161.712 741.637 164.272C740.549 166.768 738.981 168.944 736.933 170.8C734.949 172.656 732.581 174.096 729.829 175.12C727.077 176.144 724.069 176.656 720.805 176.656H701.029V202H687.109ZM719.269 146.8H701.029V165.136H719.269C722.277 165.136 724.677 164.304 726.469 162.64C728.325 160.976 729.253 158.768 729.253 156.016C729.253 153.264 728.325 151.056 726.469 149.392C724.677 147.664 722.277 146.8 719.269 146.8Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M778.373 202V134.8H792.293V189.712H829.061V202H778.373Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M859.549 202L887.196 134.8H903.325L930.589 202H915.516L908.701 184.336H880.956L874.044 202H859.549ZM885.276 173.2H904.477L894.972 148.432L885.276 173.2Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M958.328 191.344L966.296 181.36C970.2 184.752 973.944 187.248 977.528 188.848C981.176 190.384 985.016 191.152 989.048 191.152C993.208 191.152 996.536 190.384 999.032 188.848C1001.53 187.312 1002.78 185.264 1002.78 182.704C1002.78 180.4 1001.91 178.608 1000.18 177.328C998.52 176.048 995.704 175.088 991.736 174.448L978.392 172.144C972.632 171.184 968.248 169.168 965.24 166.096C962.296 163.024 960.824 159.056 960.824 154.192C960.824 147.92 963.192 142.96 967.928 139.312C972.728 135.664 979.192 133.84 987.32 133.84C992.184 133.84 997.08 134.672 1002.01 136.336C1007 138 1011.35 140.304 1015.06 143.248L1007.58 153.616C1003.99 150.864 1000.47 148.848 997.016 147.568C993.56 146.224 990.008 145.552 986.36 145.552C982.648 145.552 979.672 146.256 977.432 147.664C975.192 149.008 974.072 150.832 974.072 153.136C974.072 155.184 974.808 156.784 976.28 157.936C977.752 159.088 980.216 159.92 983.672 160.432L996.344 162.544C1003 163.632 1007.99 165.776 1011.32 168.976C1014.71 172.112 1016.41 176.272 1016.41 181.456C1016.41 187.984 1013.82 193.2 1008.63 197.104C1003.51 201.008 996.664 202.96 988.088 202.96C982.712 202.96 977.4 201.936 972.152 199.888C966.968 197.84 962.36 194.992 958.328 191.344Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M1044.47 147.088V134.8H1103.61V147.088H1081.05V202H1067.13V147.088H1044.47Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M1137.33 202V134.8H1151.25V202H1137.33Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M1223.01 190.096C1226.53 190.096 1229.83 189.36 1232.9 187.888C1235.97 186.416 1238.69 184.304 1241.06 181.552L1250.18 190.576C1246.98 194.352 1242.88 197.36 1237.89 199.6C1232.96 201.84 1227.87 202.96 1222.63 202.96C1217.57 202.96 1212.83 202.064 1208.42 200.272C1204.07 198.48 1200.29 196.048 1197.09 192.976C1193.89 189.904 1191.36 186.256 1189.51 182.032C1187.71 177.808 1186.82 173.264 1186.82 168.4C1186.82 163.536 1187.75 158.992 1189.6 154.768C1191.46 150.48 1193.99 146.8 1197.19 143.728C1200.39 140.656 1204.16 138.224 1208.51 136.432C1212.93 134.64 1217.63 133.744 1222.63 133.744C1228 133.744 1233.22 134.896 1238.27 137.2C1243.33 139.44 1247.43 142.48 1250.56 146.32L1241.15 155.632C1238.79 152.688 1236 150.448 1232.8 148.912C1229.6 147.312 1226.21 146.512 1222.63 146.512C1219.62 146.512 1216.77 147.088 1214.08 148.24C1211.46 149.328 1209.19 150.864 1207.27 152.848C1205.35 154.768 1203.84 157.072 1202.75 159.76C1201.67 162.384 1201.12 165.264 1201.12 168.4C1201.12 171.472 1201.67 174.352 1202.75 177.04C1203.91 179.664 1205.44 181.936 1207.36 183.856C1209.35 185.776 1211.65 187.312 1214.27 188.464C1216.96 189.552 1219.87 190.096 1223.01 190.096Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M635.731 88.853L635.4 89.564H636.184H649.432H649.751L649.885 89.2749L690.493 2.01094L690.824 1.29999H690.04H676.792H676.473L676.339 1.58904L635.731 88.853Z" stroke="white"/>
<path d="M521.731 352.853L521.4 353.564H522.184H535.432H535.751L535.885 353.275L576.493 266.011L576.824 265.3H576.04H562.792H562.473L562.339 265.589L521.731 352.853Z" stroke="white"/>
</svg>
</div>
<nav class="menu">
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<ul class="menu-nav">
<li class="nav-item">
Gems
</li>
<li class="nav-item">
Work
</li>
<li class="nav-item">
Letters
</li>
<li class="nav-item">
Profile
</li>
<li class="nav-item">
Workflow
</li>
<li class="nav-item">
Content
</li>
</ul>
</nav>
<main>
<div id="content">
<section id="content_1">
<img class="logo" src="images/logo.svg" >
</section>
<section id="content_2">
<div class="headline">
<h1>GEMS</h1>
</div>
<img class="gem-image" src="images/gem-textured.png" >
</section>
</div>
</main>
<script src="js/main.js"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
My Problem is: The Polygon is not alternating like the link below. And I need a hint how I can make a scroll event such in the link the fill out the svg. As I already mentioned, I want to make use of Row Low but that did not work, I also get in touch with the owner but he did not replied yet.

Cursor - animation javascript

Is it possible to change this red box with a cursor? I don't want to use an image. thank you
.pointer {
width: 100px;
height: 100px;
background: red;
bottom: 0px;
left: 0px;
position: fixed;
animation-name: mouse;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#keyframes mouse {
0% {
left: 100px;
bottom: 0px
}
100% {
left: 500px;
bottom: 300px
}
}
<span class="pointer"></span>

You can use some svg.
.pointer {
width: 100px;
height: 100px;
bottom: 0px;
left: 0px;
position: fixed;
animation-name: mouse;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.pointer svg {
max-height: 100%;
max-width: 100%;
width: 100%;
height: 100%;
}
#keyframes mouse {
0% {
left: 100px;
bottom: 0px
}
100% {
left: 500px;
bottom: 300px
}
}
<span class="pointer">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="1064.7701 445.5539 419.8101 717.0565" enable-background="new 1064.7701 445.5539 419.8101 717.0565" xml:space="preserve">
<polygon fill="#FF0000" points="1283.1857,1127.3097 1406.1421,1077.6322 1314.2406,850.1678 1463.913,852.7823 1093.4828,480.8547 1085.4374,1005.6964 1191.2842,899.8454 "/>
</svg>
</span>

.pointer:hover{
// Do stuff here
}

You can use css hover selector .pointer:hover{} or you make it with Javascript:
const elem.document.querySelector(".pointer");
elem.addEventListener("mouseover", yourFunction());

Change SVG fill animation height depending on CSS class

I am using the following SVG and CSS code to animate the fill level of an SVG shape.
.st0 {
fill: none;
stroke: #000000;
stroke-width: 4;
stroke-miterlimit: 5;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 5;
}
#logo2 {
width: 150px !important;
height: 150px !important;
position: relative;
margin-top: -100px;
}
#banner {
border-radius: 50%;
width: 150px;
height: 150px;
background: #fff;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
z-index: -1;
margin-bottom: -50px;
}
#banner .fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width: 300px;
height: 150px;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
#keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}
<div>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
</div>
What I am trying to and failing is to change the height of the "water level" animation.
So the preferred outcome would be to change the height of the animation with a CSS class, so I can animate 75% or 25% fill level. I tried to change the height via CSS but it gets ignored.

By modifying the animation played you can change the level it will raise up to.
By changing the animation played by adding an extra class you can decide which one to play.
I modified the wave animation to stop because it got me seasick ish.
Key points:
I changed the animation style by adding an extra class that needs to be used together with the fill class. This will enable you to choose which class to use for which animation.
.fill.fill-25 {
animation-name: fillAction25;
}
.fill.fill-50 {
animation-name: fillAction50;
}
.fill.fill-75 {
animation-name: fillAction75;
}
Then I changed the translation height of the animations for the relevant keyframes. You could can also use a calc method there calc(155px / 100 * 25) to calculate custom percentages.
#keyframes fillAction25 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, 115px);
}
}
#keyframes fillAction50 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, 85px);
}
}
#keyframes fillAction75 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, 45px);
}
}
.st0 {
fill: none;
stroke: #000000;
stroke-width: 4;
stroke-miterlimit: 5;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 5;
}
#logo2 {
width: 150px !important;
height: 150px !important;
position: relative;
margin-top: -100px;
}
#banner {
border-radius: 50%;
width: 150px;
height: 150px;
background: #fff;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
z-index: -1;
margin-bottom: -50px;
}
.fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
.fill.fill-25 {
animation-name: fillAction25;
}
.fill.fill-50 {
animation-name: fillAction50;
}
.fill.fill-75 {
animation-name: fillAction75;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: 10;
animation-timing-function: linear;
animation-duration: 0.5s;
width: 300px;
height: 150px;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
hr {
margin-top:50px;
}
#keyframes fillAction25 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, 115px);
}
}
#keyframes fillAction50 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, 85px);
}
}
#keyframes fillAction75 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, 45px);
}
}
#keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}
<div>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill fill-25">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
<hr>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill fill-50">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
<hr>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill fill-75">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
</div>
Use with calc method
.st0 {
fill: none;
stroke: #000000;
stroke-width: 4;
stroke-miterlimit: 5;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 5;
}
#logo2 {
width: 150px !important;
height: 150px !important;
position: relative;
margin-top: -100px;
}
#banner {
border-radius: 50%;
width: 150px;
height: 150px;
background: #fff;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
z-index: -1;
margin-bottom: -50px;
}
.fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
.fill.fill-25 {
animation-name: fillAction25;
}
.fill.fill-50 {
animation-name: fillAction50;
}
.fill.fill-75 {
animation-name: fillAction75;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: 10;
animation-timing-function: linear;
animation-duration: 0.5s;
width: 300px;
height: 150px;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
hr {
margin-top:50px;
}
#keyframes fillAction25 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, calc(155px / 100 * 25));
}
}
#keyframes fillAction50 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, calc(155px / 100 * 50));
}
}
#keyframes fillAction75 {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, calc(155px / 100 * 75));
}
}
#keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}
<div>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill fill-25">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
<hr>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill fill-50">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
<hr>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)"
d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill fill-75">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
</g>
</svg>
</div>
</div>
</div>

Controlling CSS animation counts form input [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I have been trying to control the rate of drops per minute. is it possible to control the rate of drops depending on the Drops in each minute: input? Like when the input value is 60, there will be 60 water drops in each minute (animation: drop 1s). What would be best way to achieve that?
Thanks in advance for your suggestion.
Fiddle link to the code is here.
body {
background: #e8e5ea;
}
.wrap {
position: absolute;
width: 100px;
height: 200px;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -100px;
}
.drop {
width: 40px;
height: 40px;
left: 50%;
margin-left: -20px;
position: absolute;
animation: drop 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s infinite;
}
.drop circle {
fill: #2a96ed;
}
.drop-outer {
position: absolute;
box-sizing: border-box;
/* border: 1px solid #333; */
width: 100px;
height: 200px;
overflow: hidden;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
background-clip: padding-box;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
.ripple {
position: absolute;
box-sizing: border-box;
width: 240px;
height: 240px;
top: 68px;
left: -70px;
perspective: 100;
transform: rotateX(65deg);
}
.ripple .ripple-svg {
position: absolute;
width: 240px;
height: 240px;
opacity: 0;
}
.ripple .ripple-svg circle {
fill: none;
stroke: #2a96ed;
stroke-width: 10px;
stroke-alignment: inner;
}
.ripple-1 {
animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}
.ripple-1 .ripple-svg {
animation: fade-in-out 2s linear 0s infinite;
}
.ripple-1 .ripple-svg circle {
animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}
.ripple-2 {
animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}
.ripple-2 .ripple-svg {
animation: fade-in-out 2s linear 0.2s infinite;
}
.ripple-2 .ripple-svg circle {
animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}
.ripple-3 {
animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}
.ripple-3 .ripple-svg {
animation: fade-in-out 2s linear 0.35s infinite;
}
.ripple-3 .ripple-svg circle {
animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}
#keyframes drop {
0% {
transform: scale3d(0.01,0.01,0.01) translateY(0)
}
10% {
transform: scale3d(1,1,1)
}
44% {
transform: scale3d(1,1,1) translateY(200px)
}
100% {
transform: scale3d(1,1,1) translateY(200px)
}
}
#keyframes fade-in-out {
0% {opacity: 0}
42% {opacity: 0}
52% {opacity: 1}
65% {opacity: 1}
100% {opacity: 0}
}
#keyframes ripple {
0% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
42% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
100% { transform: rotateX(65deg) scale3d(0.9, 0.9, 0.9) }
}
#keyframes border {
0% { stroke-width: 6px }
42% { stroke-width: 6px }
100% {stroke-width: 2px }
}
Drops in each minute: <input type="number" id="number"/><br>
<div class="wrap">
<div class="drop-outer">
<svg class="drop" viewBox="0 0 40 40" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20"/>
</svg>
</div>
<div class="ripple ripple-1">
<svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
</svg>
</div>
<div class="ripple ripple-2">
<svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
</svg>
</div>
<div class="ripple ripple-3">
<svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
</svg>
</div>
</div>

Only if you specify the relevant styles via JavaScript.
Your example is rather complex and not really minimal, so here is a simplified example that shows the idea:
const animateInner = document.querySelector('#animate .inner');
const input = document.querySelector('input');
document.querySelector('button').addEventListener('click', function() {
console.log('update to', `${input.value || 0}s`);
animateInner.style.animationDuration = `${input.value || 0}s`;
});
#animate {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
}
#animate .inner {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: #F00;
animation-name: fill;
animation-iteration-count: infinite;
}
#keyframes fill {
from {
top: 100%;
}
to {
top: 0;
}
}
<label>Duration in seconds: <input /></label>
<button>Update</button>
<div id="animate"><div class="inner"></div></div>
In a nutshell, you're going to want to control the "animation-duration" property. This will affect how quickly it happens. Since you want "drops per minute", you'll have to do a little math to convert that to a duration.
Since it looks like your animation has several things working in unison, you'll want to update them all at the same time.

So you can use
animation-iteration-count CSS3 property, the secret is you get the number and update the css
$(function(){
$('#number').on('change', function(){
var count = $(this).val();
$('.drop').css('animation-iteration-count', count);
$('.ripple-1').css('animation-iteration-count', count);
$('.ripple-1 .ripple-svg').css('animation-iteration-count', count);
$('.ripple-1 .ripple-svg circle').css('animation-iteration-count', count);
$('.ripple-2').css('animation-iteration-count', count);
$('.ripple-2 .ripple-svg').css('animation-iteration-count', count);
$('.ripple-2 .ripple-svg circle').css('animation-iteration-count', count);
$('.ripple-3').css('animation-iteration-count', count);
$('.ripple-3 .ripple-svg').css('animation-iteration-count', count);
$('.ripple-3 .ripple-svg circle').css('animation-iteration-count', count);
});
});
JSfiddle

Is it possible to animate an SVG background on a DOM element with CSS?

I have used SMIL to animate an SVG image, then used that image as the background for a DOM element (e.g., a button).
For example, this SVG image (http://mattstuehler.com/spinner.svg)
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
<g fill="none" stroke="#1e81cc" stroke-width="4">
<circle cx="50%" cy="50%" r="18" stroke-opacity="0.3"/>
<path d="M20,2 A18,18 0 0,1 38,20">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1s" repeatCount="indefinite"/>
</path>
</g>
</svg>
However, now that SMIL is being deprecated, how would you do this with only CSS?
Thanks in advance!
button {
width: 200px;
height: 60px;
background-color: #eee;
background-image: url(http://mattstuehler.com/spinner.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 50px 50px;
border: none;
-webkit-appearance: none;
}
<button>Hello</button>

Update:
Chrome have suspended deprecation of SMIL for now. More here
One way could be to use CSS animations. Animate the path element and fix the transform-origin at the center of the spinner.
Since we can have a <style> tag within an SVG element, we embed this animation in the SVG itself.
CSS Animation / SVG:
<svg height="40" viewbox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg">
<style>
path {
-webkit-animation: rotate 1s linear infinite;
-moz-animation: rotate 1s linear infinite;
animation: rotate 1s linear infinite;
transform-origin: 20px 20px;
}
#-webkit-keyframes rotate {
100% {
transform: rotate(360deg)
}
}
#keyframes rotate {
100% {
transform: rotate(360deg)
}
}
</style>
<g fill="none" stroke="#1e81cc" stroke-width="4">
<circle cx="50%" cy="50%" r="18" stroke-opacity="0.3"></circle>
<path d="M20,2 A18,18 0 0,1 38,20"></path>
</g>
</svg>
Using the above SVG as a background:
button {
width: 200px;
height: 60px;
background-color: #eee;
background-image: url(https://dl.dropboxusercontent.com/s/8j3gd6jfujxz2xg/spinner.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 50px 50px;
border: none;
}
<button>Hello</button>
Note: Some browsers may render animated SVGs as a static image when used as a background. Refers to both the CSS method and the SMIL in the question.
Works fine on Chrome/Opera and Firefox from version 51.

You can use any static PNG/WebP/JPG image as a background to a button's pseudo-class and then rotate it via CSS.
#keyframes btn_rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
button::before {
content: '';
display: block;
height: 60px;
width: 60px;
background: url(http://www.freeiconspng.com/uploads/spinner-icon-17.png);
background-size: contain;
position: absolute;
left: calc(50% - 30px);
top: calc(50% - 30px);
animation: btn_rotate 2s infinite;
animation-timing-function: linear;
}
button {
width: 200px;
height: 60px;
background-color: #eee;
border: none;
position: relative;
overflow: hidden;
}
<button>Hello</button>

Categories

Resources