Skip to Main Content

SVG

Path

The path is SVG code inside a 'Static Content' region.
Region appearance has a fixed size CSS class. I.e. 'h500'.
Animations are done using the Anime.js library. 
<svg version="1.1" id="svg-path" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 1000 1000" xml:space="preserve" style="height:100%;">
    <style type="text/css">
        #Path {
            stroke: black;
        }

        .hidden #Path {
            stroke: none;
        }
    </style>
    <path id="Path" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
        d="M 106 323 C 91.417847 402.912598 151.086182 459.944092 173 468 C 194.913818 476.055908 352.88208 567.687866 512 574 C 671.11792 580.312134 777.994141 476.130859 816 424 C 854.005859 371.869141 917.75415 183.400391 883 149 C 848.24585 114.599609 735.12207 38.723022 603 177 C 470.87793 315.276978 412.630127 290.950073 387 288 C 361.369873 285.049927 286.885132 164.245117 197 210 C 107.114868 255.754883 120.582153 243.087402 106 323 Z" />
</svg>

Animation

The animation is done using Anime.js
let path = anime.path('#svg-path path');

anime({
    targets: '#P8_LOGO',
    translateX: path('x'),
    translateY: path('y'),
    easing: 'linear',
    duration: 5000,
    loop: true
});

SVG

Path

The path is SVG code inside a 'Static Content' region.
Region appearance has a fixed size CSS class. I.e. 'h500'.
Animations are done using the Anime.js library. 
<svg version="1.1" id="svg-pathmorph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 1000 1000" xml:space="preserve" style="height:100%;">
    <path id="Path" fill="blue"
        d="M 106 323 C 91.417847 402.912598 151.086182 459.944092 173 468 C 194.913818 476.055908 352.88208 567.687866 512 574 C 671.11792 580.312134 777.994141 476.130859 816 424 C 854.005859 371.869141 917.75415 183.400391 883 149 C 848.24585 114.599609 735.12207 38.723022 603 177 C 470.87793 315.276978 412.630127 290.950073 387 288 C 361.369873 285.049927 286.885132 164.245117 197 210 C 107.114868 255.754883 120.582153 243.087402 106 323 Z" />
</svg>

Animation

The animation is done using Anime.js
let path2 = "M 152 407 C 137.417847 486.912598 340.239014 485.373291 371 487 C 394.315094 488.232941 438.208832 515.286255 583 449 C 728.367065 382.450073 706.994141 395.130859 745 343 C 783.005859 290.869141 828.75415 231.400391 794 197 C 759.24585 162.599609 758.12207 121.723022 626 260 C 493.87793 398.276978 429.630127 345.950073 404 343 C 378.369873 340.049927 312.885132 225.245117 223 271 C 133.114868 316.754883 166.582153 327.087402 152 407 Z";

const timeline = anime.timeline({
    duration: 500,
    easing: "easeOutQuad",
    loop: true,
    direction: 'alternate'
});

timeline.add({
    targets: "#svg-path path",
    d: [
        { value: path2}
    ]
});

SVG

Path

The path is SVG code inside a 'Static Content' region.
Region appearance has a fixed size CSS class. I.e. 'h500'.
Animations are done using the Anime.js library. 
<svg version="1.1" id="svg-text" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 200 1000 500" xml:space="preserve" style="height:100%;">
    <path id="Party" fill="none" fill-rule="evenodd" stroke="red" stroke-width="3" stroke-dasharray="1000"
        stroke-dashoffset="0"
        d="M 815.789063 298.390625 L 799.476563 433.390625 C 796.945313 454.765747 794.8125 469.343719 793.078125 477.125 C 791.34375 484.906281 788.460938 491.328094 784.429688 496.390625 C 780.398438 501.453156 774.796936 505.179688 767.625 507.570313 C 760.453064 509.960938 748.992249 511.15625 733.242188 511.15625 L 698.789063 511.15625 L 698.789063 481.34375 C 707.601624 481.34375 713.273438 480.898438 715.804688 480.007813 C 718.335938 479.117188 719.601563 477.125031 719.601563 474.03125 C 719.601563 472.53125 718.429688 466.015686 716.085938 454.484375 L 685.007813 298.390625 L 736.617188 298.390625 L 755.179688 424.25 L 764.179688 298.390625 Z M 663.210938 273.5 L 663.210938 302.890625 L 678.539063 302.890625 L 678.539063 332.421875 L 663.210938 332.421875 L 663.210938 432.265625 C 663.210938 444.546936 663.84375 451.390625 665.109375 452.796875 C 666.375 454.203125 671.648376 454.90625 680.929688 454.90625 L 680.929688 485 L 658.007813 485 C 645.070251 485 635.835938 484.460938 630.304688 483.382813 C 624.773438 482.304688 619.898438 479.820343 615.679688 475.929688 C 611.460938 472.039032 608.835938 467.585968 607.804688 462.570313 C 606.773438 457.554657 606.257813 445.765717 606.257813 427.203125 L 606.257813 332.421875 L 594.023438 332.421875 L 594.023438 302.890625 L 606.257813 302.890625 L 606.257813 273.5 Z M 551.835938 298.390625 L 549.585938 322.859375 C 557.835999 305.328033 569.789001 296.046875 585.445313 295.015625 L 585.445313 360.6875 C 575.039001 360.6875 567.398438 362.09375 562.523438 364.90625 C 557.648438 367.71875 554.648438 371.632782 553.523438 376.648438 C 552.398438 381.664093 551.835938 393.218658 551.835938 411.3125 L 551.835938 485 L 495.023438 485 L 495.023438 298.390625 Z M 400.664063 370.671875 L 347.367188 370.671875 L 347.367188 358.15625 C 347.367188 343.718689 349.031219 332.585968 352.359375 324.757813 C 355.687531 316.929657 362.367126 310.015656 372.398438 304.015625 C 382.429749 298.015594 395.460846 295.015625 411.492188 295.015625 C 430.711029 295.015625 445.195251 298.414032 454.945313 305.210938 C 464.695374 312.007843 470.554688 320.351501 472.523438 330.242188 C 474.492188 340.132874 475.476563 360.499847 475.476563 391.34375 L 475.476563 485 L 420.210938 485 L 420.210938 468.40625 C 416.742157 475.062531 412.265656 480.054657 406.78125 483.382813 C 401.296844 486.710968 394.757843 488.375 387.164063 488.375 C 377.226501 488.375 368.109406 485.585968 359.8125 480.007813 C 351.515594 474.429657 347.367188 462.218842 347.367188 443.375 L 347.367188 428.046875 C 347.367188 414.078064 349.570282 404.562531 353.976563 399.5 C 358.382843 394.437469 369.304596 388.531281 386.742188 381.78125 C 405.398529 374.468719 415.382813 369.546875 416.695313 367.015625 C 418.007813 364.484375 418.664063 359.328156 418.664063 351.546875 C 418.664063 341.796814 417.9375 335.445313 416.484375 332.492188 C 415.03125 329.539063 412.617218 328.0625 409.242188 328.0625 C 405.398407 328.0625 403.007813 329.304688 402.070313 331.789063 C 401.132813 334.273438 400.664063 340.718689 400.664063 351.125 Z M 418.664063 396.265625 C 409.570282 402.921906 404.296875 408.499969 402.84375 413 C 401.390625 417.500031 400.664063 423.968719 400.664063 432.40625 C 400.664063 442.062561 401.296875 448.296875 402.5625 451.109375 C 403.828125 453.921875 406.335907 455.328125 410.085938 455.328125 C 413.648468 455.328125 415.96875 454.226563 417.046875 452.023438 C 418.125 449.820313 418.664063 444.031311 418.664063 434.65625 Z M 207.023438 257.328125 L 266.648438 257.328125 C 282.773529 257.328125 295.171844 258.59375 303.84375 261.125 C 312.515656 263.65625 319.031219 267.312469 323.390625 272.09375 C 327.750031 276.875031 330.703125 282.664032 332.25 289.460938 C 333.796875 296.257843 334.570313 306.781189 334.570313 321.03125 L 334.570313 340.859375 C 334.570313 355.390686 333.070313 365.984344 330.070313 372.640625 C 327.070313 379.296906 321.562531 384.406219 313.546875 387.96875 C 305.531219 391.531281 295.054749 393.3125 282.117188 393.3125 L 266.226563 393.3125 L 266.226563 485 L 207.023438 485 Z M 266.226563 296.28125 L 266.226563 354.21875 C 267.914063 354.3125 269.367188 354.359375 270.585938 354.359375 C 276.023468 354.359375 279.796875 353.023438 281.90625 350.351563 C 284.015625 347.679688 285.070313 342.125031 285.070313 333.6875 L 285.070313 314.984375 C 285.070313 307.203094 283.851563 302.140625 281.414063 299.796875 C 278.976563 297.453125 273.914124 296.28125 266.226563 296.28125 Z" />
</svg>

Animation

The animation is done using Anime.js
anime({
    targets: '#svg-text path',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutQuad',
    duration: 5000,
    direction: 'alternate',
    loop: true
});
Release 1.0