I have an svg which contains dots. I'm trying to make these dots pulsate. See below for an example of the effect I'm trying to achieve:
.blob {
background: black;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
margin: 10px;
height: 20px;
width: 20px;
transform: scale(1);
animation: pulse-black 2s infinite;
}
@keyframes pulse-black {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}<div class="blobs-container">
<div class="blob"></div>
</div>Now, the issue I have is that the path which is the dot in my svg, the transform property is already being used inline to position the dot in the svg. Therefore, I cannot use transform:scale(); to make my element pulsate. See below for demo:
.container {
position: relative;
background-color: #5D209F;
min-height: 600px;
}
.pattern {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
svg {
width: 100%;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
/* path.pink-dot{
transform: scale(1);
animation: pulse 2s infinite;
} */<div class="container">
<div class="pattern">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1366" height="601" viewBox="0 0 1366 601">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_1325" data-name="Rectangle 1325" width="1366" height="601" transform="translate(0 218)" fill="#fff" stroke="#707070" stroke-width="1" />
</clipPath>
</defs>
<g id="Mask_Group_44" data-name="Mask Group 44" transform="translate(0 -218)" clip-path="url(#clip-path)">
<g id="Group_136" data-name="Group 136" transform="translate(-136.59 502.75) rotate(-13)">
<path id="Path_110717" data-name="Path 110717" d="M-.045,317.667c52.99,25.37,193.088,19.238,227.809-67.069s3.3-168.446-47.026-176.576-76.608,41.118-59.668,80.961c12.584,29.6,59.277,70.684,146.016,102.548,204.048,67.077,294.63-90.155,380.431-92.977s131.65,55.238,218.878,43.65S979.987,34.33,1073.116,32.315,1248.2,149.145,1342.2,159.8s128.891-102.009,156.417-98.448" transform="translate(30.239 1.27)" fill="none" stroke="rgba(249,247,250,0.3)" stroke-width="12" />
<path id="Path_110685" data-name="Path 110685" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 879.239, 181.832)" fill="#5f249f" />
<path id="Path_110686" data-name="Path 110686" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1328.26, 136.406)" fill="#5f249f" />
<path class="pink-dot" id="Path_110684" data-name="Path 110684" d="M18.325,0C28.4-.047,36.525,8.442,36.477,18.963S28.226,38.05,18.153,38.1-.047,29.655,0,19.135,8.252.048,18.325,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 890.741, 189.504)" fill="#f277c6" />
<path id="Path_110683" data-name="Path 110683" d="M19.518,0A19.454,19.454,0,0,1,39.145,19.118,19.193,19.193,0,0,1,19.627,38.127,19.454,19.454,0,0,1,0,19.009,19.193,19.193,0,0,1,19.518,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1338.152, 144.203)" fill="#ffee7e" />
</g>
</g>
</svg>
</div>
</div>If you uncomment out the path.pink-dot css, you will see the dot disappear (because the inline positioning transform property is being overwritten).
I cannot think of another way to achieve what I'm after without using transform and CSS only. Only other alternative I see is creating it as a Lottie animation.
Is what I'm after possible using CSS only?
CodePudding user response：
The simplest thing is to introduce a parent element and move the transform there. I've also set transform-origin and transform-box so the circle scales around its centre and I've increased the scaling so it's more obvious what's happening.
.container {
position: relative;
background-color: #5D209F;
min-height: 600px;
}
.pattern {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
svg {
width: 100%;
}
@keyframes pulse {
0% {
transform: scale(0.55);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.55);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
path.pink-dot{
transform: scale(1);
transform-origin: center;
transform-box: fill-box;
animation: pulse 2s infinite;
}<div class="container">
<div class="pattern">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1366" height="601" viewBox="0 0 1366 601">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_1325" data-name="Rectangle 1325" width="1366" height="601" transform="translate(0 218)" fill="#fff" stroke="#707070" stroke-width="1" />
</clipPath>
</defs>
<g id="Mask_Group_44" data-name="Mask Group 44" transform="translate(0 -218)" clip-path="url(#clip-path)">
<g id="Group_136" data-name="Group 136" transform="translate(-136.59 502.75) rotate(-13)">
<path id="Path_110717" data-name="Path 110717" d="M-.045,317.667c52.99,25.37,193.088,19.238,227.809-67.069s3.3-168.446-47.026-176.576-76.608,41.118-59.668,80.961c12.584,29.6,59.277,70.684,146.016,102.548,204.048,67.077,294.63-90.155,380.431-92.977s131.65,55.238,218.878,43.65S979.987,34.33,1073.116,32.315,1248.2,149.145,1342.2,159.8s128.891-102.009,156.417-98.448" transform="translate(30.239 1.27)" fill="none" stroke="rgba(249,247,250,0.3)" stroke-width="12" />
<path id="Path_110685" data-name="Path 110685" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 879.239, 181.832)" fill="#5f249f" />
<path id="Path_110686" data-name="Path 110686" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1328.26, 136.406)" fill="#5f249f" />
<g transform="matrix(0.995, -0.105, 0.105, 0.995, 890.741, 189.504)">
<path class="pink-dot" id="Path_110684" data-name="Path 110684" d="M18.325,0C28.4-.047,36.525,8.442,36.477,18.963S28.226,38.05,18.153,38.1-.047,29.655,0,19.135,8.252.048,18.325,0Z" fill="#f277c6" />
</g>
<path id="Path_110683" data-name="Path 110683" d="M19.518,0A19.454,19.454,0,0,1,39.145,19.118,19.193,19.193,0,0,1,19.627,38.127,19.454,19.454,0,0,1,0,19.009,19.193,19.193,0,0,1,19.518,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1338.152, 144.203)" fill="#ffee7e" />
</g>
</g>
</svg>
</div>
</div>