SVG | HTML

Halo! IT Corner hari ini saya mempelajari tentang SVG dalam HTML. Apa itu SVG? Nah, SVG itu sebuah grafik yang scalable, artinya jika diperbesar atau diubah ukurannya tidak akan hilang kualitas gambarnya.

SVG dibuat dengan menggunakan elemen <svg>. Elemen ini digunakan sebagai wadah untuk grafik-grafiknya. Setelah itu, diberi ukuran, misalnya 500px × 500px. Untuk grafiknya sendiri ada beberapa jenis sebagai berikut.

Grafik yang pertama adalah lingkaran yang dibuat dengan elemen <circle>. Untuk atributnya ada cx, cy, r, fill, stroke, dan stroke-width. Atribut cx dan cy adalah posisi koordinatnya. Atribut r adalah radiusnya. Atribut fill adalah warna dalamnya. Atribut stroke adalah warna bordernya, dan stroke-width adalah ketebalan bordernya.

Grafik kedua adalah persegi panjang yang dibuat dengan elemen <rect>. Untuk atributnya ada x, y, width, height, fill, stroke, dan stroke-width. Atribut x dan y adalah posisi koordinatnya. Atribut width adalah panjangnya, dan height adalah lebarnya. Atribut fill adalah warna dalamnya. Atribut stroke adalah warna bordernya, dan stroke-width adalah ketebalan bordernya.

Grafik yang ketiga adalah polygon yang dibuat dengan elemen <polygon>. Untuk atributnya hanya ada points. Namun bisa diberi style, seperti fill, fill-rule, stroke, dan stroke-width. Atribut points adalah posisi titik-titik dalam suatu koordinat. Style fill adalah warna polygonnya, dan fill-rule adalah algoritma untuk menentukan warna. Style stroke adalah warna bordernya, dan stroke-width adalah ketebalan bordernya.

Grafik keempat adalah ellipse yang dibuat dengan elemen <ellipse>. Untuk atributnya ada cx, cy, rx, ry, fill, stroke, dan stroke-width. Atribut cx dan cy adalah posisi koordinatnya. Atribut rx dan ry adalah radiusnya. Atribut fill adalah warna dalamnya. Atribut stroke adalah warna bordernya, dan stroke-width adalah ketebalan bordernya.

Grafik kelima adalah teks yang dibuat dengan elemen <text>. Untuk atributnya ada x, y, fill, font-family, dan font-size. Atribut x dan y adalah posisi koordinatnya. Atribut fill adalah warna teksnya. Atribut font-family adalah jenis fontnya, dan font-size adalah ukuran fontnya.

Itu saja untuk materi SVG, selamat jumpa di blog materi berikutnya!

Project Source Code

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Graphic</title>
    <style>
        body {
            background-color: black;
            padding: 10px;
        }
        svg {
            background-color: rgb(15, 15, 15);
            border: 4px solid white;
            border-radius: 4px;
            display: block;
            margin: auto;
        }
        .svg-container {
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="svg-container">
        <svg width="1000" height="510">
            <polygon points="250,140 150,300 350,300"
            style="fill: none; stroke: white; stroke-width: 6; fill-rule: evenodd;"></polygon>
            <polygon points="250,160 170,290 330,290"
            style="fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 4; fill-rule: evenodd;"></polygon>
            <polygon points="250,180 190,280 310,280"
            style="fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 2; fill-rule: evenodd;"></polygon>

            <circle cx="250" cy="245" r="50" fill="none" stroke="white" stroke-width="4"></circle>
            <rect x="255" y="253" width="15" height="71" fill="white" stroke="white" stroke-width="2"></rect>
            <rect x="230" y="270" width="15" height="54" fill="white" stroke="white" stroke-width="2"></rect>
            <polygon points="245,252 238,266 169,231 176,217"
            style="fill: white; stroke: white; stroke-width: 1; fill-rule: evenodd;"></polygon>
            <polygon points="241,223 234,237 180,210 187,196"
            style="fill: white; stroke: white; stroke-width: 1; fill-rule: evenodd;"></polygon>
            <polygon points="244,231 251,245 320,210 313,196"
            style="fill: white; stroke: white; stroke-width: 1; fill-rule: evenodd;"></polygon>
            <polygon points="271,244 278,258 332,231 325,217"
            style="fill: white; stroke: white; stroke-width: 1; fill-rule: evenodd;"></polygon>

            <text fill="white" x="570" y="250" font-size="45" font-family="Lucida Console">Welcome</text>
            <text fill="white" x="640" y="320" font-size="40" font-family="Lucida Console" font-style="italic">Overseer</text>

            <text fill="white" x="370" y="450" font-size="25" font-family="Lucida Console">Begin simulation</text>
            <polygon points="350,440 330,430 330,450"
            style="fill: white; stroke: white; stroke-width: 1; fill-rule: evenodd;"></polygon>
            <polygon points="320,440 300,430 300,450"
            style="fill: rgba(255, 255, 255, 0.75); stroke: rgba(255, 255, 255, 0.75); stroke-width: 1; fill-rule: evenodd;"></polygon>
            <polygon points="630,440 650,430 650,450"
            style="fill: white; stroke: white; stroke-width: 1; fill-rule: evenodd;"></polygon>
            <polygon points="660,440 680,430 680,450"
            style="fill: rgba(255, 255, 255, 0.75); stroke: rgba(255, 255, 255, 0.75); stroke-width: 1; fill-rule: evenodd;"></polygon>
        </svg>
    </div>
</body>
</html>

Login & Registration Form | Project

Halo! Hari ini saya membuat project tentang form login dan registrasi. Sebenarnya ini sama saja dengan yang blog materi HTML Form itu, tapi yang ini lebih lengkap dengan tambahan form login. Versi yang baru ini lebih bagus dari versi yang lama dengan UI-nya yang lebih elegen serta fitur redirect untuk login di bagian kanan atas. Versi ini mengurangi tujuh jenis input menjadi tiga, yaitu hanya email, username, dan password. Untuk password-nya sendiri, akan dicek apakah password-nya minimal 8 karakter. Untuk bagian login-nya, terdapat redirect untuk registrasi di kanan atas juga serta di bawah tombol "Masuk". Di sini juga terdapat link jika pengguna lupa password-nya. Untuk inputnya sendiri hanya ada dua, yaitu yang atas untuk email atau username, dan yang bawah untuk password. Tidak lupa juga, UI kedua form ini saya mengambil inspirasi dari beberapa website seperti Roblox, Pixiv, Twitter (X), dan Github. Itu saja untuk blog ini tentang project login dan registration form. Samp...

Brillianta Febimas Winawan

Search This Blog

SVG | HTML

Labels

Comments

Post a Comment

Popular posts from this blog

Form Input | HTML

Login & Registration Form | Project