Este código crea un efecto visual dinámico donde una burbuja interactiva sigue el cursor del usuario, mejorado con efectos de ruido y gradientes que se aplican usando SVG y filtros CSS avanzados.
Gradiente Interactivo y Burbuja: Usa HTML para la estructura y JavaScript para hacer que una burbuja siga el movimiento del ratón, creando una experiencia dinámica y atractiva. 🖱️✨
Estilos y Efectos: Aplica estilos CSS para crear fondos de gradiente que cambian de color al pasar el ratón. También se utiliza CSS para posicionar y diseñar los elementos, así como para aplicar efectos de ruido visual con SVG. 🎨🔊
<div class="card">
<svg
viewBox="0 0 100% 100%"
xmlns='http://www.w3.org/2000/svg'
class="noise"
>
<filter id='noiseFilter'>
<feTurbulence
type='fractalNoise'
baseFrequency='0.85'
numOctaves='6'
stitchTiles='stitch' />
</filter>
<rect
width='100%'
height='100%'
preserveAspectRatio="xMidYMid meet"
filter='url(#noiseFilter)' />
</svg>
<div class="content">
<h1>Explicación del Efecto "Interactive Gradient" con SVG y JavaScript</h1>
<p>Este código crea un efecto visual dinámico donde una burbuja interactiva sigue el cursor del usuario, mejorado con efectos de ruido y gradientes que se aplican usando SVG y filtros CSS avanzados. Este tipo de efecto puede ser utilizado para hacer interfaces más atractivas y responsivas.</p>
</div>
</div>
<div class="gradient-bg">
<svg
viewBox="0 0 100vw 100vw"
xmlns='http://www.w3.org/2000/svg'
class="noiseBg"
>
<filter id='noiseFilterBg'>
<feTurbulence
type='fractalNoise'
baseFrequency='0.6'
stitchTiles='stitch' />
</filter>
<rect
width='100%'
height='100%'
preserveAspectRatio="xMidYMid meet"
filter='url(#noiseFilterBg)' />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="svgBlur">
<defs>
<filter id="goo">
<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 18 -8" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
<div class="gradients-container">
<div class="g1"></div>
<div class="g2"></div>
<div class="g3"></div>
<div class="g4"></div>
<div class="g5"></div>
<div class="interactive"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const interBubble = document.querySelector('.interactive');
let curX = 0;
let curY = 0;
let tgX = 0;
let tgY = 0;
const move = () => {
curX += (tgX - curX) / 20;
curY += (tgY - curY) / 20;
interBubble.style.transform = `translate(${Math.round(curX)}px, ${Math.round(curY)}px)`;
requestAnimationFrame(move);
};
window.addEventListener('mousemove', event => {
tgX = event.clientX;
tgY = event.clientY;
});
move();
});
</script>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
:root {
--color-bg1: rgb(8, 10, 15);
--color-bg2: rgb(0, 17, 32);
--color1: 18, 113, 255;
--color2: 107, 74, 255;
--color3: 100, 100, 255;
--color4: 50, 160, 220;
--color5: 80, 47, 122;
--color-interactive: 140, 100, 255;
--circle-size: 80%;
--blending: hard-light;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #FFF;
border: none;
}
body {
overflow-x: hidden;
}
.card {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
user-select: none;
max-width: 600px;
padding: 48px;
margin-top: 60px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 8px;
box-shadow: 0 4px 90px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card:before {
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: white;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 34%, white 89%, rgba(255, 255, 255, 0) 100%);
opacity: 0.3;
filter: blur(0.5px);
mix-blend-mode: hard-light;
}
.card .noise {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
opacity: 0.1;
}
.card .content {
position: relative;
z-index: 2;
text-shadow: -3px 0px 2px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 3rem;
margin-bottom: 16px;
}
p {
line-height: 1.6;
}
@keyframes moveInCircle {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes moveVertical {
0% {
transform: translateY(-50%);
}
50% {
transform: translateY(50%);
}
100% {
transform: translateY(-50%);
}
}
@keyframes moveHorizontal {
0% {
transform: translateX(-50%) translateY(-10%);
}
50% {
transform: translateX(50%) translateY(10%);
}
100% {
transform: translateX(-50%) translateY(-10%);
}
}
.gradient-bg {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
top: 0;
left: 0;
}
.gradient-bg .svgBlur {
display: none;
}
.gradient-bg .noiseBg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
mix-blend-mode: soft-light;
opacity: 0.3;
}
.gradient-bg .gradients-container {
filter: url(#goo) blur(40px);
width: 100%;
height: 100%;
}
.gradient-bg .g1 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
mix-blend-mode: var(--blending);
width: var(--circle-size);
height: var(--circle-size);
top: calc(50% - var(--circle-size) / 2);
left: calc(50% - var(--circle-size) / 2);
transform-origin: center center;
animation: moveVertical 30s ease infinite;
opacity: 1;
}
.gradient-bg .g2 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
mix-blend-mode: var(--blending);
width: var(--circle-size);
height: var(--circle-size);
top: calc(50% - var(--circle-size) / 2);
left: calc(50% - var(--circle-size) / 2);
transform-origin: calc(50% - 400px);
animation: moveInCircle 20s reverse infinite;
opacity: 1;
}
.gradient-bg .g3 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
mix-blend-mode: var(--blending);
width: var(--circle-size);
height: var(--circle-size);
top: calc(50% - var(--circle-size) / 2 + 200px);
left: calc(50% - var(--circle-size) / 2 - 500px);
transform-origin: calc(50% + 400px);
animation: moveInCircle 40s linear infinite;
opacity: 1;
}
.gradient-bg .g4 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
mix-blend-mode: var(--blending);
width: var(--circle-size);
height: var(--circle-size);
top: calc(50% - var(--circle-size) / 2);
left: calc(50% - var(--circle-size) / 2);
transform-origin: calc(50% - 200px);
animation: moveHorizontal 40s ease infinite;
opacity: 0.7;
}
.gradient-bg .g5 {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
mix-blend-mode: var(--blending);
width: calc(var(--circle-size) * 2);
height: calc(var(--circle-size) * 2);
top: calc(50% - var(--circle-size));
left: calc(50% - var(--circle-size));
transform-origin: calc(50% - 800px) calc(50% + 200px);
animation: moveInCircle 20s ease infinite;
opacity: 1;
}
.gradient-bg .interactive {
position: absolute;
background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
mix-blend-mode: var(--blending);
width: 100%;
height: 100%;
top: -50%;
left: -50%;
opacity: 0.7;
}
/* Media Queries para Responsive Design */
@media (max-width: 1200px) {
.card {
padding: 40px;
max-width: 500px;
}
h1 {
font-size: 2.5rem;
}
}
@media (max-width: 992px) {
.card {
padding: 32px;
max-width: 400px;
}
h1 {
font-size: 2rem;
}
p {
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
.card {
padding: 24px;
max-width: 350px;
margin-top: 40px;
}
h1 {
font-size: 1.75rem;
}
p {
font-size: 0.85rem;
}
}
@media (max-width: 576px) {
.card {
padding: 16px;
max-width: 300px;
margin-top: 20px;
}
h1 {
font-size: 1.5rem;
}
p {
font-size: 0.8rem;
}
}