🤖 Cute Bot Robot: روبوت لطيف SVG متحرك بكود HTML و CSS جاهز للنسخ

يا غوالي أهلاً بكم في عالم الإبداع والبرمجة على Wowolabs 🚀

إذا كنت تبحث عن روبوت لطيف وخفيف تضيفه لموقعك أو مشروعك، فهذا التصميم مناسب لك. Cute Bot Robot يعطي الصفحة شكلًا مرحًا وتفاعليًا.

التصميم مبني باستخدام HTML و CSS و SVG فقط، بدون مكتبات خارجية وبدون ملفات ثقيلة.

Cute Bot Robot SVG روبوت لطيف متحرك بكود HTML CSS

ما هو Cute Bot Robot؟

Cute Bot Robot هو تصميم روبوت SVG لطيف يعمل مباشرة داخل المتصفح. يظهر بوجه مبتسم وألوان جميلة وحركة طفو خفيفة تعطي الصفحة إحساسًا بالحياة.

يمكن استخدام هذا الروبوت داخل مواقع الأطفال، صفحات البرمجة، مشاريع HTML و CSS، صفحات الترحيب، أو المقالات التي تعرض أكواد جاهزة للنسخ.

مميزات الروبوت اللطيف

تصميم SVG خفيف وسريع التحميل.
يعمل باستخدام HTML و CSS فقط.
يحتوي على حركة طفو بسيطة.
مناسب للمواقع التعليمية والبرمجية.
سهل تعديل الألوان والحجم.
لا يحتاج إلى JavaScript أو مكتبات خارجية.

المعاينة الحية للروبوت

👁️ معاينة Cute Bot Robot

طريقة استخدام الكود

انسخ الكود من الصندوق الموجود بالأسفل، ثم ضعه داخل صفحة HTML أو داخل أداة HTML/JavaScript في بلوجر. سيظهر الروبوت اللطيف مباشرة بدون إعدادات صعبة.

كيفية تعديل الألوان

يمكنك تغيير ألوان الروبوت من داخل عناصر SVG. مثلًا تستطيع تعديل هذه القيم:

fill="#f97316"
fill="#10b981"
fill="#ec4899"
stroke="#1e293b"

غيّر هذه الألوان لأي ألوان تناسب موقعك أو مشروعك.

الكود الكامل لروبوت Cute Bot

📄 كود Cute Bot Robot جاهز للنسخ

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cute Bot Robot</title>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.svg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

svg {
    width: 220px;
    height: 220px;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.2));
}
</style>
</head>

<body>

<div class="svg-container">
    <svg viewBox="0 0 100 100" class="animate-float" role="img" aria-label="Cute Bot Robot">
        <circle cx="50" cy="70" r="25" fill="#f97316" stroke="white" stroke-width="3"/>
        <circle cx="40" cy="75" r="8" fill="white"/>
        <circle cx="60" cy="75" r="8" fill="white"/>
        <circle cx="40" cy="75" r="4" fill="#1e293b"/>
        <circle cx="60" cy="75" r="4" fill="#1e293b"/>
        <path d="M42,62 Q50,68 58,62" fill="none" stroke="#1e293b" stroke-width="3" stroke-linecap="round"/>
        <circle cx="32" cy="68" r="4" fill="#ec4899" opacity="0.6"/>
        <circle cx="68" cy="68" r="4" fill="#ec4899" opacity="0.6"/>
        <rect x="35" y="30" width="30" height="25" rx="8" fill="#10b981" stroke="white" stroke-width="2"/>
        <rect x="42" y="38" width="16" height="10" fill="#1e293b" stroke="#f8fafc"/>
        <text x="50" y="45" text-anchor="middle" fill="#10b981" font-size="8" font-weight="bold">Hi!</text>
        <rect x="38" y="15" width="8" height="15" fill="#1e293b" stroke="white"/>
        <rect x="54" y="15" width="8" height="15" fill="#1e293b" stroke="white"/>
    </svg>
</div>

</body>
</html>

أين يمكن استخدام Cute Bot Robot؟

في صفحات الترحيب.
في مواقع التعليم والأطفال.
في مقالات البرمجة.
في صفحات الأكواد الجاهزة.
في مشاريع HTML و CSS التعليمية.
في بلوجر أو ووردبريس.

أسئلة شائعة

هل يعمل الكود على بلوجر؟

نعم، يمكن إضافته داخل المقال من وضع HTML أو داخل أداة HTML/JavaScript.

هل يحتاج الروبوت إلى JavaScript؟

لا، التصميم يعمل باستخدام HTML و CSS و SVG فقط.

هل يمكن تغيير ألوان الروبوت؟

نعم، يمكنك تعديل ألوان الوجه والرأس والخدود من داخل كود SVG.

هل التصميم مناسب للهاتف؟

نعم، التصميم خفيف ويظهر بشكل جيد على الشاشات الصغيرة والكبيرة.

الخلاصة

Cute Bot Robot هو روبوت SVG لطيف وخفيف مناسب للمواقع التعليمية وصفحات الترحيب ومقالات البرمجة. الكود جاهز للنسخ، سهل التعديل، ولا يحتاج إلى مكتبات خارجية.

wowo

Cute Bot Robot SVG | كود روبوت لطيف متحرك HTML و CSS جاهز