Ilustración de huevo SVG: ejemplo de código

Abrir en el editor Publica tu código

Recomendado

20 August 2024

Cargador de juego de Subway Surfers Houston

30 December 2024

<circle cx="75" cy="110" r="28" 
           fill="url(#yolkGradient)" 
           class="egg-yolk"/>

<ellipse cx="68" cy="105" rx="8" ry="6" 
            fill="#fff59d" opacity="0.7"/>

<ellipse cx="85" cy="90" rx="12" ry="15" 
            fill="white" opacity="0.3"/>

<defs>
    <radialGradient id="eggWhiteGradient" cx="0.3" cy="0.3">
     <stop offset="0%" stop-color="#ffffff"/>
     <stop offset="70%" stop-color="#f5f5f5"/>
     <stop offset="100%" stop-color="#e8e8e8"/>
    </radialGradient>

</body>

CSS

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}
body {
 font-family: Arial, sans-serif;
 background: black;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content:center;
 height: 100vh;
 width:100vw;
}

.container-frigideira {
 z-index:1;
 animation: mexerPanela 2.5s ease-in-out infinite;

}
.ovo-container{
 z-index:-1;
 left:20px;
 top:85px;
 transform:rotateX(55deg);
 animation: sincronizarComPanela 2.5s linear infinite;
}

@keyframes sincronizarComPanela {
 0%, 50% {
  transform: translateX(20px) translateY(45px) rotateX(55deg);
 }
 75% {
  transform: translateX(20px) translateY(-100px) rotateX(55deg);
 }
 85%{transform:  translateX(20px) translateY(-100px)  rotateX(225deg);}
 100% {
  transform: translateX(20px) translateY(45px) rotateX(225deg); 
 }
}

@keyframes mexerPanela {

0% { transform: translateX(0); }
 10% { transform: translateX(-25px); }
 20% { transform: translateX(25px); }  
 30% { transform: translateX(-25px); } 
 40% { transform: translateX(25px); } 
 45%{
  transform:translateX(0);
 }
 50% { transform: translateX(0) translateY(-10px); } 
 60% { transform: translateX(0) translateY(0); }   
 100% { transform: translateX(0); }
}

.frigideira {
 width: 120px;
 height: 35px;
 transform:rotateZ(180deg);
 background: linear-gradient(to bottom, #34495e, #2c3e50);
 clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
 position: absolute;
}

/* Cabo da frigideira */
.cabo {
 position: relative;
 left:150%;
 top: 50%;
 width: 80px;
 height: 8px;
 background: linear-gradient(to right, #8B4513, #A0522D);
 border-radius: 4px;

}

Ilustración de huevo SVG: ejemplo de código

Recomendado

Tarjeta de bicicleta Pure CSS

Cargador de juego de Subway Surfers Houston

Un código de cleancloud199

HTML

CSS

JS

Recomendado

Tarjeta de bicicleta Pure CSS

Cargador de juego de Subway Surfers Houston

Un código de cleancloud199

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS