<script>
import { tick, onMount } from 'svelte';
import Pie from './Pie.svelte';
import Pie2 from './Pie2.svelte';
let siz = 500;
let ratios = [25,48,12,12,2]; // doesn't need to add up to 100
let colours = ['tomato','gray','blue','yellowgreen','yellow'];
let segmentTitles = ['quart','semi','eighth','more eighth','smidgin`'];
let titles = ['Title here','Sub-title'];
let segmentTitles2 = [];
let holeRadius = 55;
let bForceRedraw =true;
let rand = makerand();
function makerand() {
let rand=[];
for(let i=0;i<9;i++) {
let r = (Math.random()*36+5)|0;
rand.push(r);
segmentTitles2[i] = 'Slice '+i+' is '+r+'%';
}
let rest = rand.reduce((acc,r)=>acc-r,100);
bForceRedraw=!bForceRedraw;
return rand;
}
let scale=15;
let freq=0.05;
</script>
Scale:<input type="range" bind:value={scale}/>{scale}<br>
BaseFreq:<input type="range" min="0" max="1" step="0.05" bind:value={freq}/>{freq}<br>
<button on:click={()=>rand=makerand()}>Random</button><br>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="{0} {0} {siz} {siz}">
<filter id="xkcdify-pie"><feTurbulence type="fractalNoise" baseFrequency={freq} result="noise"></feTurbulence><feDisplacementMap scale={scale} xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="noise"></feDisplacementMap></filter>
<g style="filter: url(#xkcdify-pie)">