Rank card [2]
===============
Example of a rank card card made using easy-pil


.. code-block:: python3

    from easy_pil import Canvas, Editor, Font, Text

    user_data = {  # Most likely coming from database or calculation
        "name": "Shahriyar#9770",  # The user's name
        "xp": "1.2k",
        "next_level_xp": "5k",
        "level": "5",
        "percentage": 45,
        "rank": 10,
    }

    background = Editor(Canvas((934, 282), "#23272a"))
    profile = Editor("assets/pfp.png").resize((190, 190)).circle_image()

    # For profile to use users profile picture load it from url using the load_image/load_image_async function
    # profile_image = load_image(str(ctx.author.avatar_url))
    # profile = Editor(profile_image).resize((150, 150)).circle_image()


    poppins = Font.poppins(size=30)

    background.rectangle((20, 20), 894, 242, "#2a2e35")
    background.paste(profile, (50, 50))
    background.ellipse((42, 42), width=206, height=206, outline="#43b581", stroke_width=10)
    background.rectangle((260, 180), width=630, height=40, fill="#484b4e", radius=20)
    background.bar(
        (260, 180),
        max_width=630,
        height=40,
        percentage=user_data["percentage"],
        fill="#00fa81",
        radius=20,
    )
    background.text((270, 120), user_data["name"], font=poppins, color="#00fa81")
    background.text(
        (870, 125),
        f"{user_data['xp']} / {user_data['next_level_xp']}",
        font=poppins,
        color="#00fa81",
        align="right",
    )

    rank_level_texts = [
        Text("Rank ", color="#00fa81", font=poppins),
        Text(f"{user_data['rank']}", color="#1EAAFF", font=poppins),
        Text("   Level ", color="#00fa81", font=poppins),
        Text(f"{user_data['level']}", color="#1EAAFF", font=poppins),
    ]

    background.multicolor_text((850, 30), texts=rank_level_texts, align="right")


    background.show()

Output
---------
.. image:: /_static/examples/rank_card2.png