👑 Arcade Prince Robot: روبوت آركيد ملكي SVG بكود HTML و CSS جاهز للنسخ
01ما هو Arcade Prince Robot؟
Arcade Prince Robot هو تصميم روبوت SVG مستوحى من ألعاب الآركيد الكلاسيكية. يظهر بتاج ذهبي، جسم نيون، وعصا تحكم صغيرة تعطيه شكلًا ممتعًا ومميزًا.
يمكن استخدام هذا التصميم داخل المواقع التقنية، صفحات الألعاب، مشاريع HTML و CSS، صفحات الهبوط، أو المقالات التي تعرض أكواد جاهزة للنسخ. ويمكن مشاهدة gaming-king-robot من نفس مجموعة أكواد الروبوتات.
02مميزات روبوت أمير الآركيد
- تصميم SVG خفيف وسريع التحميل.
- يعمل باستخدام HTML و CSS فقط.
- يحتوي على تأثير توهج جميل.
- مناسب لمواقع الألعاب والبرمجة.
- سهل تعديل الألوان والحجم.
- لا يحتاج إلى مكتبات خارجية.
03طريقة استخدام الكود
انسخ الكود الأصلي من الصندوق الموجود بالأسفل، ثم ضعه داخل صفحة HTML أو داخل أداة HTML/JavaScript في بلوجر.
ولشرح استخدام وتخصيص أيقونات الروبوتات SVG، يمكنك مشاهدة svg-robot-icons-guide.
04كيفية تعديل الألوان
يمكنك تغيير ألوان الروبوت من خلال تعديل أكواد الألوان داخل عناصر SVG مثل fill وstroke في نسختك بعد نسخ الكود.
05الكود الكامل لروبوت Arcade Prince
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arcade Prince 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 glow {
0%, 100% {
filter: drop-shadow(0 0 15px rgba(255,215,0,0.5));
}
50% {
filter: drop-shadow(0 0 30px rgba(255,215,0,0.8));
}
}
.animate-glow {
animation: glow 2s ease-in-out infinite;
}
svg {
width: 260px;
height: 260px;
}
</style>
</head>
<body>
<div class="svg-container">
<svg viewBox="0 0 100 100" class="animate-glow" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Arcade Prince Robot">
<polygon points="50,20 30,35 35,35 35,45 65,45 65,35 70,35" fill="#FFD700" stroke="#FFA500" stroke-width="2"/>
<rect x="30" y="45" width="40" height="30" rx="5" fill="#0a0a0a" stroke="#ff00ff" stroke-width="3"/>
<rect x="35" y="55" width="30" height="12" fill="#ff00ff" opacity="0.8"/>
<rect x="35" y="58" width="30" height="3" fill="#FFD700"/>
<rect x="35" y="80" width="30" height="25" rx="5" fill="#4B0082" stroke="#FFD700" stroke-width="2"/>
<circle cx="50" cy="85" r="8" fill="#FFD700" stroke="#FFA500"/>
<line x1="50" y1="85" x2="50" y2="65" stroke="#E5E4E2" stroke-width="4"/>
<circle cx="50" cy="62" r="5" fill="#DC143C" stroke="#FFD700"/>
<circle cx="60" cy="95" r="3" fill="#50C878" stroke="#FFD700"/>
<circle cx="65" cy="90" r="3" fill="#0F52BA" stroke="#FFD700"/>
</svg>
</div>
</body>
</html>06أين يمكن استخدام Arcade Prince Robot؟
- في مواقع الألعاب.
- في مقالات البرمجة.
- في صفحات الأكواد الجاهزة.
- في مشاريع HTML و CSS التعليمية.
- في صفحات الهبوط التقنية.
- في بلوجر أو ووردبريس.
ومن نفس مجموعة أكواد الروبوتات يوجد أيضًا settings-bot-robot-svg.
07الخلاصة
Arcade Prince Robot هو روبوت SVG ممتع وخفيف يعطي الموقع لمسة ألعاب ونيون. الكود الأصلي جاهز للنسخ وسهل التعديل.
01هل يعمل الكود على بلوجر؟
نعم، يمكن إضافته داخل المقال من وضع HTML أو داخل أداة HTML/JavaScript.
02هل يحتاج الروبوت إلى JavaScript؟
لا، الكود الأصلي يعتمد على HTML و CSS و SVG.
03هل يمكن تغيير شكل الروبوت؟
نعم، بعد نسخ الكود يمكنك تعديل الألوان والحجم وبعض عناصر SVG حسب رغبتك.
.jpeg)
التعليقات
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.