Quarto Basics

import ipywidgets as widgets
from IPython.display import display, HTML
import traitlets

# Create SVG images for different slider values
def get_svg_for_value(value):
    svgs = [
        # SVG 1: Red circle
        '''<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <circle cx="50" cy="50" r="40" fill="red" />
        </svg>''',
        
        # SVG 2: Blue square 
        '''<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="80" height="80" fill="blue" />
        </svg>''',
        
        # SVG 3: Green triangle
        '''<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <polygon points="50,10 90,90 10,90" fill="green" />
        </svg>''',
        
        # SVG 4: Purple star
        '''<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <path d="M50,10 L61,38 L90,38 L67,55 L75,83 L50,68 L25,83 L33,55 L10,38 L39,38 Z" fill="purple" />
        </svg>''',
        
        # SVG 5: Orange hexagon
        '''<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <polygon points="50,10 90,30 90,70 50,90 10,70 10,30" fill="orange" />
        </svg>'''
    ]
    index = min(max(0, int(value)), len(svgs) - 1)
    return svgs[index]

# Create a slider widget
slider = widgets.IntSlider(
    value=0,
    min=0,
    max=4,
    step=1,
    description='Shape:',
    continuous_update=True
)

# Output widget to display the SVG
output = widgets.Output()

# Function to update the display when slider changes
def update_svg(change):
    svg_str = get_svg_for_value(change['new'])
    with output:
        output.clear_output(wait=True)
        display(HTML(f'<div style="width:300px; height:300px">{svg_str}</div>'))

# Connect the callback to the slider
slider.observe(update_svg, names='value')

# Initial display
update_svg({'new': slider.value})

# Display widgets
display(slider)
display(output)