21:null 22:["$","title",null,{"children":"Reimplementating an animated SVG icon by Chris Gannon | Kelley van Evert | Observable"}] 27:T584,remake = { const r = 128; const center = [ 400, 310 ]; const { w, o_from, o_to, b_from, b_to, bp, dy } = params; const bulge = Math.min((1/bp) * r, 99999); return html``; }28:T643,{ const r = 128; const w = 20; const center = [ 400, 310 ]; const { o_from, o_to, b_from, b_to, bp, dy, base } = o2; const bulge = Math.min((1/bp) * r, 99999); return html``; }29:T60c,function make_timeline (o) { const timeline = anime.timeline({ autoplay: false }) .add({ targets: [o], easing: "easeOutQuad", duration: 500, dy: -50, }) .add({ targets: [o], easing: "easeInQuad", duration: 500, dy: 33, }) .add({ targets: [o], easing: "linear", duration: 50, offset: "-=50", bp: 1, }) .add({ targets: [o], easing: "linear", duration: 1, o_from: 180 - 28, o_to: 180 + 28, base: 0, }) .add({ targets: [o], easing: "easeOutElastic", duration: 2000, dy: -20, }) .add({ targets: [o], easing: "easeInBack", duration: 2000, offset: "-=2000", o_from: 0, o_to: 0, }) .add({ targets: [o], easing: "easeInBack", duration: 1500, offset: "-=1500", b_from: 0, b_to: 360, }) .add({ targets: [o], easing: "linear", duration: 4000, delay: 500, o_to: 360, }) .add({ targets: [o], easing: "easeInBack", duration: 1200, dy: 245, }) .add({ targets: [o], easing: "easeOutQuad", duration: 1000, delay: 1000, dy: 480, o_from: 180 - 28, o_to: 180 + 28, b_from: 180, b_to: 180, }) .add({ targets: [o], easing: "linear", duration: 1, base: 1, o_from: 180, o_to: 180, }) .add({ targets: [o], easing: "linear", duration: 50, bp: 0, }) anime.speed = 1.52; return timeline; }2a:T951,icon_component = Vue.component("download-icon", { template:``, props: ["downloading", "progress"], data () { return { // constants r: 128, center: [ 400, 310 ], w: 18, // general parameters o_from: 180, o_to: 180, b_from: 180, b_to: 180, bp: 0, dy: 0, base: 1, // data timeline: false, }; }, computed: { bulge () { return Math.min((1/this.bp) * this.r, 99999); }, }, watch: { downloading (b) { console.log("downloading", b); if (b) { this.timeline.seek(0); this.timeline.play(); } else { this.timeline.pause(); this.timeline.seek(0); } }, }, methods: { svg_arc, start_download () { this.timeline.seek(0); this.timeline.play(); }, }, created () { this.timeline = make_timeline(this.$data); }, })2b:[] 25:{"id":"24f11528cae11347","slug":"reimplementating-an-animated-svg-icon-by-chris-gannon","title":"Reimplementating an animated SVG icon by Chris Gannon","thumbnail":"c47367948c46ea8f680a2c19dbff8cb627466ab1dc70fa39ea6ec00083cac58c","access_level":"public","create_time":"$D2018-10-20T13:49:34.095Z","update_time":"$D2019-10-13T20:03:18.086Z","view_time":null,"first_public_time":"$D2018-10-20T19:55:04.957Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":1247,"publish_version":1247,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Reimplementating an animated SVG icon by Chris Gannon","cells":[{"id":0,"value":"md`# Reimplementating an animated SVG icon by Chris Gannon`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"md`This notebook is about reimplementing Chris Gannon's nice animated SVG download icon, which [can be found here](https://codepen.io/chrisgannon/pen/NNJLrY). Because I like SVG, but I don't especially like animation, and neither do I have any experience with it or any animation tools. So, I'm going to be perfectionist about this guy :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"md`## Step 1: Making the SVG manageable / getting it parametrized`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"viewof params = paged({\n w: slider({ min: 10, max: 20, value: 18, title: \"stroke-width\" }),\n o_from: slider({ min: 0, max: 360, step: 1, value: 244, title: \"outline-start\" }),\n o_to: slider({ min: 0, max: 360, step: 1, value: 294, title: \"outline-end\" }),\n b_from: slider({ min: 0, max: 360, step: 1, value: 30, title: \"outline-bg-start\" }),\n b_to: slider({ min: 0, max: 360, step: 1, value: 120, title: \"outline-bg-end\" }),\n bp: slider({ min: 0, max: 1, value: .23, title: \"base-bulge\" }),\n dy: slider({ min: -50, max: 240, value: 240, title: \"dy\" }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"$27","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"md`## Step 2: Timelining the animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"{\n const button = html``;\n \n button.onclick = function () {\n timeline.seek(0);\n timeline.update = () => {\n mutable o2 = o;\n };\n timeline.play();\n }\n \n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"viewof t = slider({ min: 0, max: 1, title: \"time\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"{ timeline.seek(t * timeline.duration); mutable o2 = o; return md`[Update after manual time-change]` }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1231,"value":"mutable o2 = o","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1201,"value":"o = ({ o_from: 180, o_to: 180, b_from: 180, b_to: 180, bp: 0, dy: 0, base: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"timeline = make_timeline(o)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"$29","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"md`## Step 3: Vue component`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"md`Work in progress`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"viewof vue_params = paged({\n downloading: toggle({ title: \"d\", value: 0 }),\n progress: slider({ min: 0, max: 1, title: \"progress\", value: 0 }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1187,"value":"{\n instance.downloading = vue_params.downloading;\n instance.progress = vue_params.progress;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"viewof instance = {\n icon_component;\n const instance = new Vue({\n el: html``,\n data () {\n return { downloading: 0, progress: 0 };\n },\n });\n \n instance.$el.value = instance;\n return instance.$el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"md`## Dependencies and implementation details`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"function svg_arc (center, radius, startAngle, endAngle) {\n const start = polar_to_cartesian(center, radius, endAngle);\n const end = polar_to_cartesian(center, radius, startAngle);\n const largeArcFlag = (endAngle - startAngle) <= 180 ? \"0\" : \"1\";\n return [\n \"M\", start[0], start[1], \n \"A\", radius, radius, 0, largeArcFlag, 0, end[0], end[1],\n ].join(\" \"); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"function polar_to_cartesian ([cx, cy], radius, angleInDegrees) {\n const angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;\n return [\n cx + (radius * Math.cos(angleInRadians)),\n cy + (radius * Math.sin(angleInRadians)),\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"anime = require('https://bundle.run/animejs@3.1.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"Vue = require(\"vue\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"import { slider, toggle, paged } from \"@kelleyvanevert/pretty-anime-js-sliders\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2b","stdlib":"1"}} 26:"$25:body"