SVG अंडा चित्रण: कोड उदाहरण

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

3 May 2025

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

}

SVG अंडा चित्रण: कोड उदाहरण

अनुशंसित

वेबलेब द्वारा एक कोड

मेटेहन द्वारा एक कोड

मेटेहन द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

वेबलेब द्वारा एक कोड

मेटेहन द्वारा एक कोड

मेटेहन द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS