Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <script>
var data = {
    hello: {"groups":[[{"x":-229.5,"y":49,"t":0.033},{"x":-230.5,"y":42,"t":0.05},{"x":-230.5,"y":35,"t":0.067},{"x":-230.5,"y":28,"t":0.083},{"x":-230.5,"y":19,"t":0.1},{"x":-230.5,"y":6,"t":0.117},{"x":-230.5,"y":-3,"t":0.133},{"x":-230.5,"y":-11,"t":0.15},{"x":-231.5,"y":-19,"t":0.166},{"x":-231.5,"y":-26,"t":0.183},{"x":-231.5,"y":-33,"t":0.201},{"x":-231.5,"y":-43,"t":0.225},{"x":-231.5,"y":-50,"t":0.243},{"x":-231.5,"y":-56,"t":0.258},{"x":-231.5,"y":-61,"t":0.275},{"x":-231.5,"y":-67,"t":0.293},{"x":-231.5,"y":-73,"t":0.309},{"x":-232.5,"y":-82,"t":0.326},{"x":-232.5,"y":-86,"t":0.343},{"x":-232.5,"y":-90,"t":0.359},{"x":-233.5,"y":-94,"t":0.376},{"x":-233.5,"y":-99,"t":0.393},{"x":-234.5,"y":-104,"t":0.408},{"x":-234.5,"y":-109,"t":0.425},{"x":-235.5,"y":-113,"t":0.459},{"x":-236.5,"y":-117,"t":0.492},{"x":-236.5,"y":-113,"t":0.593},{"x":-236.5,"y":-106,"t":0.609},{"x":-235.5,"y":-101,"t":0.626},{"x":-235.5,"y":-96,"t":0.643},{"x":-235.5,"y":-92,"t":0.659},{"x":-234.5,"y":-87,"t":0.676},{"x":-234.5,"y":-82,"t":0.692},{"x":-233.5,"y":-73,"t":0.709},{"x":-233.5,"y":-67,"t":0.726},{"x":-232.5,"y":-61,"t":0.743},{"x":-232.5,"y":-57,"t":0.759},{"x":-232.5,"y":-52,"t":0.776},{"x":-231.5,"y":-46,"t":0.792},{"x":-231.5,"y":-42,"t":0.809},{"x":-230.5,"y":-38,"t":0.826},{"x":-230.5,"y":-33,"t":0.842},{"x":-230.5,"y":-29,"t":0.858},{"x":-230.5,"y":-24,"t":0.876},{"x":-230.5,"y":-18,"t":0.893},{"x":-230.5,"y":-14,"t":0.909},{"x":-229.5,"y":-10,"t":0.926},{"x":-229.5,"y":-6,"t":0.943},{"x":-229.5,"y":-2,"t":0.959},{"x":-229.5,"y":2,"t":0.975},{"x":-229.5,"y":7,"t":0.993},{"x":-229.5,"y":12,"t":1.025},{"x":-229.5,"y":16,"t":1.059},{"x":-228.5,"y":24,"t":1.092},{"x":-228.5,"y":30,"t":1.125},{"x":-228.5,"y":34,"t":1.16},{"x":-227.5,"y":38,"t":1.243},{"x":-227.5,"y":42,"t":1.293},{"x":-227.5,"y":46,"t":1.375},{"x":-227.5,"y":42,"t":1.492},{"x":-229.5,"y":35,"t":1.526},{"x":-229.5,"y":31,"t":1.543},{"x":-229.5,"y":27,"t":1.559},{"x":-229.5,"y":23,"t":1.593},{"x":-229.5,"y":17,"t":1.593},{"x":-229.5,"y":13,"t":1.608},{"x":-229.5,"y":9,"t":1.625},{"x":-229.5,"y":2,"t":1.659},{"x":-228.5,"y":-3,"t":1.675},{"x":-227.5,"y":-9,"t":1.709},{"x":-225.5,"y":-14,"t":1.743},{"x":-224.5,"y":-18,"t":1.759},{"x":-221.5,"y":-24,"t":1.793},{"x":-217.5,"y":-30,"t":1.826},{"x":-214.5,"y":-33,"t":1.842},{"x":-210.5,"y":-36,"t":1.876},{"x":-204.5,"y":-38,"t":1.909},{"x":-200.5,"y":-39,"t":1.926},{"x":-195.5,"y":-39,"t":1.943},{"x":-190.5,"y":-39,"t":1.959},{"x":-186.5,"y":-38,"t":1.976},{"x":-182.5,"y":-36,"t":1.993},{"x":-178.5,"y":-33,"t":2.009},{"x":-174.5,"y":-25,"t":2.043},{"x":-172.5,"y":-17,"t":2.059},{"x":-171.5,"y":-11,"t":2.076},{"x":-171.5,"y":-5,"t":2.093},{"x":-171.5,"y":1,"t":2.109},{"x":-171.5,"y":7,"t":2.126},{"x":-171.5,"y":12,"t":2.143},{"x":-171.5,"y":20,"t":2.159},{"x":-171.5,"y":24,"t":2.176},{"x":-171.5,"y":29,"t":2.193},{"x":-171.5,"y":36,"t":2.226},{"x":-171.5,"y":43,"t":2.258},{"x":-171.5,"y":47,"t":2.293}],[{"x":-134.5,"y":1,"t":2.643},{"x":-130.5,"y":0,"t":2.677},{"x":-126.5,"y":0,"t":2.692},{"x":-120.5,"y":0,"t":2.727},{"x":-114.5,"y":-2,"t":2.76},{"x":-109.5,"y":-3,"t":2.793},{"x":-104.5,"y":-4,"t":2.826},{"x":-98.5,"y":-4,"t":2.86},{"x":-94.5,"y":-5,"t":2.876},{"x":-89.5,"y":-5,"t":2.927},{"x":-85.5,"y":-5,"t":3.01},{"x":-81.5,"y":-6,"t":3.077},{"x":-77.5,"y":-8,"t":3.143},{"x":-74.5,"y":-11,"t":3.209},{"x":-73.5,"y":-15,"t":3.243},{"x":-71.5,"y":-21,"t":3.276},{"x":-71.5,"y":-25,"t":3.309},{"x":-71.5,"y":-31,"t":3.343},{"x":-75.5,"y":-35,"t":3.393},{"x":-79.5,"y":-37,"t":3.427},{"x":-85.5,"y":-39,"t":3.46},{"x":-91.5,"y":-40,"t":3.493},{"x":-95.5,"y":-41,"t":3.526},{"x":-100.5,"y":-41,"t":3.56},{"x":-106.5,"y":-40,"t":3.593},{"x":-110.5,"y":-38,"t":3.627},{"x":-114.5,"y":-36,"t":3.643},{"x":-118.5,"y":-31,"t":3.677},{"x":-122.5,"y":-25,"t":3.71},{"x":-126.5,"y":-18,"t":3.743},{"x":-126.5,"y":-14,"t":3.76},{"x":-126.5,"y":-7,"t":3.793},{"x":-126.5,"y":-1,"t":3.826},{"x":-126.5,"y":3,"t":3.842},{"x":-126.5,"y":8,"t":3.877},{"x":-125.5,"y":14,"t":3.91},{"x":-124.5,"y":18,"t":3.943},{"x":-123.5,"y":22,"t":3.993},{"x":-120.5,"y":27,"t":4.043},{"x":-117.5,"y":30,"t":4.109},{"x":-113.5,"y":32,"t":4.143},{"x":-109.5,"y":34,"t":4.177},{"x":-103.5,"y":36,"t":4.227},{"x":-98.5,"y":37,"t":4.26},{"x":-93.5,"y":38,"t":4.293},{"x":-88.5,"y":38,"t":4.31},{"x":-81.5,"y":38,"t":4.343},{"x":-74.5,"y":38,"t":4.377},{"x":-70.5,"y":38,"t":4.392},{"x":-65.5,"y":37,"t":4.427},{"x":-61.5,"y":37,"t":4.476},{"x":-58.5,"y":34,"t":4.51}],[{"x":-29.5,"y":26,"t":4.592},{"x":-28.5,"y":21,"t":4.609},{"x":-25.5,"y":13,"t":4.626},{"x":-23.5,"y":6,"t":4.642},{"x":-22.5,"y":-3,"t":4.659},{"x":-20.5,"y":-13,"t":4.676},{"x":-17.5,"y":-25,"t":4.694},{"x":-15.5,"y":-36,"t":4.71},{"x":-14.5,"y":-41,"t":4.71},{"x":-13.5,"y":-51,"t":4.726},{"x":-12.5,"y":-60,"t":4.743},{"x":-12.5,"y":-70,"t":4.76},{"x":-12.5,"y":-80,"t":4.777},{"x":-12.5,"y":-90,"t":4.792},{"x":-12.5,"y":-99,"t":4.81},{"x":-13.5,"y":-107,"t":4.827},{"x":-15.5,"y":-112,"t":4.86},{"x":-19.5,"y":-113,"t":4.927},{"x":-23.5,"y":-111,"t":4.959},{"x":-26.5,"y":-107,"t":4.993},{"x":-27.5,"y":-102,"t":5.01},{"x":-28.5,"y":-96,"t":5.042},{"x":-28.5,"y":-90,"t":5.077},{"x":-28.5,"y":-83,"t":5.109},{"x":-28.5,"y":-79,"t":5.127},{"x":-28.5,"y":-75,"t":5.143},{"x":-28.5,"y":-71,"t":5.16},{"x":-28.5,"y":-67,"t":5.177},{"x":-28.5,"y":-63,"t":5.193},{"x":-28.5,"y":-58,"t":5.21},{"x":-28.5,"y":-54,"t":5.226},{"x":-27.5,"y":-50,"t":5.243},{"x":-27.5,"y":-46,"t":5.26},{"x":-27.5,"y":-42,"t":5.277},{"x":-26.5,"y":-37,"t":5.293},{"x":-26.5,"y":-30,"t":5.326},{"x":-25.5,"y":-23,"t":5.36},{"x":-25.5,"y":-16,"t":5.392},{"x":-25.5,"y":-11,"t":5.409},{"x":-25.5,"y":-6,"t":5.444},{"x":-25.5,"y":0,"t":5.476},{"x":-25.5,"y":5,"t":5.493},{"x":-24.5,"y":10,"t":5.526},{"x":-24.5,"y":15,"t":5.559},{"x":-23.5,"y":21,"t":5.592},{"x":-22.5,"y":26,"t":5.627},{"x":-22.5,"y":30,"t":5.66},{"x":-21.5,"y":34,"t":5.692},{"x":-20.5,"y":38,"t":5.727},{"x":-19.5,"y":43,"t":5.776},{"x":-16.5,"y":47,"t":5.877},{"x":-12.5,"y":49,"t":5.927},{"x":-7.5,"y":51,"t":5.993},{"x":-3.5,"y":53,"t":6.043},{"x":0.5,"y":53,"t":6.076},{"x":5.5,"y":53,"t":6.11},{"x":9.5,"y":53,"t":6.16},{"x":15.5,"y":50,"t":6.21},{"x":20.5,"y":46,"t":6.276},{"x":20.5,"y":42,"t":6.31}],[{"x":50.5,"y":30,"t":6.41},{"x":51.5,"y":26,"t":6.426},{"x":53.5,"y":22,"t":6.442},{"x":56.5,"y":15,"t":6.459},{"x":58.5,"y":9,"t":6.477},{"x":59.5,"y":2,"t":6.492},{"x":61.5,"y":-4,"t":6.51},{"x":63.5,"y":-11,"t":6.527},{"x":64.5,"y":-18,"t":6.543},{"x":66.5,"y":-28,"t":6.559},{"x":68.5,"y":-34,"t":6.576},{"x":69.5,"y":-41,"t":6.593},{"x":70.5,"y":-49,"t":6.61},{"x":72.5,"y":-56,"t":6.626},{"x":73.5,"y":-67,"t":6.642},{"x":73.5,"y":-74,"t":6.659},{"x":73.5,"y":-83,"t":6.676},{"x":73.5,"y":-92,"t":6.692},{"x":73.5,"y":-101,"t":6.71},{"x":72.5,"y":-108,"t":6.726},{"x":70.5,"y":-115,"t":6.742},{"x":69.5,"y":-119,"t":6.776},{"x":65.5,"y":-116,"t":6.842},{"x":62.5,"y":-110,"t":6.876},{"x":59.5,"y":-104,"t":6.909},{"x":57.5,"y":-95,"t":6.942},{"x":56.5,"y":-91,"t":6.959},{"x":55.5,"y":-87,"t":6.976},{"x":55.5,"y":-83,"t":6.992},{"x":55.5,"y":-76,"t":7.026},{"x":55.5,"y":-71,"t":7.042},{"x":55.5,"y":-67,"t":7.059},{"x":55.5,"y":-63,"t":7.076},{"x":55.5,"y":-59,"t":7.092},{"x":55.5,"y":-55,"t":7.109},{"x":55.5,"y":-47,"t":7.142},{"x":55.5,"y":-40,"t":7.176},{"x":55.5,"y":-36,"t":7.192},{"x":55.5,"y":-32,"t":7.209},{"x":55.5,"y":-25,"t":7.242},{"x":55.5,"y":-19,"t":7.276},{"x":55.5,"y":-13,"t":7.309},{"x":55.5,"y":-6,"t":7.342},{"x":55.5,"y":0,"t":7.375},{"x":55.5,"y":4,"t":7.392},{"x":55.5,"y":12,"t":7.426},{"x":55.5,"y":17,"t":7.459},{"x":55.5,"y":21,"t":7.492},{"x":56.5,"y":27,"t":7.526},{"x":57.5,"y":32,"t":7.576},{"x":58.5,"y":36,"t":7.609},{"x":60.5,"y":41,"t":7.659},{"x":63.5,"y":44,"t":7.709},{"x":66.5,"y":47,"t":7.759},{"x":70.5,"y":50,"t":7.826},{"x":74.5,"y":51,"t":7.876},{"x":79.5,"y":52,"t":7.926},{"x":84.5,"y":52,"t":7.976},{"x":88.5,"y":52,"t":8.009},{"x":93.5,"y":47,"t":8.042},{"x":96.5,"y":44,"t":8.059},{"x":99.5,"y":39,"t":8.092},{"x":100.5,"y":35,"t":8.126},{"x":101.5,"y":31,"t":8.159}],[{"x":155.5,"y":-31,"t":8.242},{"x":149.5,"y":-27,"t":8.275},{"x":144.5,"y":-23,"t":8.309},{"x":140.5,"y":-19,"t":8.343},{"x":136.5,"y":-12,"t":8.375},{"x":133.5,"y":-6,"t":8.392},{"x":131.5,"y":-1,"t":8.409},{"x":130.5,"y":6,"t":8.443},{"x":130.5,"y":10,"t":8.459},{"x":131.5,"y":17,"t":8.475},{"x":132.5,"y":22,"t":8.492},{"x":133.5,"y":26,"t":8.509},{"x":135.5,"y":31,"t":8.525},{"x":136.5,"y":35,"t":8.542},{"x":139.5,"y":42,"t":8.559},{"x":141.5,"y":46,"t":8.575},{"x":144.5,"y":49,"t":8.592},{"x":148.5,"y":51,"t":8.609},{"x":153.5,"y":52,"t":8.626},{"x":157.5,"y":53,"t":8.642},{"x":164.5,"y":53,"t":8.659},{"x":171.5,"y":52,"t":8.692},{"x":175.5,"y":50,"t":8.709},{"x":179.5,"y":46,"t":8.725},{"x":183.5,"y":42,"t":8.742},{"x":188.5,"y":34,"t":8.759},{"x":191.5,"y":30,"t":8.775},{"x":192.5,"y":25,"t":8.792},{"x":192.5,"y":20,"t":8.809},{"x":192.5,"y":15,"t":8.826},{"x":192.5,"y":11,"t":8.842},{"x":192.5,"y":4,"t":8.859},{"x":191.5,"y":-1,"t":8.875},{"x":191.5,"y":-5,"t":8.892},{"x":190.5,"y":-10,"t":8.909},{"x":187.5,"y":-16,"t":8.942},{"x":185.5,"y":-20,"t":8.959},{"x":181.5,"y":-25,"t":8.992},{"x":176.5,"y":-28,"t":9.026},{"x":171.5,"y":-29,"t":9.059},{"x":166.5,"y":-29,"t":9.093},{"x":160.5,"y":-28,"t":9.126},{"x":155.5,"y":-25,"t":9.142},{"x":150.5,"y":-23,"t":9.176},{"x":147.5,"y":-20,"t":9.209},{"x":141.5,"y":-15,"t":9.242},{"x":137.5,"y":-9,"t":9.276},{"x":135.5,"y":-5,"t":9.292},{"x":132.5,"y":1,"t":9.326},{"x":131.5,"y":5,"t":9.342},{"x":131.5,"y":9,"t":9.359},{"x":132.5,"y":16,"t":9.392},{"x":135.5,"y":22,"t":9.426},{"x":137.5,"y":26,"t":9.442},{"x":140.5,"y":31,"t":9.476},{"x":146.5,"y":35,"t":9.51},{"x":151.5,"y":35,"t":9.526},{"x":162.5,"y":32,"t":9.542}]]},
    resonate: {"groups":[[{"x":-302.5,"y":-104,"t":0.116},{"x":-302.5,"y":-100,"t":0.116},{"x":-302.5,"y":-92,"t":0.135},{"x":-302.5,"y":-84,"t":0.151},{"x":-302.5,"y":-76,"t":0.167},{"x":-302.5,"y":-70,"t":0.183},{"x":-302.5,"y":-65,"t":0.2},{"x":-301.5,"y":-59,"t":0.217},{"x":-300.5,"y":-50,"t":0.234},{"x":-300.5,"y":-44,"t":0.251},{"x":-299.5,"y":-39,"t":0.267},{"x":-299.5,"y":-33,"t":0.283},{"x":-299.5,"y":-28,"t":0.3},{"x":-298.5,"y":-24,"t":0.317},{"x":-298.5,"y":-19,"t":0.334},{"x":-298.5,"y":-13,"t":0.349},{"x":-298.5,"y":-9,"t":0.367},{"x":-297.5,"y":-5,"t":0.383},{"x":-297.5,"y":2,"t":0.417},{"x":-297.5,"y":8,"t":0.434},{"x":-297.5,"y":13,"t":0.467},{"x":-296.5,"y":18,"t":0.5},{"x":-296.5,"y":22,"t":0.518},{"x":-296.5,"y":27,"t":0.55},{"x":-296.5,"y":31,"t":0.583},{"x":-296.5,"y":36,"t":0.6},{"x":-296.5,"y":42,"t":0.634},{"x":-296.5,"y":46,"t":0.666},{"x":-296.5,"y":51,"t":0.717},{"x":-298.5,"y":46,"t":0.901},{"x":-299.5,"y":38,"t":0.917},{"x":-299.5,"y":32,"t":0.934},{"x":-300.5,"y":25,"t":0.95},{"x":-300.5,"y":19,"t":0.967},{"x":-301.5,"y":13,"t":0.984},{"x":-302.5,"y":5,"t":1.001},{"x":-302.5,"y":0,"t":1.016},{"x":-303.5,"y":-5,"t":1.034},{"x":-304.5,"y":-10,"t":1.05},{"x":-304.5,"y":-15,"t":1.066},{"x":-305.5,"y":-20,"t":1.084},{"x":-306.5,"y":-28,"t":1.101},{"x":-306.5,"y":-33,"t":1.117},{"x":-306.5,"y":-37,"t":1.134},{"x":-308.5,"y":-44,"t":1.166},{"x":-309.5,"y":-51,"t":1.184},{"x":-310.5,"y":-56,"t":1.2},{"x":-310.5,"y":-60,"t":1.217},{"x":-311.5,"y":-65,"t":1.234},{"x":-311.5,"y":-69,"t":1.25},{"x":-311.5,"y":-74,"t":1.266},{"x":-309.5,"y":-79,"t":1.285},{"x":-306.5,"y":-87,"t":1.301},{"x":-302.5,"y":-92,"t":1.317},{"x":-297.5,"y":-96,"t":1.334},{"x":-292.5,"y":-100,"t":1.35},{"x":-287.5,"y":-102,"t":1.367},{"x":-282.5,"y":-102,"t":1.384},{"x":-274.5,"y":-101,"t":1.4},{"x":-269.5,"y":-98,"t":1.417},{"x":-264.5,"y":-93,"t":1.434},{"x":-259.5,"y":-89,"t":1.451},{"x":-255.5,"y":-84,"t":1.468},{"x":-252.5,"y":-76,"t":1.484},{"x":-251.5,"y":-70,"t":1.501},{"x":-251.5,"y":-64,"t":1.517},{"x":-253.5,"y":-57,"t":1.533},{"x":-255.5,"y":-51,"t":1.551},{"x":-259.5,"y":-45,"t":1.567},{"x":-263.5,"y":-40,"t":1.584},{"x":-269.5,"y":-34,"t":1.6},{"x":-273.5,"y":-32,"t":1.618},{"x":-277.5,"y":-31,"t":1.633},{"x":-281.5,"y":-30,"t":1.651},{"x":-286.5,"y":-29,"t":1.668},{"x":-294.5,"y":-29,"t":1.684},{"x":-300.5,"y":-29,"t":1.716},{"x":-296.5,"y":-28,"t":1.867},{"x":-291.5,"y":-27,"t":1.884},{"x":-286.5,"y":-27,"t":1.899},{"x":-280.5,"y":-25,"t":1.917},{"x":-274.5,"y":-24,"t":1.933},{"x":-270.5,"y":-22,"t":1.95},{"x":-264.5,"y":-19,"t":1.967},{"x":-261.5,"y":-16,"t":1.984},{"x":-254.5,"y":-11,"t":2.017},{"x":-250.5,"y":-4,"t":2.051},{"x":-247.5,"y":1,"t":2.068},{"x":-245.5,"y":5,"t":2.084},{"x":-244.5,"y":9,"t":2.1},{"x":-242.5,"y":13,"t":2.117},{"x":-241.5,"y":17,"t":2.134},{"x":-241.5,"y":21,"t":2.151},{"x":-240.5,"y":26,"t":2.167},{"x":-240.5,"y":30,"t":2.184},{"x":-240.5,"y":34,"t":2.201},{"x":-240.5,"y":38,"t":2.217},{"x":-240.5,"y":44,"t":2.251}],[{"x":-225.5,"y":-2,"t":2.368},{"x":-221.5,"y":-2,"t":2.385},{"x":-214.5,"y":-2,"t":2.418},{"x":-209.5,"y":-3,"t":2.434},{"x":-203.5,"y":-3,"t":2.451},{"x":-198.5,"y":-3,"t":2.468},{"x":-192.5,"y":-3,"t":2.485},{"x":-187.5,"y":-3,"t":2.502},{"x":-183.5,"y":-3,"t":2.518},{"x":-179.5,"y":-2,"t":2.534},{"x":-174.5,"y":-2,"t":2.567},{"x":-170.5,"y":-6,"t":2.652},{"x":-169.5,"y":-13,"t":2.684},{"x":-169.5,"y":-18,"t":2.718},{"x":-169.5,"y":-22,"t":2.752},{"x":-172.5,"y":-28,"t":2.785},{"x":-174.5,"y":-32,"t":2.818},{"x":-178.5,"y":-34,"t":2.868},{"x":-183.5,"y":-35,"t":2.902},{"x":-189.5,"y":-36,"t":2.935},{"x":-193.5,"y":-36,"t":2.951},{"x":-197.5,"y":-37,"t":2.985},{"x":-201.5,"y":-37,"t":3.018},{"x":-206.5,"y":-36,"t":3.052},{"x":-212.5,"y":-34,"t":3.085},{"x":-216.5,"y":-32,"t":3.118},{"x":-219.5,"y":-29,"t":3.152},{"x":-222.5,"y":-24,"t":3.168},{"x":-223.5,"y":-20,"t":3.185},{"x":-224.5,"y":-16,"t":3.201},{"x":-225.5,"y":-12,"t":3.218},{"x":-225.5,"y":-8,"t":3.234},{"x":-225.5,"y":-4,"t":3.252},{"x":-225.5,"y":3,"t":3.269},{"x":-224.5,"y":8,"t":3.285},{"x":-223.5,"y":12,"t":3.301},{"x":-221.5,"y":19,"t":3.334},{"x":-219.5,"y":24,"t":3.351},{"x":-216.5,"y":29,"t":3.385},{"x":-210.5,"y":33,"t":3.418},{"x":-205.5,"y":34,"t":3.435},{"x":-197.5,"y":34,"t":3.452},{"x":-191.5,"y":34,"t":3.468},{"x":-185.5,"y":34,"t":3.485},{"x":-180.5,"y":34,"t":3.501},{"x":-174.5,"y":34,"t":3.518},{"x":-169.5,"y":33,"t":3.535},{"x":-164.5,"y":32,"t":3.551},{"x":-160.5,"y":31,"t":3.568}],[{"x":-98.5,"y":-22,"t":3.719},{"x":-98.5,"y":-28,"t":3.752},{"x":-98.5,"y":-33,"t":3.785},{"x":-101.5,"y":-37,"t":3.802},{"x":-105.5,"y":-43,"t":3.835},{"x":-110.5,"y":-47,"t":3.869},{"x":-114.5,"y":-49,"t":3.886},{"x":-118.5,"y":-51,"t":3.902},{"x":-122.5,"y":-51,"t":3.935},{"x":-126.5,"y":-51,"t":3.935},{"x":-132.5,"y":-51,"t":3.969},{"x":-137.5,"y":-49,"t":4.002},{"x":-141.5,"y":-46,"t":4.035},{"x":-144.5,"y":-43,"t":4.069},{"x":-147.5,"y":-40,"t":4.102},{"x":-151.5,"y":-34,"t":4.135},{"x":-153.5,"y":-30,"t":4.186},{"x":-153.5,"y":-26,"t":4.218},{"x":-152.5,"y":-21,"t":4.269},{"x":-149.5,"y":-17,"t":4.319},{"x":-146.5,"y":-14,"t":4.352},{"x":-142.5,"y":-13,"t":4.386},{"x":-137.5,"y":-11,"t":4.419},{"x":-132.5,"y":-10,"t":4.452},{"x":-126.5,"y":-10,"t":4.485},{"x":-121.5,"y":-10,"t":4.502},{"x":-116.5,"y":-10,"t":4.535},{"x":-112.5,"y":-10,"t":4.569},{"x":-108.5,"y":-10,"t":4.585},{"x":-102.5,"y":-8,"t":4.619},{"x":-98.5,"y":-7,"t":4.653},{"x":-92.5,"y":-4,"t":4.686},{"x":-88.5,"y":1,"t":4.719},{"x":-84.5,"y":5,"t":4.753},{"x":-81.5,"y":9,"t":4.77},{"x":-79.5,"y":14,"t":4.801},{"x":-79.5,"y":18,"t":4.835},{"x":-80.5,"y":24,"t":4.87},{"x":-82.5,"y":28,"t":4.885},{"x":-85.5,"y":33,"t":4.918},{"x":-88.5,"y":36,"t":4.936},{"x":-91.5,"y":39,"t":4.953},{"x":-95.5,"y":42,"t":4.969},{"x":-99.5,"y":44,"t":5.001},{"x":-105.5,"y":45,"t":5.036},{"x":-109.5,"y":46,"t":5.052},{"x":-115.5,"y":46,"t":5.085},{"x":-121.5,"y":46,"t":5.118},{"x":-130.5,"y":45,"t":5.153},{"x":-134.5,"y":43,"t":5.186},{"x":-139.5,"y":41,"t":5.236},{"x":-143.5,"y":37,"t":5.269},{"x":-146.5,"y":33,"t":5.319},{"x":-147.5,"y":29,"t":5.369},{"x":-147.5,"y":25,"t":5.419},{"x":-147.5,"y":21,"t":5.502},{"x":-143.5,"y":19,"t":5.568},{"x":-139.5,"y":16,"t":5.603}],[{"x":-48.5,"y":-32,"t":5.653},{"x":-53.5,"y":-28,"t":5.687},{"x":-56.5,"y":-24,"t":5.703},{"x":-58.5,"y":-20,"t":5.72},{"x":-61.5,"y":-13,"t":5.737},{"x":-62.5,"y":-8,"t":5.753},{"x":-63.5,"y":-3,"t":5.77},{"x":-63.5,"y":2,"t":5.786},{"x":-63.5,"y":7,"t":5.803},{"x":-62.5,"y":12,"t":5.82},{"x":-60.5,"y":19,"t":5.836},{"x":-59.5,"y":23,"t":5.853},{"x":-55.5,"y":29,"t":5.887},{"x":-50.5,"y":34,"t":5.92},{"x":-46.5,"y":36,"t":5.936},{"x":-40.5,"y":37,"t":5.969},{"x":-36.5,"y":37,"t":5.988},{"x":-29.5,"y":36,"t":6.021},{"x":-25.5,"y":34,"t":6.037},{"x":-22.5,"y":31,"t":6.054},{"x":-17.5,"y":27,"t":6.088},{"x":-15.5,"y":21,"t":6.121},{"x":-14.5,"y":16,"t":6.137},{"x":-13.5,"y":11,"t":6.154},{"x":-13.5,"y":7,"t":6.17},{"x":-13.5,"y":3,"t":6.188},{"x":-13.5,"y":-1,"t":6.204},{"x":-15.5,"y":-9,"t":6.237},{"x":-18.5,"y":-15,"t":6.271},{"x":-21.5,"y":-19,"t":6.304},{"x":-26.5,"y":-22,"t":6.337},{"x":-31.5,"y":-26,"t":6.371},{"x":-36.5,"y":-28,"t":6.404},{"x":-42.5,"y":-29,"t":6.437},{"x":-47.5,"y":-29,"t":6.471},{"x":-52.5,"y":-29,"t":6.504},{"x":-56.5,"y":-27,"t":6.521},{"x":-59.5,"y":-24,"t":6.554},{"x":-62.5,"y":-18,"t":6.605},{"x":-64.5,"y":-14,"t":6.621},{"x":-65.5,"y":-8,"t":6.654},{"x":-66.5,"y":-2,"t":6.688},{"x":-64.5,"y":2,"t":6.704},{"x":-60.5,"y":9,"t":6.721}],[{"x":5.5,"y":-31,"t":6.803},{"x":5.5,"y":-21,"t":6.821},{"x":5.5,"y":-10,"t":6.836},{"x":5.5,"y":-3,"t":6.853},{"x":6.5,"y":3,"t":6.87},{"x":7.5,"y":9,"t":6.887},{"x":7.5,"y":14,"t":6.904},{"x":8.5,"y":22,"t":6.921},{"x":8.5,"y":27,"t":6.937},{"x":8.5,"y":31,"t":6.953},{"x":8.5,"y":35,"t":6.987},{"x":8.5,"y":30,"t":7.17},{"x":7.5,"y":24,"t":7.204},{"x":6.5,"y":19,"t":7.236},{"x":4.5,"y":14,"t":7.27},{"x":3.5,"y":10,"t":7.304},{"x":3.5,"y":6,"t":7.32},{"x":2.5,"y":1,"t":7.353},{"x":2.5,"y":-5,"t":7.388},{"x":2.5,"y":-10,"t":7.403},{"x":2.5,"y":-14,"t":7.42},{"x":2.5,"y":-20,"t":7.454},{"x":3.5,"y":-24,"t":7.47},{"x":6.5,"y":-30,"t":7.504},{"x":10.5,"y":-33,"t":7.536},{"x":14.5,"y":-35,"t":7.554},{"x":18.5,"y":-37,"t":7.57},{"x":23.5,"y":-39,"t":7.587},{"x":29.5,"y":-41,"t":7.603},{"x":35.5,"y":-41,"t":7.637},{"x":39.5,"y":-41,"t":7.654},{"x":43.5,"y":-39,"t":7.67},{"x":48.5,"y":-36,"t":7.688},{"x":53.5,"y":-31,"t":7.703},{"x":55.5,"y":-27,"t":7.719},{"x":57.5,"y":-23,"t":7.737},{"x":57.5,"y":-17,"t":7.754},{"x":57.5,"y":-12,"t":7.771},{"x":57.5,"y":-6,"t":7.787},{"x":57.5,"y":2,"t":7.804},{"x":56.5,"y":7,"t":7.821},{"x":55.5,"y":11,"t":7.837},{"x":54.5,"y":15,"t":7.853},{"x":53.5,"y":24,"t":7.887},{"x":52.5,"y":31,"t":7.92},{"x":51.5,"y":36,"t":7.954},{"x":50.5,"y":41,"t":7.988},{"x":50.5,"y":45,"t":8.037}],[{"x":129.5,"y":23,"t":8.187},{"x":128.5,"y":18,"t":8.204},{"x":127.5,"y":13,"t":8.221},{"x":125.5,"y":9,"t":8.237},{"x":124.5,"y":3,"t":8.254},{"x":121.5,"y":-6,"t":8.27},{"x":119.5,"y":-11,"t":8.288},{"x":117.5,"y":-17,"t":8.304},{"x":115.5,"y":-21,"t":8.321},{"x":112.5,"y":-24,"t":8.337},{"x":106.5,"y":-29,"t":8.371},{"x":100.5,"y":-31,"t":8.403},{"x":94.5,"y":-32,"t":8.437},{"x":88.5,"y":-30,"t":8.47},{"x":82.5,"y":-25,"t":8.504},{"x":79.5,"y":-22,"t":8.521},{"x":76.5,"y":-18,"t":8.537},{"x":71.5,"y":-9,"t":8.57},{"x":70.5,"y":-5,"t":8.587},{"x":70.5,"y":-1,"t":8.603},{"x":69.5,"y":3,"t":8.621},{"x":69.5,"y":9,"t":8.637},{"x":69.5,"y":14,"t":8.654},{"x":71.5,"y":18,"t":8.67},{"x":74.5,"y":23,"t":8.687},{"x":77.5,"y":28,"t":8.703},{"x":79.5,"y":32,"t":8.721},{"x":84.5,"y":37,"t":8.738},{"x":90.5,"y":42,"t":8.771},{"x":97.5,"y":44,"t":8.804},{"x":106.5,"y":44,"t":8.838},{"x":113.5,"y":42,"t":8.87},{"x":119.5,"y":38,"t":8.904},{"x":123.5,"y":34,"t":8.938},{"x":126.5,"y":29,"t":8.972},{"x":128.5,"y":23,"t":9.004},{"x":130.5,"y":16,"t":9.038},{"x":130.5,"y":9,"t":9.071},{"x":129.5,"y":1,"t":9.105},{"x":128.5,"y":-3,"t":9.121},{"x":125.5,"y":-10,"t":9.137},{"x":124.5,"y":-14,"t":9.154},{"x":122.5,"y":-18,"t":9.171},{"x":119.5,"y":-24,"t":9.203},{"x":115.5,"y":-29,"t":9.238},{"x":111.5,"y":-33,"t":9.271},{"x":107.5,"y":-35,"t":9.305},{"x":102.5,"y":-36,"t":9.337},{"x":105.5,"y":-31,"t":9.504},{"x":109.5,"y":-28,"t":9.52},{"x":112.5,"y":-25,"t":9.538},{"x":115.5,"y":-19,"t":9.571},{"x":118.5,"y":-12,"t":9.605},{"x":120.5,"y":-7,"t":9.622},{"x":123.5,"y":-1,"t":9.654},{"x":125.5,"y":5,"t":9.688},{"x":129.5,"y":12,"t":9.721},{"x":130.5,"y":16,"t":9.738},{"x":133.5,"y":21,"t":9.771},{"x":137.5,"y":26,"t":9.805},{"x":141.5,"y":30,"t":9.838},{"x":144.5,"y":33,"t":9.872},{"x":148.5,"y":37,"t":9.921},{"x":152.5,"y":40,"t":9.972},{"x":156.5,"y":37,"t":10.022}],[{"x":169.5,"y":-73,"t":10.12},{"x":169.5,"y":-68,"t":10.137},{"x":168.5,"y":-62,"t":10.154},{"x":167.5,"y":-52,"t":10.17},{"x":167.5,"y":-47,"t":10.187},{"x":167.5,"y":-42,"t":10.203},{"x":167.5,"y":-36,"t":10.221},{"x":167.5,"y":-31,"t":10.237},{"x":166.5,"y":-25,"t":10.254},{"x":166.5,"y":-18,"t":10.27},{"x":166.5,"y":-14,"t":10.286},{"x":166.5,"y":-7,"t":10.32},{"x":166.5,"y":0,"t":10.354},{"x":166.5,"y":5,"t":10.37},{"x":166.5,"y":10,"t":10.403},{"x":166.5,"y":14,"t":10.421},{"x":166.5,"y":18,"t":10.436},{"x":167.5,"y":22,"t":10.454},{"x":169.5,"y":27,"t":10.47},{"x":172.5,"y":33,"t":10.503},{"x":176.5,"y":37,"t":10.537},{"x":181.5,"y":41,"t":10.57},{"x":185.5,"y":43,"t":10.604},{"x":189.5,"y":45,"t":10.637},{"x":198.5,"y":45,"t":10.67},{"x":203.5,"y":44,"t":10.687},{"x":208.5,"y":43,"t":10.704},{"x":212.5,"y":43,"t":10.721},{"x":217.5,"y":42,"t":10.754},{"x":213.5,"y":44,"t":11.103},{"x":207.5,"y":45,"t":11.137},{"x":203.5,"y":45,"t":11.17},{"x":199.5,"y":45,"t":11.203},{"x":195.5,"y":43,"t":11.238},{"x":189.5,"y":40,"t":11.27},{"x":185.5,"y":37,"t":11.303},{"x":179.5,"y":32,"t":11.337},{"x":174.5,"y":28,"t":11.354},{"x":170.5,"y":22,"t":11.387},{"x":169.5,"y":18,"t":11.404},{"x":168.5,"y":14,"t":11.421},{"x":168.5,"y":9,"t":11.437},{"x":167.5,"y":5,"t":11.454},{"x":167.5,"y":1,"t":11.47},{"x":166.5,"y":-3,"t":11.488},{"x":166.5,"y":-7,"t":11.504},{"x":166.5,"y":-13,"t":11.521},{"x":166.5,"y":-24,"t":11.537}],[{"x":140.5,"y":-18,"t":11.62},{"x":144.5,"y":-18,"t":11.671},{"x":152.5,"y":-18,"t":11.704},{"x":156.5,"y":-18,"t":11.721},{"x":160.5,"y":-18,"t":11.738},{"x":165.5,"y":-18,"t":11.755},{"x":169.5,"y":-18,"t":11.771},{"x":174.5,"y":-18,"t":11.788},{"x":178.5,"y":-18,"t":11.804},{"x":183.5,"y":-17,"t":11.838},{"x":188.5,"y":-17,"t":11.904},{"x":192.5,"y":-17,"t":11.939},{"x":196.5,"y":-17,"t":11.988}],[{"x":227.5,"y":-5,"t":12.456},{"x":231.5,"y":-5,"t":12.488},{"x":236.5,"y":-5,"t":12.522},{"x":242.5,"y":-5,"t":12.555},{"x":247.5,"y":-5,"t":12.589},{"x":252.5,"y":-5,"t":12.623},{"x":257.5,"y":-5,"t":12.655},{"x":262.5,"y":-5,"t":12.688},{"x":266.5,"y":-5,"t":12.723},{"x":270.5,"y":-5,"t":12.772},{"x":276.5,"y":-5,"t":12.839},{"x":281.5,"y":-6,"t":12.89},{"x":285.5,"y":-8,"t":12.939},{"x":289.5,"y":-10,"t":12.989},{"x":293.5,"y":-12,"t":13.055},{"x":296.5,"y":-17,"t":13.107},{"x":297.5,"y":-22,"t":13.139},{"x":297.5,"y":-28,"t":13.172},{"x":295.5,"y":-34,"t":13.206},{"x":293.5,"y":-38,"t":13.223},{"x":289.5,"y":-42,"t":13.255},{"x":283.5,"y":-45,"t":13.29},{"x":278.5,"y":-46,"t":13.307},{"x":272.5,"y":-47,"t":13.323},{"x":266.5,"y":-47,"t":13.355},{"x":262.5,"y":-45,"t":13.39},{"x":254.5,"y":-41,"t":13.423},{"x":249.5,"y":-37,"t":13.456},{"x":244.5,"y":-32,"t":13.49},{"x":241.5,"y":-29,"t":13.506},{"x":238.5,"y":-24,"t":13.539},{"x":235.5,"y":-18,"t":13.573},{"x":232.5,"y":-9,"t":13.621},{"x":231.5,"y":-5,"t":13.637},{"x":231.5,"y":1,"t":13.671},{"x":231.5,"y":6,"t":13.705},{"x":231.5,"y":10,"t":13.721},{"x":232.5,"y":15,"t":13.755},{"x":233.5,"y":19,"t":13.787},{"x":236.5,"y":25,"t":13.821},{"x":239.5,"y":29,"t":13.855},{"x":243.5,"y":33,"t":13.888},{"x":247.5,"y":37,"t":13.921},{"x":251.5,"y":39,"t":13.954},{"x":255.5,"y":41,"t":13.988},{"x":259.5,"y":41,"t":14.004},{"x":265.5,"y":42,"t":14.037},{"x":269.5,"y":42,"t":14.071},{"x":273.5,"y":42,"t":14.104},{"x":279.5,"y":41,"t":14.137},{"x":285.5,"y":39,"t":14.155},{"x":290.5,"y":36,"t":14.172}]]},
    year: {"groups":[[{"x":-197.5,"y":-65,"t":0.267},{"x":-196.5,"y":-70,"t":0.3},{"x":-193.5,"y":-75,"t":0.333},{"x":-191.5,"y":-80,"t":0.366},{"x":-189.5,"y":-84,"t":0.4},{"x":-185.5,"y":-89,"t":0.45},{"x":-180.5,"y":-95,"t":0.483},{"x":-175.5,"y":-98,"t":0.517},{"x":-169.5,"y":-99,"t":0.55},{"x":-165.5,"y":-99,"t":0.567},{"x":-161.5,"y":-99,"t":0.583},{"x":-156.5,"y":-99,"t":0.6},{"x":-150.5,"y":-97,"t":0.633},{"x":-144.5,"y":-93,"t":0.666},{"x":-141.5,"y":-90,"t":0.683},{"x":-137.5,"y":-83,"t":0.717},{"x":-135.5,"y":-79,"t":0.733},{"x":-133.5,"y":-75,"t":0.75},{"x":-131.5,"y":-70,"t":0.767},{"x":-130.5,"y":-64,"t":0.783},{"x":-129.5,"y":-60,"t":0.8},{"x":-129.5,"y":-56,"t":0.817},{"x":-129.5,"y":-52,"t":0.833},{"x":-130.5,"y":-48,"t":0.85},{"x":-131.5,"y":-43,"t":0.866},{"x":-133.5,"y":-36,"t":0.9},{"x":-136.5,"y":-29,"t":0.933},{"x":-139.5,"y":-22,"t":0.966},{"x":-142.5,"y":-17,"t":0.983},{"x":-145.5,"y":-11,"t":1.017},{"x":-150.5,"y":-4,"t":1.05},{"x":-153.5,"y":2,"t":1.066},{"x":-157.5,"y":8,"t":1.1},{"x":-160.5,"y":13,"t":1.134},{"x":-164.5,"y":18,"t":1.167},{"x":-168.5,"y":23,"t":1.2},{"x":-174.5,"y":28,"t":1.233},{"x":-180.5,"y":34,"t":1.267},{"x":-186.5,"y":38,"t":1.3},{"x":-190.5,"y":43,"t":1.333},{"x":-194.5,"y":46,"t":1.366},{"x":-189.5,"y":47,"t":1.517},{"x":-184.5,"y":46,"t":1.533},{"x":-176.5,"y":46,"t":1.55},{"x":-170.5,"y":46,"t":1.567},{"x":-164.5,"y":46,"t":1.583},{"x":-158.5,"y":46,"t":1.6},{"x":-152.5,"y":46,"t":1.617},{"x":-147.5,"y":45,"t":1.633},{"x":-140.5,"y":45,"t":1.65},{"x":-136.5,"y":45,"t":1.667},{"x":-132.5,"y":45,"t":1.683},{"x":-128.5,"y":45,"t":1.7},{"x":-123.5,"y":46,"t":1.733},{"x":-118.5,"y":48,"t":1.767},{"x":-114.5,"y":49,"t":1.833}],[{"x":-66.5,"y":-67,"t":2.15},{"x":-70.5,"y":-64,"t":2.167},{"x":-76.5,"y":-59,"t":2.2},{"x":-81.5,"y":-54,"t":2.234},{"x":-85.5,"y":-49,"t":2.267},{"x":-88.5,"y":-44,"t":2.283},{"x":-92.5,"y":-37,"t":2.316},{"x":-94.5,"y":-33,"t":2.334},{"x":-96.5,"y":-29,"t":2.35},{"x":-97.5,"y":-23,"t":2.367},{"x":-98.5,"y":-18,"t":2.383},{"x":-99.5,"y":-14,"t":2.4},{"x":-99.5,"y":-7,"t":2.434},{"x":-99.5,"y":-2,"t":2.451},{"x":-99.5,"y":5,"t":2.467},{"x":-97.5,"y":10,"t":2.483},{"x":-96.5,"y":14,"t":2.5},{"x":-94.5,"y":18,"t":2.517},{"x":-92.5,"y":22,"t":2.533},{"x":-89.5,"y":26,"t":2.55},{"x":-86.5,"y":29,"t":2.567},{"x":-81.5,"y":34,"t":2.6},{"x":-75.5,"y":37,"t":2.633},{"x":-70.5,"y":39,"t":2.65},{"x":-63.5,"y":40,"t":2.683},{"x":-57.5,"y":40,"t":2.717},{"x":-50.5,"y":37,"t":2.75},{"x":-43.5,"y":32,"t":2.784},{"x":-40.5,"y":29,"t":2.8},{"x":-36.5,"y":24,"t":2.834},{"x":-33.5,"y":19,"t":2.85},{"x":-30.5,"y":15,"t":2.867},{"x":-29.5,"y":11,"t":2.884},{"x":-27.5,"y":7,"t":2.9},{"x":-26.5,"y":2,"t":2.917},{"x":-25.5,"y":-2,"t":2.934},{"x":-25.5,"y":-7,"t":2.95},{"x":-25.5,"y":-14,"t":2.984},{"x":-25.5,"y":-20,"t":3.017},{"x":-25.5,"y":-25,"t":3.034},{"x":-26.5,"y":-31,"t":3.067},{"x":-28.5,"y":-37,"t":3.1},{"x":-31.5,"y":-42,"t":3.134},{"x":-33.5,"y":-47,"t":3.167},{"x":-35.5,"y":-51,"t":3.2},{"x":-38.5,"y":-55,"t":3.217},{"x":-41.5,"y":-59,"t":3.25},{"x":-45.5,"y":-63,"t":3.3},{"x":-50.5,"y":-66,"t":3.334},{"x":-54.5,"y":-68,"t":3.367},{"x":-58.5,"y":-69,"t":3.4},{"x":-63.5,"y":-70,"t":3.45},{"x":-68.5,"y":-70,"t":3.484},{"x":-73.5,"y":-69,"t":3.517},{"x":-77.5,"y":-67,"t":3.55},{"x":-80.5,"y":-62,"t":3.584},{"x":-82.5,"y":-57,"t":3.6}],[{"x":13.5,"y":-91,"t":3.784},{"x":17.5,"y":-94,"t":3.8},{"x":20.5,"y":-97,"t":3.817},{"x":24.5,"y":-99,"t":3.85},{"x":27.5,"y":-95,"t":4.034},{"x":28.5,"y":-91,"t":4.067},{"x":29.5,"y":-87,"t":4.084},{"x":29.5,"y":-80,"t":4.117},{"x":29.5,"y":-76,"t":4.134},{"x":29.5,"y":-72,"t":4.151},{"x":30.5,"y":-65,"t":4.183},{"x":30.5,"y":-60,"t":4.2},{"x":30.5,"y":-56,"t":4.217},{"x":30.5,"y":-52,"t":4.233},{"x":30.5,"y":-48,"t":4.25},{"x":30.5,"y":-44,"t":4.268},{"x":30.5,"y":-40,"t":4.284},{"x":30.5,"y":-36,"t":4.301},{"x":30.5,"y":-29,"t":4.317},{"x":30.5,"y":-25,"t":4.334},{"x":30.5,"y":-20,"t":4.35},{"x":30.5,"y":-13,"t":4.384},{"x":30.5,"y":-9,"t":4.4},{"x":31.5,"y":-2,"t":4.417},{"x":32.5,"y":2,"t":4.434},{"x":32.5,"y":6,"t":4.45},{"x":32.5,"y":11,"t":4.483},{"x":33.5,"y":15,"t":4.501},{"x":33.5,"y":19,"t":4.533},{"x":33.5,"y":23,"t":4.567},{"x":33.5,"y":28,"t":4.6},{"x":33.5,"y":33,"t":4.634},{"x":32.5,"y":37,"t":4.667},{"x":32.5,"y":42,"t":4.701},{"x":32.5,"y":47,"t":4.75},{"x":31.5,"y":53,"t":4.8},{"x":31.5,"y":57,"t":4.917},{"x":26.5,"y":57,"t":5.184},{"x":22.5,"y":58,"t":5.217},{"x":27.5,"y":59,"t":5.467},{"x":32.5,"y":59,"t":5.517},{"x":36.5,"y":59,"t":5.584},{"x":40.5,"y":59,"t":5.667},{"x":44.5,"y":59,"t":5.734}],[{"x":119.5,"y":38,"t":5.983},{"x":119.5,"y":32,"t":6.017},{"x":118.5,"y":27,"t":6.033},{"x":118.5,"y":23,"t":6.049},{"x":116.5,"y":16,"t":6.083},{"x":116.5,"y":12,"t":6.1},{"x":115.5,"y":7,"t":6.117},{"x":114.5,"y":1,"t":6.15},{"x":113.5,"y":-6,"t":6.183},{"x":112.5,"y":-14,"t":6.216},{"x":112.5,"y":-20,"t":6.25},{"x":111.5,"y":-26,"t":6.284},{"x":111.5,"y":-30,"t":6.3},{"x":111.5,"y":-34,"t":6.317},{"x":111.5,"y":-38,"t":6.35},{"x":111.5,"y":-43,"t":6.383},{"x":111.5,"y":-48,"t":6.416},{"x":111.5,"y":-53,"t":6.449},{"x":111.5,"y":-57,"t":6.483},{"x":111.5,"y":-63,"t":6.516},{"x":111.5,"y":-69,"t":6.55},{"x":111.5,"y":-74,"t":6.583},{"x":111.5,"y":-79,"t":6.617},{"x":111.5,"y":-85,"t":6.65},{"x":111.5,"y":-91,"t":6.683},{"x":111.5,"y":-95,"t":6.733},{"x":107.5,"y":-92,"t":6.967},{"x":104.5,"y":-88,"t":6.983},{"x":100.5,"y":-82,"t":7.016},{"x":96.5,"y":-76,"t":7.05},{"x":91.5,"y":-69,"t":7.083},{"x":86.5,"y":-63,"t":7.116},{"x":83.5,"y":-58,"t":7.15},{"x":80.5,"y":-54,"t":7.166},{"x":77.5,"y":-48,"t":7.2},{"x":74.5,"y":-43,"t":7.233},{"x":70.5,"y":-38,"t":7.266},{"x":66.5,"y":-32,"t":7.3},{"x":63.5,"y":-28,"t":7.333},{"x":60.5,"y":-24,"t":7.367},{"x":57.5,"y":-19,"t":7.4},{"x":55.5,"y":-15,"t":7.467},{"x":52.5,"y":-11,"t":7.55},{"x":50.5,"y":-7,"t":7.617},{"x":54.5,"y":-7,"t":7.783},{"x":60.5,"y":-7,"t":7.816},{"x":64.5,"y":-7,"t":7.834},{"x":69.5,"y":-6,"t":7.867},{"x":74.5,"y":-6,"t":7.9},{"x":79.5,"y":-6,"t":7.933},{"x":84.5,"y":-6,"t":7.967},{"x":89.5,"y":-6,"t":8.001},{"x":93.5,"y":-6,"t":8.033},{"x":98.5,"y":-6,"t":8.067},{"x":104.5,"y":-6,"t":8.1},{"x":110.5,"y":-6,"t":8.133},{"x":115.5,"y":-6,"t":8.15},{"x":119.5,"y":-6,"t":8.167},{"x":125.5,"y":-6,"t":8.2},{"x":132.5,"y":-7,"t":8.233},{"x":141.5,"y":-8,"t":8.267},{"x":146.5,"y":-8,"t":8.316},{"x":152.5,"y":-9,"t":8.35},{"x":156.5,"y":-9,"t":8.383}]]},
    love: {"groups":[[{"x":-10.5,"y":101,"t":0.1},{"x":-10.5,"y":96,"t":0.15},{"x":-10.5,"y":92,"t":0.184},{"x":-11.5,"y":88,"t":0.218},{"x":-13.5,"y":83,"t":0.25},{"x":-15.5,"y":77,"t":0.301},{"x":-18.5,"y":73,"t":0.334},{"x":-21.5,"y":69,"t":0.367},{"x":-25.5,"y":63,"t":0.401},{"x":-28.5,"y":60,"t":0.418},{"x":-31.5,"y":57,"t":0.434},{"x":-35.5,"y":53,"t":0.451},{"x":-38.5,"y":50,"t":0.468},{"x":-41.5,"y":47,"t":0.483},{"x":-44.5,"y":44,"t":0.501},{"x":-51.5,"y":38,"t":0.535},{"x":-54.5,"y":35,"t":0.55},{"x":-59.5,"y":29,"t":0.583},{"x":-62.5,"y":26,"t":0.601},{"x":-65.5,"y":22,"t":0.617},{"x":-69.5,"y":16,"t":0.65},{"x":-72.5,"y":13,"t":0.667},{"x":-77.5,"y":7,"t":0.701},{"x":-81.5,"y":1,"t":0.718},{"x":-84.5,"y":-2,"t":0.734},{"x":-86.5,"y":-6,"t":0.751},{"x":-89.5,"y":-10,"t":0.767},{"x":-94.5,"y":-17,"t":0.801},{"x":-97.5,"y":-23,"t":0.817},{"x":-99.5,"y":-28,"t":0.834},{"x":-102.5,"y":-32,"t":0.85},{"x":-103.5,"y":-36,"t":0.867},{"x":-105.5,"y":-40,"t":0.884},{"x":-107.5,"y":-45,"t":0.901},{"x":-109.5,"y":-49,"t":0.918},{"x":-110.5,"y":-54,"t":0.934},{"x":-110.5,"y":-58,"t":0.95},{"x":-111.5,"y":-63,"t":0.967},{"x":-113.5,"y":-70,"t":1},{"x":-114.5,"y":-77,"t":1.017},{"x":-114.5,"y":-83,"t":1.034},{"x":-115.5,"y":-89,"t":1.05},{"x":-116.5,"y":-93,"t":1.067},{"x":-116.5,"y":-97,"t":1.083},{"x":-116.5,"y":-101,"t":1.101},{"x":-114.5,"y":-107,"t":1.117},{"x":-112.5,"y":-111,"t":1.134},{"x":-108.5,"y":-117,"t":1.168},{"x":-105.5,"y":-120,"t":1.184},{"x":-101.5,"y":-124,"t":1.201},{"x":-96.5,"y":-128,"t":1.219},{"x":-89.5,"y":-132,"t":1.25},{"x":-81.5,"y":-136,"t":1.284},{"x":-77.5,"y":-138,"t":1.302},{"x":-69.5,"y":-140,"t":1.317},{"x":-65.5,"y":-141,"t":1.335},{"x":-61.5,"y":-141,"t":1.35},{"x":-57.5,"y":-142,"t":1.367},{"x":-53.5,"y":-142,"t":1.384},{"x":-49.5,"y":-141,"t":1.401},{"x":-42.5,"y":-140,"t":1.418},{"x":-38.5,"y":-139,"t":1.434},{"x":-34.5,"y":-137,"t":1.45},{"x":-29.5,"y":-135,"t":1.467},{"x":-25.5,"y":-132,"t":1.484},{"x":-19.5,"y":-127,"t":1.501},{"x":-16.5,"y":-124,"t":1.518},{"x":-12.5,"y":-119,"t":1.534},{"x":-9.5,"y":-114,"t":1.55},{"x":-7.5,"y":-109,"t":1.568},{"x":-5.5,"y":-103,"t":1.584},{"x":-3.5,"y":-94,"t":1.601},{"x":-2.5,"y":-88,"t":1.618},{"x":-2.5,"y":-82,"t":1.634},{"x":-2.5,"y":-77,"t":1.65},{"x":-2.5,"y":-72,"t":1.668},{"x":-2.5,"y":-65,"t":1.684},{"x":-2.5,"y":-71,"t":1.835},{"x":-2.5,"y":-75,"t":1.851},{"x":-2.5,"y":-79,"t":1.868},{"x":-2.5,"y":-86,"t":1.884},{"x":-2.5,"y":-91,"t":1.901},{"x":-1.5,"y":-96,"t":1.918},{"x":-1.5,"y":-102,"t":1.934},{"x":-0.5,"y":-106,"t":1.951},{"x":0.5,"y":-110,"t":1.969},{"x":2.5,"y":-116,"t":1.985},{"x":4.5,"y":-123,"t":2.017},{"x":7.5,"y":-129,"t":2.051},{"x":10.5,"y":-133,"t":2.069},{"x":14.5,"y":-138,"t":2.101},{"x":19.5,"y":-141,"t":2.135},{"x":23.5,"y":-143,"t":2.151},{"x":29.5,"y":-145,"t":2.184},{"x":35.5,"y":-145,"t":2.218},{"x":40.5,"y":-146,"t":2.251},{"x":44.5,"y":-146,"t":2.268},{"x":51.5,"y":-147,"t":2.301},{"x":57.5,"y":-148,"t":2.335},{"x":64.5,"y":-148,"t":2.368},{"x":68.5,"y":-148,"t":2.384},{"x":75.5,"y":-147,"t":2.417},{"x":81.5,"y":-146,"t":2.451},{"x":88.5,"y":-144,"t":2.468},{"x":95.5,"y":-140,"t":2.501},{"x":101.5,"y":-135,"t":2.534},{"x":104.5,"y":-132,"t":2.552},{"x":109.5,"y":-128,"t":2.568},{"x":113.5,"y":-124,"t":2.584},{"x":116.5,"y":-120,"t":2.601},{"x":118.5,"y":-115,"t":2.617},{"x":120.5,"y":-110,"t":2.634},{"x":122.5,"y":-105,"t":2.651},{"x":123.5,"y":-98,"t":2.668},{"x":124.5,"y":-93,"t":2.684},{"x":124.5,"y":-89,"t":2.701},{"x":124.5,"y":-84,"t":2.718},{"x":123.5,"y":-79,"t":2.733},{"x":121.5,"y":-73,"t":2.751},{"x":118.5,"y":-66,"t":2.767},{"x":117.5,"y":-61,"t":2.784},{"x":115.5,"y":-56,"t":2.802},{"x":112.5,"y":-51,"t":2.818},{"x":109.5,"y":-45,"t":2.836},{"x":106.5,"y":-41,"t":2.851},{"x":102.5,"y":-34,"t":2.868},{"x":99.5,"y":-30,"t":2.885},{"x":96.5,"y":-26,"t":2.9},{"x":93.5,"y":-23,"t":2.918},{"x":90.5,"y":-19,"t":2.934},{"x":86.5,"y":-15,"t":2.951},{"x":83.5,"y":-12,"t":2.968},{"x":79.5,"y":-9,"t":2.985},{"x":76.5,"y":-6,"t":3},{"x":72.5,"y":-3,"t":3.018},{"x":67.5,"y":0,"t":3.034},{"x":61.5,"y":5,"t":3.051},{"x":57.5,"y":8,"t":3.068},{"x":52.5,"y":11,"t":3.084},{"x":48.5,"y":14,"t":3.101},{"x":43.5,"y":18,"t":3.117},{"x":39.5,"y":22,"t":3.134},{"x":33.5,"y":27,"t":3.151},{"x":29.5,"y":31,"t":3.167},{"x":26.5,"y":35,"t":3.184},{"x":23.5,"y":38,"t":3.2},{"x":20.5,"y":42,"t":3.218},{"x":16.5,"y":48,"t":3.234},{"x":13.5,"y":52,"t":3.251},{"x":10.5,"y":56,"t":3.267},{"x":7.5,"y":61,"t":3.284},{"x":4.5,"y":65,"t":3.301},{"x":0.5,"y":70,"t":3.318},{"x":-4.5,"y":77,"t":3.335},{"x":-7.5,"y":82,"t":3.351},{"x":-10.5,"y":89,"t":3.384},{"x":-12.5,"y":93,"t":3.401},{"x":-13.5,"y":97,"t":3.418},{"x":-13.5,"y":102,"t":3.435},{"x":-13.5,"y":110,"t":3.451},{"x":-10.5,"y":114,"t":3.484}]]},
    hao: {"groups":[[{"x":-159.5,"y":-109,"t":0.282},{"x":-159.5,"y":-103,"t":0.315},{"x":-158.5,"y":-98,"t":0.349},{"x":-158.5,"y":-94,"t":0.366},{"x":-157.5,"y":-90,"t":0.382},{"x":-157.5,"y":-86,"t":0.397},{"x":-156.5,"y":-82,"t":0.415},{"x":-156.5,"y":-77,"t":0.431},{"x":-155.5,"y":-72,"t":0.449},{"x":-154.5,"y":-65,"t":0.464},{"x":-153.5,"y":-60,"t":0.482},{"x":-152.5,"y":-55,"t":0.499},{"x":-151.5,"y":-49,"t":0.515},{"x":-150.5,"y":-44,"t":0.531},{"x":-149.5,"y":-38,"t":0.548},{"x":-148.5,"y":-28,"t":0.565},{"x":-147.5,"y":-22,"t":0.582},{"x":-147.5,"y":-15,"t":0.599},{"x":-146.5,"y":-9,"t":0.616},{"x":-146.5,"y":-3,"t":0.631},{"x":-145.5,"y":3,"t":0.648},{"x":-145.5,"y":12,"t":0.665},{"x":-145.5,"y":18,"t":0.682},{"x":-145.5,"y":23,"t":0.699},{"x":-145.5,"y":28,"t":0.715},{"x":-145.5,"y":32,"t":0.731},{"x":-144.5,"y":36,"t":0.749},{"x":-144.5,"y":43,"t":0.766},{"x":-144.5,"y":47,"t":0.781},{"x":-144.5,"y":51,"t":0.798},{"x":-144.5,"y":55,"t":0.815},{"x":-144.5,"y":59,"t":0.832},{"x":-143.5,"y":65,"t":0.865},{"x":-143.5,"y":69,"t":0.898},{"x":-142.5,"y":74,"t":0.949},{"x":-142.5,"y":78,"t":0.997},{"x":-142.5,"y":73,"t":1.164},{"x":-142.5,"y":69,"t":1.198},{"x":-142.5,"y":64,"t":1.232},{"x":-142.5,"y":60,"t":1.265},{"x":-142.5,"y":56,"t":1.315},{"x":-142.5,"y":50,"t":1.349},{"x":-143.5,"y":44,"t":1.382},{"x":-143.5,"y":39,"t":1.398},{"x":-143.5,"y":34,"t":1.416},{"x":-143.5,"y":29,"t":1.432},{"x":-142.5,"y":22,"t":1.448},{"x":-140.5,"y":18,"t":1.465},{"x":-136.5,"y":14,"t":1.482},{"x":-132.5,"y":9,"t":1.499},{"x":-127.5,"y":5,"t":1.514},{"x":-121.5,"y":2,"t":1.532},{"x":-114.5,"y":0,"t":1.548},{"x":-109.5,"y":0,"t":1.565},{"x":-104.5,"y":0,"t":1.581},{"x":-99.5,"y":1,"t":1.598},{"x":-94.5,"y":4,"t":1.615},{"x":-88.5,"y":11,"t":1.632},{"x":-86.5,"y":16,"t":1.649},{"x":-84.5,"y":23,"t":1.664},{"x":-82.5,"y":30,"t":1.681},{"x":-81.5,"y":36,"t":1.698},{"x":-81.5,"y":43,"t":1.714},{"x":-81.5,"y":52,"t":1.732},{"x":-81.5,"y":57,"t":1.749},{"x":-81.5,"y":63,"t":1.765},{"x":-81.5,"y":68,"t":1.781},{"x":-81.5,"y":73,"t":1.799},{"x":-81.5,"y":77,"t":1.814},{"x":-81.5,"y":82,"t":1.832}],[{"x":-186.5,"y":-63,"t":2.251},{"x":-182.5,"y":-63,"t":2.3},{"x":-178.5,"y":-63,"t":2.367},{"x":-173.5,"y":-63,"t":2.418},{"x":-168.5,"y":-64,"t":2.451},{"x":-164.5,"y":-65,"t":2.484},{"x":-160.5,"y":-66,"t":2.518},{"x":-156.5,"y":-66,"t":2.551},{"x":-151.5,"y":-67,"t":2.6},{"x":-146.5,"y":-68,"t":2.635},{"x":-141.5,"y":-68,"t":2.684},{"x":-136.5,"y":-68,"t":2.735},{"x":-132.5,"y":-69,"t":2.784},{"x":-127.5,"y":-69,"t":2.85},{"x":-123.5,"y":-70,"t":2.884},{"x":-119.5,"y":-70,"t":2.934},{"x":-115.5,"y":-70,"t":2.984},{"x":-111.5,"y":-70,"t":3.085},{"x":-107.5,"y":-70,"t":3.15}],[{"x":-4.5,"y":-11,"t":3.251},{"x":-10.5,"y":-9,"t":3.285},{"x":-15.5,"y":-7,"t":3.317},{"x":-20.5,"y":-4,"t":3.351},{"x":-24.5,"y":-2,"t":3.368},{"x":-30.5,"y":1,"t":3.402},{"x":-35.5,"y":5,"t":3.434},{"x":-41.5,"y":10,"t":3.468},{"x":-44.5,"y":14,"t":3.502},{"x":-48.5,"y":20,"t":3.534},{"x":-49.5,"y":24,"t":3.552},{"x":-51.5,"y":29,"t":3.567},{"x":-51.5,"y":36,"t":3.601},{"x":-49.5,"y":43,"t":3.634},{"x":-48.5,"y":47,"t":3.652},{"x":-45.5,"y":51,"t":3.668},{"x":-42.5,"y":54,"t":3.684},{"x":-37.5,"y":59,"t":3.718},{"x":-29.5,"y":63,"t":3.752},{"x":-25.5,"y":64,"t":3.768},{"x":-19.5,"y":64,"t":3.801},{"x":-14.5,"y":63,"t":3.834},{"x":-7.5,"y":60,"t":3.867},{"x":-2.5,"y":56,"t":3.901},{"x":1.5,"y":52,"t":3.935},{"x":5.5,"y":46,"t":3.968},{"x":6.5,"y":42,"t":3.984},{"x":6.5,"y":38,"t":4.001},{"x":7.5,"y":31,"t":4.034},{"x":7.5,"y":24,"t":4.052},{"x":7.5,"y":20,"t":4.067},{"x":6.5,"y":16,"t":4.084},{"x":5.5,"y":10,"t":4.119},{"x":4.5,"y":6,"t":4.135},{"x":2.5,"y":1,"t":4.152},{"x":0.5,"y":-3,"t":4.184},{"x":-0.5,"y":-7,"t":4.234},{"x":-2.5,"y":-11,"t":4.284},{"x":-0.5,"y":-5,"t":4.484},{"x":0.5,"y":-1,"t":4.501},{"x":2.5,"y":3,"t":4.518},{"x":4.5,"y":9,"t":4.534},{"x":5.5,"y":13,"t":4.551},{"x":7.5,"y":18,"t":4.568},{"x":9.5,"y":23,"t":4.584},{"x":10.5,"y":28,"t":4.601},{"x":12.5,"y":32,"t":4.618},{"x":14.5,"y":38,"t":4.635},{"x":17.5,"y":45,"t":4.668},{"x":21.5,"y":51,"t":4.701},{"x":25.5,"y":57,"t":4.735},{"x":30.5,"y":61,"t":4.767},{"x":34.5,"y":62,"t":4.785},{"x":38.5,"y":63,"t":4.8},{"x":43.5,"y":64,"t":4.819},{"x":50.5,"y":64,"t":4.835}],[{"x":97.5,"y":-20,"t":4.951},{"x":91.5,"y":-16,"t":4.985},{"x":88.5,"y":-13,"t":5.001},{"x":84.5,"y":-9,"t":5.018},{"x":81.5,"y":-6,"t":5.035},{"x":78.5,"y":-2,"t":5.051},{"x":75.5,"y":2,"t":5.068},{"x":72.5,"y":8,"t":5.085},{"x":70.5,"y":12,"t":5.101},{"x":69.5,"y":17,"t":5.118},{"x":69.5,"y":22,"t":5.136},{"x":69.5,"y":27,"t":5.151},{"x":69.5,"y":34,"t":5.168},{"x":70.5,"y":38,"t":5.185},{"x":72.5,"y":42,"t":5.201},{"x":75.5,"y":47,"t":5.218},{"x":78.5,"y":51,"t":5.235},{"x":81.5,"y":55,"t":5.251},{"x":86.5,"y":60,"t":5.269},{"x":90.5,"y":62,"t":5.285},{"x":95.5,"y":64,"t":5.301},{"x":100.5,"y":65,"t":5.318},{"x":105.5,"y":65,"t":5.335},{"x":110.5,"y":65,"t":5.352},{"x":117.5,"y":64,"t":5.368},{"x":122.5,"y":62,"t":5.385},{"x":126.5,"y":59,"t":5.401},{"x":130.5,"y":55,"t":5.418},{"x":133.5,"y":51,"t":5.435},{"x":135.5,"y":46,"t":5.451},{"x":137.5,"y":39,"t":5.468},{"x":137.5,"y":34,"t":5.485},{"x":137.5,"y":30,"t":5.501},{"x":137.5,"y":25,"t":5.519},{"x":137.5,"y":21,"t":5.535},{"x":137.5,"y":15,"t":5.552},{"x":136.5,"y":11,"t":5.568},{"x":135.5,"y":6,"t":5.585},{"x":134.5,"y":2,"t":5.601},{"x":132.5,"y":-2,"t":5.618},{"x":127.5,"y":-10,"t":5.652},{"x":122.5,"y":-16,"t":5.685},{"x":117.5,"y":-20,"t":5.718},{"x":113.5,"y":-21,"t":5.735},{"x":106.5,"y":-22,"t":5.769},{"x":99.5,"y":-21,"t":5.801},{"x":91.5,"y":-18,"t":5.835},{"x":85.5,"y":-14,"t":5.868},{"x":82.5,"y":-11,"t":5.885},{"x":79.5,"y":-8,"t":5.902},{"x":77.5,"y":-4,"t":5.918},{"x":76.5,"y":0,"t":5.935}]]},
    hola: {"groups":[[{"x":-185.5,"y":-88,"t":0.067},{"x":-189.5,"y":-86,"t":0.116},{"x":-191.5,"y":-81,"t":0.166},{"x":-191.5,"y":-76,"t":0.2},{"x":-187.5,"y":-73,"t":0.249},{"x":-183.5,"y":-73,"t":0.3},{"x":-179.5,"y":-76,"t":0.35},{"x":-178.5,"y":-80,"t":0.433},{"x":-180.5,"y":-84,"t":0.5},{"x":-184.5,"y":-86,"t":0.566},{"x":-188.5,"y":-86,"t":0.632},{"x":-193.5,"y":-84,"t":0.7}],[{"x":-183.5,"y":-49,"t":0.782},{"x":-183.5,"y":-45,"t":0.798},{"x":-183.5,"y":-40,"t":0.816},{"x":-183.5,"y":-36,"t":0.831},{"x":-182.5,"y":-32,"t":0.849},{"x":-181.5,"y":-25,"t":0.865},{"x":-181.5,"y":-21,"t":0.882},{"x":-180.5,"y":-16,"t":0.898},{"x":-180.5,"y":-11,"t":0.916},{"x":-179.5,"y":-7,"t":0.931},{"x":-179.5,"y":-1,"t":0.95},{"x":-179.5,"y":3,"t":0.965},{"x":-179.5,"y":8,"t":0.982},{"x":-179.5,"y":12,"t":0.998},{"x":-179.5,"y":16,"t":1.016},{"x":-179.5,"y":21,"t":1.032},{"x":-179.5,"y":27,"t":1.065},{"x":-179.5,"y":32,"t":1.098},{"x":-179.5,"y":38,"t":1.132},{"x":-179.5,"y":44,"t":1.165},{"x":-179.5,"y":49,"t":1.198},{"x":-178.5,"y":55,"t":1.233},{"x":-178.5,"y":59,"t":1.265}],[{"x":-136.5,"y":32,"t":1.432},{"x":-136.5,"y":28,"t":1.448},{"x":-136.5,"y":23,"t":1.466},{"x":-136.5,"y":15,"t":1.481},{"x":-136.5,"y":1,"t":1.499},{"x":-137.5,"y":-8,"t":1.516},{"x":-137.5,"y":-16,"t":1.532},{"x":-138.5,"y":-24,"t":1.548},{"x":-139.5,"y":-31,"t":1.566},{"x":-139.5,"y":-42,"t":1.582},{"x":-139.5,"y":-50,"t":1.599},{"x":-139.5,"y":-56,"t":1.615},{"x":-139.5,"y":-62,"t":1.632},{"x":-140.5,"y":-67,"t":1.649},{"x":-140.5,"y":-73,"t":1.665},{"x":-140.5,"y":-79,"t":1.683},{"x":-140.5,"y":-87,"t":1.699},{"x":-141.5,"y":-92,"t":1.715},{"x":-141.5,"y":-96,"t":1.732},{"x":-142.5,"y":-101,"t":1.749},{"x":-142.5,"y":-105,"t":1.767},{"x":-143.5,"y":-109,"t":1.783},{"x":-143.5,"y":-114,"t":1.799},{"x":-143.5,"y":-118,"t":1.815},{"x":-144.5,"y":-123,"t":1.832},{"x":-144.5,"y":-127,"t":1.849},{"x":-144.5,"y":-131,"t":1.865},{"x":-144.5,"y":-121,"t":1.965},{"x":-144.5,"y":-109,"t":1.983},{"x":-144.5,"y":-100,"t":1.998},{"x":-143.5,"y":-91,"t":2.016},{"x":-142.5,"y":-82,"t":2.031},{"x":-141.5,"y":-72,"t":2.049},{"x":-140.5,"y":-62,"t":2.066},{"x":-139.5,"y":-56,"t":2.066},{"x":-138.5,"y":-46,"t":2.083},{"x":-137.5,"y":-35,"t":2.099},{"x":-137.5,"y":-26,"t":2.117},{"x":-136.5,"y":-18,"t":2.132},{"x":-136.5,"y":-11,"t":2.149},{"x":-135.5,"y":-4,"t":2.166},{"x":-134.5,"y":5,"t":2.182},{"x":-134.5,"y":12,"t":2.198},{"x":-133.5,"y":17,"t":2.215},{"x":-133.5,"y":22,"t":2.232},{"x":-132.5,"y":26,"t":2.249},{"x":-132.5,"y":31,"t":2.266},{"x":-131.5,"y":36,"t":2.299},{"x":-130.5,"y":40,"t":2.349},{"x":-130.5,"y":35,"t":2.499},{"x":-130.5,"y":30,"t":2.516},{"x":-130.5,"y":25,"t":2.532},{"x":-130.5,"y":19,"t":2.549},{"x":-130.5,"y":11,"t":2.566},{"x":-130.5,"y":6,"t":2.582},{"x":-130.5,"y":2,"t":2.599},{"x":-130.5,"y":-2,"t":2.616},{"x":-129.5,"y":-7,"t":2.632},{"x":-128.5,"y":-11,"t":2.649},{"x":-127.5,"y":-16,"t":2.666},{"x":-125.5,"y":-22,"t":2.698},{"x":-124.5,"y":-27,"t":2.732},{"x":-121.5,"y":-32,"t":2.766},{"x":-118.5,"y":-37,"t":2.799},{"x":-113.5,"y":-40,"t":2.832},{"x":-107.5,"y":-42,"t":2.866},{"x":-99.5,"y":-42,"t":2.899},{"x":-95.5,"y":-41,"t":2.916},{"x":-91.5,"y":-39,"t":2.932},{"x":-85.5,"y":-36,"t":2.95},{"x":-82.5,"y":-33,"t":2.966},{"x":-79.5,"y":-30,"t":2.982},{"x":-76.5,"y":-25,"t":2.999},{"x":-73.5,"y":-20,"t":3.016},{"x":-72.5,"y":-15,"t":3.033},{"x":-70.5,"y":-6,"t":3.05},{"x":-70.5,"y":0,"t":3.065},{"x":-70.5,"y":6,"t":3.083},{"x":-70.5,"y":12,"t":3.098},{"x":-70.5,"y":17,"t":3.116},{"x":-70.5,"y":22,"t":3.132},{"x":-70.5,"y":28,"t":3.15},{"x":-70.5,"y":32,"t":3.166},{"x":-70.5,"y":37,"t":3.199},{"x":-70.5,"y":42,"t":3.232},{"x":-70.5,"y":46,"t":3.265}],[{"x":-24.5,"y":-33,"t":3.417},{"x":-28.5,"y":-32,"t":3.449},{"x":-33.5,"y":-28,"t":3.467},{"x":-37.5,"y":-25,"t":3.483},{"x":-41.5,"y":-21,"t":3.499},{"x":-44.5,"y":-17,"t":3.515},{"x":-47.5,"y":-13,"t":3.532},{"x":-50.5,"y":-8,"t":3.549},{"x":-52.5,"y":-2,"t":3.566},{"x":-53.5,"y":4,"t":3.583},{"x":-53.5,"y":14,"t":3.599},{"x":-53.5,"y":20,"t":3.616},{"x":-51.5,"y":25,"t":3.633},{"x":-49.5,"y":30,"t":3.649},{"x":-46.5,"y":34,"t":3.667},{"x":-42.5,"y":38,"t":3.684},{"x":-36.5,"y":43,"t":3.7},{"x":-29.5,"y":46,"t":3.733},{"x":-25.5,"y":47,"t":3.749},{"x":-21.5,"y":47,"t":3.767},{"x":-16.5,"y":47,"t":3.799},{"x":-10.5,"y":44,"t":3.833},{"x":-6.5,"y":42,"t":3.849},{"x":-1.5,"y":37,"t":3.884},{"x":2.5,"y":32,"t":3.915},{"x":5.5,"y":26,"t":3.949},{"x":6.5,"y":22,"t":3.967},{"x":7.5,"y":16,"t":4.008},{"x":7.5,"y":10,"t":4.041},{"x":8.5,"y":5,"t":4.058},{"x":8.5,"y":0,"t":4.091},{"x":7.5,"y":-6,"t":4.124},{"x":5.5,"y":-12,"t":4.158},{"x":2.5,"y":-17,"t":4.191},{"x":-0.5,"y":-22,"t":4.225},{"x":-4.5,"y":-26,"t":4.258},{"x":-9.5,"y":-30,"t":4.291},{"x":-13.5,"y":-32,"t":4.308},{"x":-19.5,"y":-34,"t":4.341},{"x":-26.5,"y":-35,"t":4.375},{"x":-32.5,"y":-34,"t":4.408},{"x":-35.5,"y":-31,"t":4.425},{"x":-38.5,"y":-26,"t":4.458}],[{"x":41.5,"y":31,"t":4.541},{"x":43.5,"y":26,"t":4.558},{"x":45.5,"y":21,"t":4.575},{"x":48.5,"y":12,"t":4.592},{"x":50.5,"y":5,"t":4.608},{"x":52.5,"y":-2,"t":4.625},{"x":53.5,"y":-9,"t":4.642},{"x":54.5,"y":-16,"t":4.658},{"x":56.5,"y":-23,"t":4.675},{"x":56.5,"y":-27,"t":4.675},{"x":57.5,"y":-34,"t":4.692},{"x":58.5,"y":-42,"t":4.708},{"x":59.5,"y":-49,"t":4.725},{"x":59.5,"y":-57,"t":4.742},{"x":60.5,"y":-64,"t":4.758},{"x":60.5,"y":-70,"t":4.775},{"x":60.5,"y":-79,"t":4.792},{"x":60.5,"y":-86,"t":4.808},{"x":60.5,"y":-91,"t":4.825},{"x":60.5,"y":-97,"t":4.842},{"x":60.5,"y":-101,"t":4.858},{"x":60.5,"y":-106,"t":4.875},{"x":59.5,"y":-110,"t":4.892},{"x":58.5,"y":-115,"t":4.925},{"x":57.5,"y":-119,"t":4.941},{"x":55.5,"y":-125,"t":4.991},{"x":53.5,"y":-129,"t":5.042},{"x":49.5,"y":-125,"t":5.175},{"x":48.5,"y":-120,"t":5.191},{"x":48.5,"y":-115,"t":5.209},{"x":48.5,"y":-109,"t":5.225},{"x":48.5,"y":-103,"t":5.242},{"x":48.5,"y":-96,"t":5.259},{"x":48.5,"y":-84,"t":5.275},{"x":48.5,"y":-76,"t":5.291},{"x":48.5,"y":-68,"t":5.308},{"x":48.5,"y":-59,"t":5.325},{"x":48.5,"y":-51,"t":5.342},{"x":48.5,"y":-39,"t":5.358},{"x":48.5,"y":-31,"t":5.375},{"x":48.5,"y":-23,"t":5.391},{"x":48.5,"y":-16,"t":5.408},{"x":48.5,"y":-9,"t":5.425},{"x":48.5,"y":-3,"t":5.442},{"x":49.5,"y":5,"t":5.458},{"x":50.5,"y":10,"t":5.475},{"x":50.5,"y":15,"t":5.492},{"x":51.5,"y":20,"t":5.508},{"x":52.5,"y":24,"t":5.525},{"x":55.5,"y":32,"t":5.558},{"x":58.5,"y":37,"t":5.592},{"x":62.5,"y":41,"t":5.641},{"x":65.5,"y":44,"t":5.675},{"x":69.5,"y":46,"t":5.725},{"x":74.5,"y":46,"t":5.758},{"x":79.5,"y":46,"t":5.792},{"x":83.5,"y":45,"t":5.825},{"x":87.5,"y":44,"t":5.875},{"x":93.5,"y":42,"t":5.909},{"x":97.5,"y":40,"t":5.925}],[{"x":140.5,"y":-39,"t":6.108},{"x":136.5,"y":-38,"t":6.125},{"x":130.5,"y":-35,"t":6.141},{"x":126.5,"y":-32,"t":6.158},{"x":120.5,"y":-28,"t":6.191},{"x":115.5,"y":-24,"t":6.225},{"x":111.5,"y":-20,"t":6.242},{"x":106.5,"y":-15,"t":6.275},{"x":102.5,"y":-8,"t":6.308},{"x":99.5,"y":-2,"t":6.342},{"x":98.5,"y":3,"t":6.375},{"x":96.5,"y":9,"t":6.408},{"x":95.5,"y":14,"t":6.425},{"x":94.5,"y":20,"t":6.458},{"x":94.5,"y":24,"t":6.475},{"x":95.5,"y":31,"t":6.508},{"x":97.5,"y":36,"t":6.525},{"x":100.5,"y":42,"t":6.558},{"x":103.5,"y":45,"t":6.575},{"x":111.5,"y":50,"t":6.608},{"x":118.5,"y":53,"t":6.641},{"x":123.5,"y":55,"t":6.675},{"x":130.5,"y":54,"t":6.708},{"x":134.5,"y":53,"t":6.725},{"x":137.5,"y":50,"t":6.742},{"x":141.5,"y":48,"t":6.758},{"x":146.5,"y":44,"t":6.792},{"x":149.5,"y":40,"t":6.808},{"x":153.5,"y":34,"t":6.841},{"x":155.5,"y":28,"t":6.875},{"x":156.5,"y":20,"t":6.908},{"x":157.5,"y":16,"t":6.925},{"x":158.5,"y":9,"t":6.959},{"x":159.5,"y":0,"t":6.992},{"x":159.5,"y":-7,"t":7.024},{"x":158.5,"y":-13,"t":7.059},{"x":156.5,"y":-19,"t":7.091},{"x":154.5,"y":-23,"t":7.125},{"x":151.5,"y":-26,"t":7.158},{"x":148.5,"y":-29,"t":7.192},{"x":144.5,"y":-32,"t":7.242},{"x":139.5,"y":-33,"t":7.274},{"x":135.5,"y":-35,"t":7.308},{"x":131.5,"y":-36,"t":7.358},{"x":135.5,"y":-35,"t":7.592},{"x":140.5,"y":-33,"t":7.626},{"x":145.5,"y":-29,"t":7.659},{"x":147.5,"y":-25,"t":7.675},{"x":150.5,"y":-18,"t":7.708},{"x":151.5,"y":-14,"t":7.726},{"x":152.5,"y":-10,"t":7.742},{"x":153.5,"y":-6,"t":7.758},{"x":155.5,"y":0,"t":7.776},{"x":155.5,"y":5,"t":7.792},{"x":156.5,"y":9,"t":7.809},{"x":156.5,"y":13,"t":7.826},{"x":157.5,"y":17,"t":7.842},{"x":159.5,"y":24,"t":7.875},{"x":162.5,"y":30,"t":7.909},{"x":165.5,"y":36,"t":7.942},{"x":168.5,"y":41,"t":7.976},{"x":171.5,"y":44,"t":8.009},{"x":175.5,"y":46,"t":8.042},{"x":180.5,"y":49,"t":8.076},{"x":184.5,"y":50,"t":8.109},{"x":190.5,"y":50,"t":8.159},{"x":195.5,"y":51,"t":8.192}]]}
};
</script>
!

