how can i make these 2 svg blobs act different [closed]

.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>

asked Aug 1 at 18:05

Julia Spinelli Milani

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

If this question can be reworded to fit the rules in the help center, please edit the question.

add a commentÂ |Â

up vote
-2
down vote

favorite

<!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>

asked Aug 1 at 18:05

Julia Spinelli Milani

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

If this question can be reworded to fit the rules in the help center, please edit the question.

add a commentÂ |Â

up vote
-2
down vote

favorite

<!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>

asked Aug 1 at 18:05

Julia Spinelli Milani

<!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>

asked Aug 1 at 18:05

Julia Spinelli Milani

asked Aug 1 at 18:05

Julia Spinelli Milani

asked Aug 1 at 18:05

Julia Spinelli Milani

asked Aug 1 at 18:05

Julia Spinelli Milani

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

If this question can be reworded to fit the rules in the help center, please edit the question.

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

If this question can be reworded to fit the rules in the help center, please edit the question.

add a commentÂ |Â

active

oldest

votes

搜尋此網誌

trjhtr