svgblock 1.0.0

• 🧭 How a Block Is Built
• 🚀 How to Use
• 🧱 Building a Block
  • Creating a block
  • Dividers
  • Text markers
  • Columns
  • Tables
  • Images
• 🎞️ Animations
  • Easings
  • Repeating
  • Sequences
• 🛠️ Customization
  • Editing a theme
  • Spacing
  • Animation
  • Creating your own theme
• 🎨 Themes
  • 1. Dark Colors
  • 2. Light Colors (Pastels)
  • 3. Seasons
  • 4. Drinks
  • 5. Countries & Geography
  • 6. Aesthetics & Culture
  • 7. Classical UI (Dev Themes)
  • 8. Mythology & Concepts
• 🩺 Troubleshooting

⬆ back to top

pip install svgblock

from svgblock import Block, RiseIn, Theme

(
    Block(theme=Theme.NEON, width=900, animation=RiseIn())
    .title("Hello, I'm Bob")
    .text("I build **small tools** in **pure Python** and I love open source.")
    .subsection("What I am learning")
    .text("Right now I am studying **graph algorithms** and **computer vision**.")
    .save("assets/block.svg")
)

python generate_blocks.py

<img src="assets/block.svg" alt="About me" width="900">

![About me](assets/block.svg)

from svgblock import Block, FadeIn, PopIn, Theme

Block(theme=Theme.DRACULA, animation=FadeIn()).title("About me").text("...").save("assets/about.svg")
Block(theme=Theme.NORD, animation=PopIn()).title("Projects").text("...").save("assets/projects.svg")

git clone https://github.com/JonatasCortes/svgblock.git
cd svgblock
pip install -e .

⬆ back to top

from svgblock import Block, FadeIn, Theme

Block(theme=Theme.RED, width=900, padding=32, animation=FadeIn())

.divider()      # full width
.divider(0.6)   # 60% of the width, centered

.text("**bold**, __underlined__, --struck-- and ##italic##")
.text(r"A literal \*\* needs a backslash before each asterisk.")

from svgblock import Block, Column, Theme

(
    Block(theme=Theme.NORD)
    .columns(
        Column(1).subsection("Weight 1").text("A narrow column."),
        Column(2).subsection("Weight 2").text("A column twice as wide."),
    )
)

.table(
    ["Language", "Level", "Typed"],
    [
        ["Python", "**Advanced**", True],
        ["Rust", "##Learning##", True],
        ["COBOL", "--Retired--", None],
    ],
    align=("left", "center", "center"),
    weights=(2, 2, 1),
    striped=True,
    row_dividers=True,
    column_dividers=True,
)

(
    Block(theme=Theme.NEON)
    .columns(
        Column().image("assets/logo.png", width=350),
        Column().subsection("A logo beside the text").text("The image sits in a column and the text takes the rest of the width."),
    )
)

⬆ back to top

from svgblock import Block, PopIn, RiseIn, RiseOut, Sequence, Show, Hide

# Default values
Block(animation=RiseIn())

# A configured animation
Block(animation=RiseIn(distance=80, duration=1.2))

# A sequence: enter, rest for 3 seconds and enter again, forever
Block(animation=Sequence(PopIn(), Show(3), loop_limit=None))

# Enter, rest and leave, forever
Block(animation=Sequence(RiseIn(), Show(2), RiseOut(), Hide(0.5), loop_limit=None))

from svgblock import Bounce, CubicBezier, DropIn, EaseOutBack, RiseIn, Spring, Steps

RiseIn(easing=EaseOutBack())
RiseIn(easing=CubicBezier(0.4, 0, 0.2, 1))
RiseIn(easing=Steps(10))
RiseIn(easing=Spring(), duration=1.4)
DropIn(distance=120, fade=False, easing=Bounce(), duration=1.4)

from svgblock import Float, Pulse

Pulse()                  # runs once
Pulse(loop_limit=4)      # runs five times
Pulse(loop_limit=None)   # never stops
Float(loop_limit=None)   # any ambient animation works the same way

from svgblock import (Float, Hide, PopIn, Pulse, RiseIn, RiseOut, Sequence, Show,
                      ZoomIn, ZoomOut)

Sequence(PopIn(), Show(3), loop_limit=None)

Sequence(Hide(0.5), RiseIn(), Pulse(loop_limit=1), Show(2), loop_limit=None)

# Enter, float for three runs, leave
Sequence(RiseIn(), Float(loop_limit=2), RiseOut(), loop_limit=None)

Sequence(ZoomIn(), Show(2), ZoomOut(), Hide(0.5), loop_limit=None)

⬆ back to top

from svgblock import Block, Theme

# Changes the theme for the whole program: set it before building the blocks
Theme.RED.value.update(title_text="#FF9900", title_bar="#FF9900")
Block(theme=Theme.RED).title("Orange titles on the red theme")

# Makes a variation and keeps the original untouched
softer_red = Theme.RED.value.copy()
softer_red.update(background_center="#2A1414", text="#FFD9D9")
Block(theme=softer_red).title("A softer red")

from svgblock import (DropIn, FadeIn, FlipIn, FocusIn, Jelly, Linear, PopIn, Pulse,
                      RiseIn, Shake, SlideIn, SpinIn, Sway, UnfoldIn)

RiseIn(distance=80, duration=1.6, fade=False)
DropIn(distance=20, duration=0.4)
SlideIn(direction="left", distance=120)
PopIn(start_scale=0.3, duration=1.2)
SpinIn(angle=-120, focus=True)
FlipIn(axis="vertical")
UnfoldIn(edge="left", fade=True)
FocusIn(blur=16, duration=1.6)
Pulse(amount=0.1, duration=1, loop_limit=4)
Sway(angle=8, pivot="bottom", loop_limit=None)
Shake(amount=16, shakes=10)
FadeIn(duration=2, easing=Linear())

from svgblock import Block, ThemeData

ocean = ThemeData(
    background_center="#1B2B34", background_edge="#0B1014",
    border_start="#6699CC", border_end="#223344",
    title_text="#99C794", title_bar="#99C794",
    subsection_text="#FAC863", subsection_marker="#FAC863",
    text="#D8DEE9", highlight="#FFFFFF",
    underline="#6699CC", strikethrough="#65737E", italic="#C0C5CE",
    table_background="#10181D", table_header_background="#223540",
    table_header_text="#99C794", table_text="#D8DEE9",
    table_divider="#33505F", table_stripe_background="#15222A",
    table_border="#33505F", divider="#6699CC",
)

Block(theme=ocean).title("Ocean").text("A theme created in my own code.").save("assets/ocean.svg")

⬆ back to top

from svgblock import Block, Theme

Block(theme=Theme.DRACULA)

# List every ready-made theme
for theme in Theme:
    print(theme.name)

⬆ back to top

⬆ back to top