From USOM

USOM

USOM, amplop berwajah. Bersama layanan email khusus menerima «USOM Mail», ia memandu Anda di situs dan aplikasi. Ia lahir dari sebuah permintaan: membuatnya «lucu seperti pencuri roti». Karya seni dan kode implementasinya dipublikasikan di bawah CC BY 4.0.

Bagaimana ia dibuat

Karena ini amplop yang dipersonifikasikan apa adanya, bagian-bagiannya dipinjam dari gaya ilustrasi datar yang sudah ada. Dasarnya tetap; hanya lengan, kaki, dan ekspresi yang diganti. Semua gerakan adalah CSS, dan berhenti saat prefers-reduced-motion.

  • Panel membulatBadan amplop. Dasar yang tidak pernah bergerak di pose apa pun.
  • PenutupSatu V tipis dari tepi atas ke dalam. Lipatan.
  • Lencana perisaiPerisai ungu dengan tanda centang. Tanda «penerimaan dikonfirmasi». Tetap di kanan bawah.
  • Cincin gandaLingkaran konsentris garis penuh dan putus-putus di latar. Hiasan yang hanya menyiratkan kehadiran.
  • Lengan, kaki, ekspresiSatu-satunya bagian yang berubah. Pose dan ekspresi diganti sesuai penempatan.

Pose

Pose berubah sesuai penempatan. Masing-masing ditampilkan seperti benar-benar dipakai.

walkMelintasi hero dan footerBerjalan. Badan bergoyang dan pergelangan kaki bergerak-gerak.
waveKotak masuk kosongMelambai dengan satu tangan di tempat. Di latar putih, garis gambar menjadi gelap.
peekDi samping judul bagianMembungkuk dan mengintip melewati tepi. Ditempatkan kecil.
lostHalaman 404Mengangkat kedua tangan, panik. Tanda «?» juga bergetar.

Cara memakainya (lisensi)

Creative Commons Atribusi 4.0 Internasional (CC BY 4.0). Beri kredit, dan Anda boleh memodifikasi serta memakainya untuk tujuan komersial.

  • Anda boleh menyalin, memodifikasi, dan mendistribusikan ulang (termasuk komersial)
  • Anda boleh mengubah pose atau warna dan memakainya di produk Anda sendiri
  • Anda tidak boleh menghilangkan baris kredit
  • Anda tidak boleh memakainya dengan cara yang menyiratkan USOM Mail mendukung atau berafiliasi dengan Anda

Baris kredit

USOM by USOM Mail — CC BY 4.0
https://creativecommons.org/licenses/by/4.0/

SVG

SVG pose standar (walk). Ganti --m-* dengan warna yang Anda suka.

Unduh usom.svg