CSS 

              
                html, body {
  background: #00B1E1;
  background: #222;
  overflow: hidden;
  margin: 0;
}
!

JS 

              
                /*

This is the first sketch I made for the title slide of my Resonate.io 2014 talk. I'm finishing up the interactive version that will let you make and send your own messages and will release the source for that soon (follow @soulwire for announcements).

People have been asking me how I did it though, so thought I'd give you the rough unedited source to deconstruct first.

*/

function Path( points, color ) {
 
    this.clock = 0;
    this.alive = true;
    this.progress = 0;
    this.color = color;
    this.points = points.concat();
    this.particles = [];
    this.nodes = [];
 
    // this.points = this.simplify( points, 8 );
 
    if ( Math.random() < 0.5 ) {
        this.reverse();
    }
}
 
Path.prototype = {
 
    addParticle: function( node ) {
 
        this.particles.push({
            vx: node.vx * random( 0.5, 1.5 ),
            vy: node.vy * random( 0.5, 1.5 ),
            x: node.x,
            y: node.y,
            t: node.t * random( 0.8, 1.1 )
        });
    },
 
    addNode: function( x, y ) {
 
        var p = this.nodes[ this.nodes.length - 1 ];
        var d = 1.0;
        var dx, dy;
 
        if ( p ) {
 
            dx = p.x - x;
            dy = p.y - y;
            d = sqrt( dx * dx + dy * dy );
        }
 
        var a = random( -PI, PI );
 
        this.nodes.push({
            stiffness: random( 0.65, 0.85 ), //0.3,
            length: d * random( 0.5, 4.0 ),
            wander: random( 0.2, 0.95 ),
            jitter: random( 0.05, 0.1 ),
            force: random( 0.05, 0.3 ),
            color: random( COLORS ),
            speed: random( 0.5, 0.8 ),
            // theta: random( -TWO_PI, TWO_PI ),
            theta: a + ( atan2( dy, dx ) || 0 ),
            turn: random( 0.1, 0.68 ),
            snap: random( 0.33 ),
            dragEase: random( 0.02, 0.03 ),
            dragMax: random( 0.82, 0.95 ),
            drag: 0.0,
            age: 0,
            vx: 0,
            vy: 0,
            t: 1,
            x: x,
            y: y
        });
    },
 
    step: function( dt ) {
 
        this.clock += dt;
 
        if ( this.progress < 1.0 ) {
 
            var min = this.nodes.length;
            var max = this.points.length;
 
            for ( var p, i = min; i < max; i++ ) {
 
                p = this.points[i];
 
                if ( p.t <= this.clock )
 
                    this.addNode( p.x, p.y );
 
                else break;
            }
 
            this.progress = min / max;
 
        } else {
 
            if ( this.nodes.length > 3 ) {
 
                if ( random() < 0.25 )
 
                    // this.nodes.shift();
                    if ( random() < 0.8 ) this.nodes.shift();
                    else this.nodes.splice( ~~random( this.nodes.length ), 1 );
 
            } else {
 
                this.nodes.length = 0;
                this.alive = false;
            }
        }
    },
 
    move: function() {
 
        if ( this.nodes.length < 1 ) return;
 
        var dx, dy, ds, d, f, p, i, n, o = this.nodes[0];
 
        for ( i = 1, n = this.nodes.length; i < n; i++ ) {
 
            p = this.nodes[i];
 
            dx = o.x - p.x;
            dy = o.y - p.y;
            ds = dx * dx + dy * dy + 1e-10;
 
            d = sqrt( ds );
            f = ( d - p.length ) / d * p.stiffness;
 
            // velocity
 
            o.vx += dx * -f * o.force;
            o.vy += dy * -f * o.force;
 
            o.theta += random( -o.turn, o.turn );
            o.vx += cos( o.theta ) * o.wander;
            o.vy += sin( o.theta ) * o.wander;
 
            o.vx += random( -o.jitter, o.jitter );
            o.vy += random( -o.jitter, o.jitter );
 
            if ( d > 100 ) { // stops things getting out of control
 
                o.vx *= 0.1;
                o.vy *= 0.1;
                o.x -= dx * 0.25;
                o.y -= dy * 0.25;
                p.x += dx * 0.25;
                p.y += dy * 0.25;
 
            } else {
 
                o.x -= dx * o.snap;
                o.y -= dy * o.snap;
            }
 
            // integrate
 
            o.drag += ( o.dragMax - o.drag ) * o.dragEase;
 
            o.vx *= o.drag;
            o.vy *= o.drag;
 
            o.x += o.vx * o.speed;
            o.y += o.vy * o.speed;
 
            o.age++;
 
            if ( i == n - 1 ) {
 
                p.vx += dx * -f * p.force;
                p.vy += dy * -f * p.force;
 
                p.theta += random( -p.turn, p.turn );
                p.vx += cos( p.theta ) * p.wander;
                p.vy += sin( p.theta ) * p.wander;
 
                p.vx += random( -p.jitter, p.jitter );
                p.vy += random( -p.jitter, p.jitter );
 
                p.drag += ( p.dragMax - p.drag ) * p.dragEase;
 
                p.t = pow( sin( (i / n) * PI ), 2 ) || 0.1;
                p.t *= min( 1, max( 0.1, n / 40 ) ) || 0.1;
 
                p.vx *= p.drag;
                p.vy *= p.drag;
 
                p.x += p.vx * p.speed;
                p.y += p.vy * p.speed;
 
                p.age++;
            }
 
            if ( this.particles.length < 100 && random() < 0.1 ) {
                this.addParticle( o );
            }
 
            // perpendicular unit vector
 
            o.t = pow( sin( (i / n) * PI ), 2 ) || 0.1;
            o.t *= min( 1, max( 0.1, n / 40 ) ) || 0.1;
 
            // dx = o.x - p.x;
            // dy = o.y - p.y;
            // d = sqrt( dx * dx + dy * dy );
 
            // px = dy / d;
            // py = -dx / d;
 
            // o.ax = o.x + px * o.t;
            // o.ay = o.y + py * o.t;
 
            // o.bx = o.x - px * o.t;
            // o.by = o.y - py * o.t;
 
            // shift
 
            o = p;
        }
 
        for ( i = this.particles.length - 1; i >= 0; i-- ) {
 
            p = this.particles[i];
 
            p.t *= 0.95;
 
            p.vx += random( -1, 1 ) * 0.3;
            p.vy += random( -1, 1 ) * 0.3;
 
            p.vx *= 0.9;
            p.vy *= 0.9;
 
            p.x += p.vx;
            p.y += p.vy;
 
            if ( p.t < 0.1 ) this.particles.splice( i, 1 );
        }
    },
 
    simplify: function( points, dist ) {
 
        dist = pow( dist || 10, 2 );
 
        var dx, dy, point, prev = points[0], out = [ prev ];
 
        if ( points.length > 0 ) {
 
            for ( var i = 1, n = points.length - 1; i < n; i++ ) {
 
                point = points[i];
                dx = point.x - prev.x;
                dy = point.y - prev.y;
 
                if ( dx * dx + dy * dy >= dist )
 
                    out.push( prev = point );
            }
 
        }
 
        out.push( points[ points.length - 1 ] );
 
        return out;
    },
 
    drawCurve: function( ctx, thickness ) {
 
        var points = this.nodes;
 
        if ( points.length < 3 ) return;
 
        // Bezier
 
        // var cx, cy, ocx = points[0].x, ocy = points[0].y;
 
        // for ( var i = 1, n = points.length - 2; i < n; i++ ) {
 
        //     cx = ( points[i].x + points[i + 1].x ) / 2;
        //     cy = ( points[i].y + points[i + 1].y ) / 2;
 
        //     ctx.beginPath();
        //     ctx.moveTo( ocx, ocy );
        //     ctx.quadraticCurveTo( points[i].x, points[i].y, ocx = cx, ocy = cy );
        //     ctx.lineWidth = ( points[i].t || 1 ) * thickness;
        //     ctx.stroke();
        // }
 
        // ctx.beginPath();
        // ctx.moveTo( ocx, ocy );
        // ctx.quadraticCurveTo( points[i].x, points[i].y, points[i + 1].x, points[i + 1].y );
        // ctx.lineWidth = ( points[i].t || 1 ) * thickness;
        // ctx.stroke();
 
        // Catmull
 
        var p0, p1, p2, p3, i6 = 1.0 / 6.0, ox = points[0].x, oy = points[0].y;
 
        for ( var i = 3, n = points.length; i < n; i++ ) {
 
            p0 = points[i - 3];
            p1 = points[i - 2];
            p2 = points[i - 1];
            p3 = points[i];
 
            ctx.beginPath();
            ctx.moveTo( ox, oy );
            ctx.bezierCurveTo(
                p2.x * i6 + p1.x - p0.x * i6,
                p2.y * i6 + p1.y - p0.y * i6,
                p3.x * -i6 + p2.x + p1.x * i6,
                p3.y * -i6 + p2.y + p1.y * i6,
                ox = p2.x,
                oy = p2.y
            );
            ctx.lineWidth = ( points[i].t || 1 ) * thickness;
            ctx.stroke();
        }
    },
 
    drawPoints: function( ctx ) {
 
        ctx.beginPath();
 
        this.nodes.forEach(function(p,i) {
            ctx.moveTo( p.x + p.t, p.y );
            ctx.arc( p.x, p.y, p.t * 18, 0, TWO_PI );
        });
 
        this.particles.forEach(function(p,i) {
            ctx.moveTo( p.x + p.t, p.y );
            ctx.arc( p.x, p.y, p.t * 12, 0, TWO_PI );
        });
 
        ctx.fill();
    },
 
    draw: function( ctx ) {
 
        this.drawPoints( ctx );
        this.drawCurve( ctx, 4 );
    },
 
    reverse: function() {
 
        var times = [], n = this.points.length - 1;
        this.points.forEach(function( p ) { times.push( p.t ); });
        this.points.forEach(function( p, i ) { p.t = times[ n - i ]; });
        this.points.reverse();
    },
 
    reset: function() {
 
        if ( Math.random() < 0.5 ) {
            this.reverse();
        }
 
        this.nodes = [];
        this.particles = [];
        this.progress = 0;
        this.clock = 0;
        this.alive = true;
    }
};
function Shape( data ) {
 
    this.paths = [];
    this.alive = true;
    this.count = 0;
    this.color;
 
    data.groups.forEach( function( group ) {
        this.paths.push( new Path( group ) );
        this.count += group.length;
    }, this);
}
 
