Inspired by Dave Whyte’s circle wave.
forked from mbostock's block: Circle Wave
| license: gpl-3.0 | |
| border: no |
Inspired by Dave Whyte’s circle wave.
forked from mbostock's block: Circle Wave
| <!DOCTYPE html> | |
| <div class="slidecontainer"> | |
| Frequency: <input type="range" min="10" max="40" value="30" step="0.1" class="slider" id="freq"> | |
| </div> | |
| <svg width="960" height="500"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| const svg = d3.select("svg"), | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"), | |
| angles = d3.range(0, 2 * Math.PI, Math.PI / 200); | |
| const radius = 200; | |
| const path = svg.append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") | |
| .attr("fill", "none") | |
| .attr("stroke-width", 10) | |
| //.attr("stroke-linejoin", "round") | |
| .selectAll("path") | |
| .data(["cyan", "magenta", "yellow"]) | |
| .enter().append("path") | |
| .attr("stroke", d => d) | |
| .style("mix-blend-mode", "darken") | |
| .datum((d, i) => | |
| d3.radialLine() | |
| .curve(d3.curveLinearClosed) | |
| .angle(a => a) | |
| .radius(a => { | |
| const freq = Math.pow(10, +d3.select('.slider').node().value/10); | |
| const t = d3.now() / freq; | |
| return radius + Math.cos(a * 8 - i * 2 * Math.PI / 3 + t) * Math.pow((1 + Math.cos(a - t)) / 2, 3) * 32}) | |
| ) | |
| d3.timer(() => path.attr("d", d => d(angles))); | |
| </script> |
| ���� JFIF 8 8 ��@ICC_PROFILE 0appl mntrRGB XYZ � -acspAPPL APPL �� �-appl desc P bdscm � cprt � #wtpt � rXYZ gXYZ bXYZ , rTRC @ aarg L vcgt l 0ndin � >chad � ,mmod (bTRC @ gTRC @ aabg L aagg L desc Display mluc " |