mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
819 B
45 lines
819 B
6 years ago
|
<script>
|
||
|
import { spring } from 'svelte/motion';
|
||
|
|
||
1 year ago
|
let coords = spring(
|
||
|
{ x: 50, y: 50 },
|
||
|
{
|
||
|
stiffness: 0.1,
|
||
|
damping: 0.25
|
||
|
}
|
||
|
);
|
||
6 years ago
|
|
||
|
let size = spring(10);
|
||
|
</script>
|
||
|
|
||
6 years ago
|
<div style="position: absolute; right: 1em;">
|
||
6 years ago
|
<label>
|
||
|
<h3>stiffness ({coords.stiffness})</h3>
|
||
1 year ago
|
<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
|
||
6 years ago
|
</label>
|
||
|
|
||
|
<label>
|
||
|
<h3>damping ({coords.damping})</h3>
|
||
1 year ago
|
<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
|
||
6 years ago
|
</label>
|
||
|
</div>
|
||
|
|
||
6 years ago
|
<svg
|
||
1 year ago
|
on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
|
||
|
on:mousedown={() => size.set(30)}
|
||
|
on:mouseup={() => size.set(10)}
|
||
6 years ago
|
>
|
||
1 year ago
|
<circle cx={$coords.x} cy={$coords.y} r={$size} />
|
||
4 years ago
|
</svg>
|
||
|
|
||
|
<style>
|
||
1 year ago
|
svg {
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
margin: -8px;
|
||
|
}
|
||
|
circle {
|
||
|
fill: #ff3e00;
|
||
|
}
|
||
|
</style>
|