how can i make these 2 svg blobs act different [closed]
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
-2
down vote
favorite
idk how to make them act like different svgs, if i change the color of the first one it doesnt do anything, but when i change it for the second, it changes for the first one too.
here's what im working with:
<!DOCTYPE html>
<title>blob</title>
<head>
<style type="text/css">
.image
position: absolute;
z-index: 2;
html
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.texto
font-size: 89px;
margin-top: 50%;
z-index: 2;
color: #FF7C26;
#tablet
margin-left: 50%;
height: 700px;
width: 350px;
</style>
</head>
<body>
<p class="texto" style="font-family: Overpass">UX</p>
<svg id="organic-blob" width="300" height="300" xmlns="http://www.w3.org/2000/svg" filter="url(#goo)">
<style type="text/css">
svg,
svg circle
fill: #FF7C26;
z-index: -2;
@keyframes tamanho
0%, 100%
transform: scale(0.8);
50%
transform: scale(1.0);
#Circlee1
-webkit-animation: tamanho 7s linear infinite;
animation: tamanho 7s linear infinite;
cx: 150;
cy: 145;
r: 75;
-webkit-transform-origin: 145px 150px;
transform-origin: 145px 150px;
#Circlee2
-webkit-animation: tamanho 5s linear infinite ;
animation: tamanho 5s linear infinite;
cx: 120;
cy: 155;
r: 70;
-webkit-transform-origin: 155px 150px;
transform-origin: 155px 150px;
#Circlee3
-webkit-animation: tamanho 6s linear infinite;
animation: tamanho 6s linear infinite;
cx: 145;
cy: 120;
r: 75;
-webkit-transform-origin: 150px 120px;
transform-origin: 150px 145px;
</style>
<defs>
<filter id="goo">
<!-- tympanus.net/codrops/creative-gooey-effects -->
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
<circle id="Circlee1" "></circle>
<circle id="Circlee2"></circle>
<circle id="Circlee3"></circle>
</svg>
<div id="tablet">
<img class="image" src="tablet.png">
<svg id="organic-blob" width="300" height="300" xmlns="http://www.w3.org/2000/svg" filter="url(#goo)">
<style type="text/css">
svg,
svg circle
fill: #FF7C26;
margin-left: -35%;
margin-top: 115%;
@-webkit-keyframes from0to360
from
-webkit-transform: rotate(0);
transform: rotate(0);
to
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
@keyframes tamanho
0%, 100%
transform: scale(0.5);
50%
transform: scale(1.0);
#Circle1
-webkit-animation: from0to360 7s linear infinite;
animation: from0to360 7s linear infinite;
cx: 150;
cy: 145;
r: 75;
-webkit-transform-origin: 145px 150px;
transform-origin: 145px 150px;
@-webkit-keyframes from360to0
from
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
to
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
#Circle2
-webkit-animation: from360to0 5s linear infinite ;
animation: from360to0 5s linear infinite;
cx: 120;
cy: 155;
r: 70;
-webkit-transform-origin: 155px 150px;
transform-origin: 155px 150px;
#Circle3
-webkit-animation: from0to360 6s linear infinite;
animation: from0to360 6s linear infinite;
cx: 145;
cy: 120;
r: 75;
-webkit-transform-origin: 150px 120px;
transform-origin: 150px 145px;
#Circle4
-webkit-animation: from360to0 4.5s linear infinite;
animation: from360to0 4.5s linear infinite;
cx: 155;
cy: 150;
r: 70;
-webkit-transform-origin: 100px 155px;
transform-origin: 150px 155px;
</style>
<defs>
<filter id="goo">
<!-- tympanus.net/codrops/creative-gooey-effects -->
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
<circle id="Circle1" "></circle>
<circle id="Circle2"></circle>
<circle id="Circle3"></circle>
<circle id="Circle4"></circle>
</svg>
</div>
</body>
</html>
html css animation svg
asked Aug 1 at 18:05
Julia Spinelli Milani
1
closed as off-topic by ÀάνÄα ῥεῖ, Josiah, Sam Onela, yuri, 200_success Aug 1 at 18:37
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – ÀάνÄα ῥεῖ, Josiah, Sam Onela, yuri, 200_success
add a comment |Â
up vote
-2
down vote
favorite
idk how to make them act like different svgs, if i change the color of the first one it doesnt do anything, but when i change it for the second, it changes for the first one too.
here's what im working with:
<!DOCTYPE html>
<title>blob</title>
<head>
<style type="text/css">
.image
position: absolute;
z-index: 2;
html
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.texto
font-size: 89px;
margin-top: 50%;
z-index: 2;
color: #FF7C26;
#tablet
margin-left: 50%;
height: 700px;
width: 350px;
</style>
</head>
<body>
<p class="texto" style="font-family: Overpass">UX</p>
<svg id="organic-blob" width="300" height="300" xmlns="http://www.w3.org/2000/svg" filter="url(#goo)">
<style type="text/css">
svg,
svg circle
fill: #FF7C26;
z-index: -2;
@keyframes tamanho
0%, 100%
transform: scale(0.8);
50%
transform: scale(1.0);
#Circlee1
-webkit-animation: tamanho 7s linear infinite;
animation: tamanho 7s linear infinite;
cx: 150;
cy: 145;
r: 75;
-webkit-transform-origin: 145px 150px;
transform-origin: 145px 150px;
#Circlee2
-webkit-animation: tamanho 5s linear infinite ;
animation: tamanho 5s linear infinite;
cx: 120;
cy: 155;
r: 70;
-webkit-transform-origin: 155px 150px;
transform-origin: 155px 150px;
#Circlee3
-webkit-animation: tamanho 6s linear infinite;
animation: tamanho 6s linear infinite;
cx: 145;
cy: 120;
r: 75;
-webkit-transform-origin: 150px 120px;
transform-origin: 150px 145px;
</style>
<defs>
<filter id="goo">
<!-- tympanus.net/codrops/creative-gooey-effects -->
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
<circle id="Circlee1" "></circle>
<circle id="Circlee2"></circle>
<circle id="Circlee3"></circle>
</svg>
<div id="tablet">
<img class="image" src="tablet.png">
<svg id="organic-blob" width="300" height="300" xmlns="http://www.w3.org/2000/svg" filter="url(#goo)">
<style type="text/css">
svg,
svg circle
fill: #FF7C26;
margin-left: -35%;
margin-top: 115%;
@-webkit-keyframes from0to360
from
-webkit-transform: rotate(0);
transform: rotate(0);
to
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
@keyframes tamanho
0%, 100%
transform: scale(0.5);
50%
transform: scale(1.0);
#Circle1
-webkit-animation: from0to360 7s linear infinite;
animation: from0to360 7s linear infinite;
cx: 150;
cy: 145;
r: 75;
-webkit-transform-origin: 145px 150px;
transform-origin: 145px 150px;
@-webkit-keyframes from360to0
from
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
to
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
#Circle2
-webkit-animation: from360to0 5s linear infinite ;
animation: from360to0 5s linear infinite;
cx: 120;
cy: 155;
r: 70;
-webkit-transform-origin: 155px 150px;
transform-origin: 155px 150px;
#Circle3
-webkit-animation: from0to360 6s linear infinite;
animation: from0to360 6s linear infinite;
cx: 145;
cy: 120;
r: 75;
-webkit-transform-origin: 150px 120px;
transform-origin: 150px 145px;
#Circle4
-webkit-animation: from360to0 4.5s linear infinite;
animation: from360to0 4.5s linear infinite;
cx: 155;
cy: 150;
r: 70;
-webkit-transform-origin: 100px 155px;
transform-origin: 150px 155px;
</style>
<defs>
<filter id="goo">
<!-- tympanus.net/codrops/creative-gooey-effects -->
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
<circle id="Circle1" "></circle>
<circle id="Circle2"></circle>
<circle id="Circle3"></circle>
<circle id="Circle4"></circle>
</svg>
</div>
</body>
</html>
html css animation svg
asked Aug 1 at 18:05
Julia Spinelli Milani
1
closed as off-topic by ÀάνÄα ῥεῖ, Josiah, Sam Onela, yuri, 200_success Aug 1 at 18:37
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – ÀάνÄα ῥεῖ, Josiah, Sam Onela, yuri, 200_success
add a comment |Â
up vote
-2
down vote
favorite
up vote
-2
down vote
favorite
idk how to make them act like different svgs, if i change the color of the first one it doesnt do anything, but when i change it for the second, it changes for the first one too.
here's what im working with:
<!DOCTYPE html>
<title>blob</title>
<head>
<style type="text/css">
.image
position: absolute;
z-index: 2;
html
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.texto
font-size: 89px;
margin-top: 50%;
z-index: 2;
color: #FF7C26;
#tablet
margin-left: 50%;
height: 700px;
width: 350px;
</style>
</head>
<body>
<p class="texto" style="font-family: Overpass">UX</p>
<svg id="organic-blob" width="300" height="300" xmlns="http://www.w3.org/2000/svg" filter="url(#goo)">
<style type="text/css">
svg,
svg circle
fill: #FF7C26;
z-index: -2;
@keyframes tamanho
0%, 100%
transform: scale(0.8);
50%
transform: scale(1.0);
#Circlee1
-webkit-animation: tamanho 7s linear infinite;
animation: tamanho 7s linear infinite;
cx: 150;
cy: 145;
r: 75;
-webkit-transform-origin: 145px 150px;
transform-origin: 145px 150px;
#Circlee2
-webkit-animation: tamanho 5s linear infinite ;
animation: tamanho 5s linear infinite;
cx: 120;
cy: 155;
r: 70;
-webkit-transform-origin: 155px 150px;
transform-origin: 155px 150px;
#Circlee3
-webkit-animation: tamanho 6s linear infinite;
animation: tamanho 6s linear infinite;
cx: 145;
cy: 120;
r: 75;
-webkit-transform-origin: 150px 120px;
transform-origin: 150px 145px;
</style>
<defs>
<filter id="goo">
<!-- tympanus.net/codrops/creative-gooey-effects -->
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
<circle id="Circlee1" "></circle>
<circle id="Circlee2"></circle>
<circle id="Circlee3"></circle>
</svg>
<div id="tablet">
<img class="image" src="tablet.png">
<svg id="organic-blob" width="300" height="300" xmlns="http://www.w3.org/2000/svg" filter="url(#goo)">
<style type="text/css">
svg,
svg circle
fill: #FF7C26;
margin-left: -35%;
margin-top: 115%;
@-webkit-keyframes from0to360
from
-webkit-transform: rotate(0);
transform: rotate(0);
to
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
@keyframes tamanho
0%, 100%
transform: scale(0.5);
50%
transform: scale(1.0);
#Circle1
-webkit-animation: from0to360 7s linear infinite;
animation: from0to360 7s linear infinite;
cx: 150;
cy: 145;
r: 75;
-webkit-transform-origin: 145px 150px;
transform-origin: 145px 150px;
@-webkit-keyframes from360to0
from
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
to
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
#Circle2
-webkit-animation: from360to0 5s linear infinite ;
animation: from360to0 5s linear infinite;
cx: 120;
cy: 155;
r: 70;
-webkit-transform-origin: 155px 150px;
transform-origin: 155px 150px;
#Circle3
-webkit-animation: from0to360 6s linear infinite;
animation: from0to360 6s linear infinite;
cx: 145;
cy: 120;
r: 75;
-webkit-transform-origin: 150px 120px;
transform-origin: 150px 145px;
#Circle4
-webkit-animation: from360to0 4.5s linear infinite;
animation: from360to0 4.5s linear infinite;
cx: 155;
cy: 150;
r: 70;
-webkit-transform-origin: 100px 155px;
transform-origin: 150px 155px;
</style>
<defs>
<filter id="goo">
<!-- tympanus.net/codrops/creative-gooey-effects -->
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
<circle id="Circle1" "></circle>
<circle id="Circle2"></circle>
<circle id="Circle3"></circle>
<circle id="Circle4"></circle>
</svg>
</div>
</body>
</html>
html css animation svg
asked Aug 1 at 18:05
Julia Spinelli Milani
1
idk how to make them act like different svgs, if i change the color of the first one it doesnt do anything, but when i change it for the second, it changes for the first one too.
here's what im working with:
<!DOCTYPE html>
<title>blob</title>
<head>
<style type="text/css">
.image
position: absolute;
z-index: 2;
html
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.texto
font-size: 89px;
margin-top: 50%;
z-index: 2;
color: #FF7C26;
#tablet
margin-left: 50%;
height: 700px;
width: 350px;
</style>
</head>
<body>
<p class="texto" style="font-family: Overpass">UX</p>
<svg id="organic-blob" width="300" height="300" xmlns="http://www.w3.org/2000/svg" filter="url(#goo)">
<style type="text/css">
svg,
svg circle
fill: #FF7C26;
z-index: -2;
@keyframes tamanho
0%, 100%
transform: scale(0.8);
50%
transform: scale(1.0);
#Circlee1
-webkit-animation: tamanho 7s linear infinite;
animation: tamanho 7s linear infinite;
cx: 150;
cy: 145;
r: 75;
-webkit-transform-origin: 145px 150px;
transform-origin: 145px 150px;
#Circlee2
-webkit-animation: tamanho 5s linear infinite ;
animation: tamanho 5s linear infinite;
cx: 120;
cy: 155;
r: 70;
-webkit-transform-origin: 155px 150px;
transform-origin: 155px 150px;
#Circlee3
-webkit-animation: tamanho 6s linear infinite;
animation: tamanho 6s linear infinite;
cx: 145;
cy: 120;
r: 75;
-webkit-transform-origin: 150px 120px;
transform-origin: 150px 145px;
</style>
<defs>
<filter id="goo">
<!-- tympanus.net/codrops/creative-gooey-effects -->
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
<circle id="Circlee1" "></circle>
<circle id="Circlee2"></circle>
<circle id="Circlee3"></circle>
</svg>
<div id="tablet">
<img class="image" src="tablet.png">
<svg id="organic-blob" width="300" height="300" xmlns="http://www.w3.org/2000/svg" filter="url(#goo)">
<style type="text/css">
svg,
svg circle
fill: #FF7C26;
margin-left: -35%;
margin-top: 115%;
@-webkit-keyframes from0to360
from
-webkit-transform: rotate(0);
transform: rotate(0);
to
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
@keyframes tamanho
0%, 100%
transform: scale(0.5);
50%
transform: scale(1.0);
#Circle1
-webkit-animation: from0to360 7s linear infinite;
animation: from0to360 7s linear infinite;
cx: 150;
cy: 145;
r: 75;
-webkit-transform-origin: 145px 150px;
transform-origin: 145px 150px;
@-webkit-keyframes from360to0
from
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
to
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
#Circle2
-webkit-animation: from360to0 5s linear infinite ;
animation: from360to0 5s linear infinite;
cx: 120;
cy: 155;
r: 70;
-webkit-transform-origin: 155px 150px;
transform-origin: 155px 150px;
#Circle3
-webkit-animation: from0to360 6s linear infinite;
animation: from0to360 6s linear infinite;
cx: 145;
cy: 120;
r: 75;
-webkit-transform-origin: 150px 120px;
transform-origin: 150px 145px;
#Circle4
-webkit-animation: from360to0 4.5s linear infinite;
animation: from360to0 4.5s linear infinite;
cx: 155;
cy: 150;
r: 70;
-webkit-transform-origin: 100px 155px;
transform-origin: 150px 155px;
</style>
<defs>
<filter id="goo">
<!-- tympanus.net/codrops/creative-gooey-effects -->
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
<circle id="Circle1" "></circle>
<circle id="Circle2"></circle>
<circle id="Circle3"></circle>
<circle id="Circle4"></circle>
</svg>
</div>
</body>
</html>
html css animation svg
asked Aug 1 at 18:05
Julia Spinelli Milani
1
asked Aug 1 at 18:05
Julia Spinelli Milani
1
asked Aug 1 at 18:05
Julia Spinelli Milani
1
asked Aug 1 at 18:05
Julia Spinelli Milani
1
1
closed as off-topic by ÀάνÄα ῥεῖ, Josiah, Sam Onela, yuri, 200_success Aug 1 at 18:37
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – ÀάνÄα ῥεῖ, Josiah, Sam Onela, yuri, 200_success
closed as off-topic by ÀάνÄα ῥεῖ, Josiah, Sam Onela, yuri, 200_success Aug 1 at 18:37
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – ÀάνÄα ῥεῖ, Josiah, Sam Onela, yuri, 200_success
add a comment |Â
add a comment |Â
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes