const options = ['rectangle', 'oval', 'circle', 'diamond']

let shape

let branches = 1

</script>

<div class="container">

<div>

<label>

Shape<br/>

<select bind:value={shape}>

{#each options as option}

<option>{option}</option>

{/each}

</select>

</label>

<label>

Branches<br/>

<input bind:value={branches} type="number"/>

</label>

</div>

<svg width=400 height=400 viewBox="0 0 100 100">

{#if branches % 2 == 1}

<line x1=50 y1=30 x2=50 y2=60/>

{/if}

{#if Number(branches) > 1}

{#each Array(Math.floor(branches/2)) as _, i}

<line x1=50 y1=30 x2=50 y2=60 style="transform: rotate(-{10 * (i+1)}deg); transform-origin: 50px 30px;"/>

{/each}