Shape.prototype = {
 
    step: function( dt ) {
 
        var alive = this.paths.length;
 
        this.paths.forEach( function( path ) {
 
            if ( !path.alive ) --alive;
            path.step( dt );
            path.move();
 
        }, this);
 
        if ( !alive ) this.alive = false;
    },
 
    draw: function( ctx ) {
 
        this.count = 0;
 
        if ( DARK ) ctx.globalAlpha = 0.5;
        ctx.fillStyle = this.color;
 
        this.paths.forEach( function( path ) {
            this.count += path.progress < 1 ? path.points.length : path.nodes.length;
            path.drawPoints( ctx );
        }, this);
 
        ctx.strokeStyle = DARK ? this.color : '#222';
        ctx.globalAlpha = 1;
 
        this.paths.forEach( function( path ) {
            path.drawCurve( ctx, 4 );
        }, this);
    },
 
    reset: function( color ) {
 
        this.color = color;
 
        this.paths.forEach( function( path ) {
            path.color = color;
            path.reset();
        });
 
        this.alive = true;
    }
};
var DARK = true;
var COLORS = [
    '#FF1B79',
    '#00B6AD',
    '#FAC51C',
    '#6CC1ED',
    '#C6F98B'
];
 
var playbackRate = 5.0;
var rotation = 0;
var active = [];
var words = [];
var index = 0;
var scale = 1;
var color;
 
Sketch.create({
  
    retina: 'auto',
 
    setup: function() {
 
        words.push(
            new Shape( data.hao ),
            new Shape( data.hola ),
            new Shape( data.hello ),
            new Shape( data.resonate ),
            new Shape( data.year ),
            new Shape( data.love )
        );
 
        if ( DARK ) this.globalCompositeOperation = 'lighter';
        this.lineJoin = 'round';
        this.lineCap = 'round';
 
        this.next();
    },
 
    next: function() {
 
        var c = random( COLORS );
        while ( c === color ) c = random( COLORS );
        color = c;
 
        words[ index ].reset( color );
        active.push( words[ index ] );
        index = (index + 1) % words.length;
    },
 
    draw: function() {
 
        var t = this.millis;
 
        rotation = map( sin( t * 0.0012 ), -1, 1, -PI, PI ) * 0.025;
        scale = map( cos( t * 0.00081 ), -1, 1, 0.95, 1.5 );
 
        this.save();
        this.translate( this.width / 2, this.height / 2 );
        this.rotate( rotation );
        this.scale( scale, scale );
 
        var secs = this.dt / 1000;
 
        for ( var word, i = active.length - 1; i >= 0; i-- ) {
 
            word = active[i];
            word.step( secs * playbackRate );
            word.draw( this );
 
            if ( !word.ignore && word.count < 60 ) {
                word.ignore = true;
                this.next();
            }
 
            if ( !word.alive ) {
                active.splice( i, 1 );
                word.ignore = false;
                // word.reset();
            }
        };
 
        this.restore();
 
        // Show colors
        // COLORS.forEach(function( c, i ) {
        //     this.beginPath();
        //     this.arc( 50 + i * 50, 50, 20, 0, TWO_PI );
        //     this.fillStyle = c;
        //     this.fill();
        // }, this);
    }
});
!
999px

Console