Keyvisual
Die liquide Form ist das wiederkehrende Gestaltungselement der Marke TeamBank. Auf Portalen oder der Website wird Sie prägnant aber unaufdringlich – als Schmuck oder Hintergrundelement, eingesetzt.
Type A
23/02/2021
<div class="module--keyvisual">
<div class="keyvisual-wrap type-a">
<svg class="keyvisual type-a">
</svg>
</div>
</div>import Snap from 'snapsvg';
import jQuery from 'jquery';
/* eslint-disable */
(function ($) {
function init() {
// document.querySelector('module--keyvisual').forEach(module=>{
console.log(Snap);
// })
$('.keyvisual:not(.initiated)').each(function (index, element) {
if ($(this).is('.type-a')) {
(function (svgelement) {
var s = Snap(svgelement);
s.attr({ viewBox: "0 0 318 300" });
var path = s.path("M18.81639,271.31424c22.043,19.67177,56.557,18.80656,77.64052-1.87274a56.02409,56.02409,0,0,0,10.62495-14.39238c9.97314-19.39391,29.57528-31.95421,51.53168-31.58372.56065.01131,1.12358.01582,1.68422.01582A96.91079,96.91079,0,0,0,236.52527,186.661c8.12938-10.28091,20.33829-16.2606,33.38586-18.09044a41.8781,41.8781,0,0,0,27.91156-16.62431,41.21542,41.21542,0,0,0-.05927-48.97385,41.89273,41.89273,0,0,0-27.825-16.52943,52.66958,52.66958,0,0,1-33.97841-18.80655,96.9273,96.9273,0,0,0-77.48555-36.09277c-51.50205.9375-93.83092,42.72081-94.97956,93.76846q-.041,1.8976-.01139,3.77713a54.26579,54.26579,0,0,1-31.21392,49.75321,56.44613,56.44613,0,0,0-15.689,10.9993,55.79692,55.79692,0,0,0,2.23575,81.47247");
path.attr({ fill: "l(0, 0, 1, 1)#00B4E6-#00035C" });
var anim1 = function () {
path.animate({ d: "M18.81639,271.31424c22.043,19.67177,56.557,18.80656,77.64052-1.87274a56.02409,56.02409,0,0,0,10.62495-14.39238c9.97314-19.39391,29.57528-31.95421,51.53168-31.58372.56065.01131,1.12365.02476,1.68422.01582,36.03557-.57469,63.04269-11.82944,80.76005-34.24369,8.12938-10.28091,8.77552-11.48725,20.27552-12.15392,12.66667-.83333,29.3919-5.26833,39.05857-13.26833,14.96489-13.00006,20.63651-31.89854,12.0338-51.39848-8.89735-20.99981-31.83418-25.08615-41.759-27.66653-9.508-3.18095-12.97165-17.16668-19.63832-27.33335-10.66667-17.33333-31.0703-41.90169-86.5-44-62.237-.00941-101.35136,46.95235-102.5,98-.02735,1.26507,1.4347,16.41855,1.45521,17.67232a54.26579,54.26579,0,0,1-31.21392,49.75321,56.44613,56.44613,0,0,0-15.689,10.9993,55.79692,55.79692,0,0,0,2.23575,81.47247" }, 4000, mina.easeinout, anim2);
};
var anim2 = function () {
path.animate({ d: "M18.81639,271.31424c22.043,19.67177,56.557,18.80656,77.64052-1.87274a56.02409,56.02409,0,0,0,10.62495-14.39238c9.97314-19.39391,29.57528-31.95421,51.53168-31.58372.56065.01131,1.12365.02476,1.68422.01582,36.03557-.57469,63.04269-11.82944,80.76005-34.24369,8.12938-10.28091,8.77552-11.48725,20.27552-12.15392,12.66667-.83333,24.39159-4.26826,34.05825-12.26826,14.96489-13.00006,18.10841-32.73174,12.29536-51.35493-5.85349-18.37687-27.09543-26.12976-37.02028-28.71014-9.508-3.18095-11.66667-5.83333-18.33333-16C241.66667,51.41695,221,22.08361,165.5703,19.98531c-62.237-.00941-100.9267,49.11333-102.07534,100.161-.02735,1.26507-.03191,7.68919-.01139,8.943a54.26579,54.26579,0,0,1-31.21392,49.75321,56.44613,56.44613,0,0,0-15.689,10.9993,55.79692,55.79692,0,0,0,2.23575,81.47247" }, 4000, mina.easeinout, anim3);
};
var anim3 = function () {
path.animate({ d: "M18.81639,271.31424c22.043,19.67177,56.557,18.80656,77.64052-1.87274a56.02409,56.02409,0,0,0,10.62495-14.39238c9.97314-19.39391,29.57528-31.95421,51.53168-31.58372.56065.01131,1.12358.01582,1.68422.01582A96.91079,96.91079,0,0,0,236.52527,186.661c8.12938-10.28091,20.33829-16.2606,33.38586-18.09044a41.8781,41.8781,0,0,0,27.91156-16.62431,41.21542,41.21542,0,0,0-.05927-48.97385,41.89273,41.89273,0,0,0-27.825-16.52943,52.66958,52.66958,0,0,1-33.97841-18.80655,96.9273,96.9273,0,0,0-77.48555-36.09277c-51.50205.9375-93.83092,42.72081-94.97956,93.76846q-.041,1.8976-.01139,3.77713a54.26579,54.26579,0,0,1-31.21392,49.75321,56.44613,56.44613,0,0,0-15.689,10.9993,55.79692,55.79692,0,0,0,2.23575,81.47247" }, 8000, mina.easeinout, anim1);
};
anim1();
})(this);
} else if ($(this).is('.type-b')) {
(function (svgelement) {
var s = Snap(svgelement);
// var s = Snap(1365, 1038, $('.keyvisual .inner')[0]);
s.attr({ viewBox: "0 0 1365 1092" });
var path = s.path("M178.94356,614.96522c83.07032,73.11326,156.75609,84.87586,258.08949,109.37622C556.49016,753.22388,741.57231,836.07,859.49517,988.3122c150.99569,167.96125,416.3563,16.19024,360.58469-196.8036-15.03643-57.45262-77.54923-190.43055-89.76543-249.64-14.25715-69.086,47.02457-182.09636,29.708-278.72136C1142.469,149.5006,1018.90765,87.557,929.935,96.50482c-80.33342,3.06374-141.048,74.65753-187.27849,41.23112-32.95826-23.83127-62.18012-50.0879-100.3122-67.50351-50.83208-23.216-108.56243-48.12908-185.36544-50.13307C355.45819,16.254,278.00759,47.82211,233.10963,74.5591,48.696,184.38687,14.51541,470.24279,178.94356,614.96522Z");
path.attr({ fill: "l(0, 0, 1, 1)#00B4E6-#00035C" });
var anim1 = function () {
path.animate({ d: "M104.83259,680.9911c83.07032,73.11326,141.47809,94.67092,242.81149,119.17128,119.45711,28.88244,224.9358-11.91713,500.5194,123.64021,193.65334,86.39918,305.37642-98.31631,260.68719-210.03939-15.03643-57.45262-72.69334-132.95422-84.90954-192.1637-14.25715-69.086,61.57138-142.01267,52.63353-223.94293-13.40677-87.88882-93.25966-155.92551-182.23231-146.97769-80.33342,3.06374-125.07824,45.34354-171.30872,11.91713-32.95826-23.83127-84.01883-66.50072-122.1509-83.91633-50.83208-23.216-119.82928-49.637-196.63228-51.641C302.72975,23.19333,206.33692,59.88733,161.439,86.62431-22.97463,196.45208-59.59556,536.26866,104.83259,680.9911Z" }, 10000, mina.easeinout, anim2);
};
var anim2 = function () {
path.animate({ d: "M271.45433,627.472c83.07032,73.11326,100.54415,72.36911,201.87756,96.86947C592.789,753.22388,687.50477,748.21608,805.42763,900.45832c150.99569,167.96125,426.25309,34.50276,370.48148-178.49108-15.03643-57.45262-49.677-105.54324-61.89318-164.75272-14.25715-69.086,18.64875-106.172,1.33222-202.797-14.43529-118.426-134.42929-173.92323-204.92577-170.92338-80.33342,3.06374-93.26254,18.42716-139.493-14.99925-32.95826-23.83127-57.86313-50.081-95.9952-67.49663-50.83208-23.216-71.68957-30.99437-148.49258-32.99835C428,67.99994,367,102.89,317.952,135.49657,175.45913,229.99184,127.46153,486.479,271.45433,627.472Z" }, 10000, mina.easeinout, anim3);
};
var anim3 = function () {
path.animate({ d: "M178.94356,614.96522c83.07032,73.11326,156.75609,84.87586,258.08949,109.37622C556.49016,753.22388,741.57231,836.07,859.49517,988.3122c150.99569,167.96125,416.3563,16.19024,360.58469-196.8036-15.03643-57.45262-77.54923-190.43055-89.76543-249.64-14.25715-69.086,47.02457-182.09636,29.708-278.72136C1142.469,149.5006,1018.90765,87.557,929.935,96.50482c-80.33342,3.06374-141.048,74.65753-187.27849,41.23112-32.95826-23.83127-62.18012-50.0879-100.3122-67.50351-50.83208-23.216-108.56243-48.12908-185.36544-50.13307C355.45819,16.254,278.00759,47.82211,233.10963,74.5591,48.696,184.38687,14.51541,470.24279,178.94356,614.96522Z" }, 20000, mina.easeinout, anim1);
};
anim1();
})(this);
} else if ($(this).is('.type-c')) {
(function (svgelement) {
var s = Snap(svgelement);
s.attr({ viewBox: "0 0 1900 1450" });
var path = s.path("M777.16357,354.359c19.49634,83.44141,46.27466,125.96631,126.67261,129.26874,49.52905,2.0376,111.187-39.35791,178.07129-98.13049,162.0481-142.39911,429.551-100.0361,552.655,70.66779,66.98389,92.883,87.96387,216.29,55.69385,326.14066-52.22485,177.78748-179.02979,167.167-286.136,277.1994-55.625,57.148-41.2959,148.28394-100.78979,201.57129-101.926,91.28467-185.625,12.02734-272.99365-26.11536-105.92407-46.24011-151.66016,62.96667-263.94409,78.45813-117.83472,16.26428-228.48975-55.72778-286.66528-153.155-50.38135-84.376-49.53271-186.81946-87.293-275.73309-51.333-120.87744-128.84033-158.06885-220.293-242.44824C94.51611,570.464,57.46924,473.27474,57.4624,376.49165c-.00635-133.83249,70.81982-266.90948,203.13232-330.67853C522.58276-80.4629,721.36694,115.5631,777.16357,354.359Z");
path.attr({ fill: "l(0, 0, 1, 1)#00035C-#00B4E6" });
var anim1 = function () {
path.animate({ d: "M865.85352,292.12773c19.49646,83.44141-6,154.722,58,154.722,49.52905,2.0376,120.75159-149.94937,187.63586-208.722,192.36414-172,409.06421-106.7039,532.16821,64,66.984,92.883,78.19592,261.99994,28.19592,381.99994-53.5592,124.543-72.33447,133.326-196,208-73.88855,49.326,4.8866,166.05505-55.1134,236-58.8866,74-143.51794,18.1427-230.8866-20-105.92383-46.24011-173.80408,198.86523-364,196.54761-117.83459,16.26428-242.03015-55.354-294.23145-143.354-90.0787-122-30.0079-248.28-67.76852-337.1936-51.33313-120.87744-72.54724-89.79181-164-174.1712-77.62575-71.61877-129.99342-173.334-130-270.11707-.00659-133.8325,47.68762-259.40277,180-323.17184C577.85352-49.33246,810.05688,53.33179,865.85352,292.12773Z" }, 10000, mina.easeinout, anim2);
};
var anim2 = function () {
path.animate({ d: "M718.86438,332.88966C738.36084,416.33107,755.60217,446.39876,836,449.70119c49.52905,2.0376,126-66,193.63586-145.89C1216,97.70117,1508-25.18882,1772,277.70119c151.02905,194.63217,107.02905,358.74216,31.02905,490.63217-112,194.11-330.10046,129.66809-437.20654,239.70044-55.625,57.14795-41.2959,158.28455-100.78992,211.5719C1163.10657,1310.89037,1086,1187.86913,970,1257.58971c-114,76.27942-132,101.55164-256,100.11145-184-20.16638-232.96347-100.11145-293.6767-200.0564-52.07877-106,11.88541-234.94366-26.18423-324.585C342.806,712.18236,205.2953,714.99345,113.84261,630.61406,36.21687,558.99529.00661,490.48427,0,393.70119-.00661,259.86873,59.98237,148.11658,192.29477,84.34749,454.283-41.92849,663.06769,94.09373,718.86438,332.88966Z" }, 10000, mina.easeinout, anim3);
};
var anim3 = function () {
path.animate({ d: "M777.16357,354.359c19.49634,83.44141,46.27466,125.96631,126.67261,129.26874,49.52905,2.0376,111.187-39.35791,178.07129-98.13049,162.0481-142.39911,429.551-100.0361,552.655,70.66779,66.98389,92.883,87.96387,216.29,55.69385,326.14066-52.22485,177.78748-179.02979,167.167-286.136,277.1994-55.625,57.148-41.2959,148.28394-100.78979,201.57129-101.926,91.28467-185.625,12.02734-272.99365-26.11536-105.92407-46.24011-151.66016,62.96667-263.94409,78.45813-117.83472,16.26428-228.48975-55.72778-286.66528-153.155-50.38135-84.376-49.53271-186.81946-87.293-275.73309-51.333-120.87744-128.84033-158.06885-220.293-242.44824C94.51611,570.464,57.46924,473.27474,57.4624,376.49165c-.00635-133.83249,70.81982-266.90948,203.13232-330.67853C522.58276-80.4629,721.36694,115.5631,777.16357,354.359Z" }, 20000, mina.easeinout, anim1);
};
anim1();
})(this);
}
$(element).addClass('initiated');
});
}
// ——————————————————————————————————————————————————
$(document).ready(init);
$(document).on('module:init', init);
})(jQuery);
Type B
23/02/2021
<div class="module--keyvisual">
<div class="keyvisual-wrap type-b">
<svg class="keyvisual type-b">
</svg>
</div>
</div>import Snap from 'snapsvg';
import jQuery from 'jquery';
/* eslint-disable */
(function ($) {
function init() {
// document.querySelector('module--keyvisual').forEach(module=>{
console.log(Snap);
// })
$('.keyvisual:not(.initiated)').each(function (index, element) {
if ($(this).is('.type-a')) {
(function (svgelement) {
var s = Snap(svgelement);
s.attr({ viewBox: "0 0 318 300" });
var path = s.path("M18.81639,271.31424c22.043,19.67177,56.557,18.80656,77.64052-1.87274a56.02409,56.02409,0,0,0,10.62495-14.39238c9.97314-19.39391,29.57528-31.95421,51.53168-31.58372.56065.01131,1.12358.01582,1.68422.01582A96.91079,96.91079,0,0,0,236.52527,186.661c8.12938-10.28091,20.33829-16.2606,33.38586-18.09044a41.8781,41.8781,0,0,0,27.91156-16.62431,41.21542,41.21542,0,0,0-.05927-48.97385,41.89273,41.89273,0,0,0-27.825-16.52943,52.66958,52.66958,0,0,1-33.97841-18.80655,96.9273,96.9273,0,0,0-77.48555-36.09277c-51.50205.9375-93.83092,42.72081-94.97956,93.76846q-.041,1.8976-.01139,3.77713a54.26579,54.26579,0,0,1-31.21392,49.75321,56.44613,56.44613,0,0,0-15.689,10.9993,55.79692,55.79692,0,0,0,2.23575,81.47247");
path.attr({ fill: "l(0, 0, 1, 1)#00B4E6-#00035C" });
var anim1 = function () {
path.animate({ d: "M18.81639,271.31424c22.043,19.67177,56.557,18.80656,77.64052-1.87274a56.02409,56.02409,0,0,0,10.62495-14.39238c9.97314-19.39391,29.57528-31.95421,51.53168-31.58372.56065.01131,1.12365.02476,1.68422.01582,36.03557-.57469,63.04269-11.82944,80.76005-34.24369,8.12938-10.28091,8.77552-11.48725,20.27552-12.15392,12.66667-.83333,29.3919-5.26833,39.05857-13.26833,14.96489-13.00006,20.63651-31.89854,12.0338-51.39848-8.89735-20.99981-31.83418-25.08615-41.759-27.66653-9.508-3.18095-12.97165-17.16668-19.63832-27.33335-10.66667-17.33333-31.0703-41.90169-86.5-44-62.237-.00941-101.35136,46.95235-102.5,98-.02735,1.26507,1.4347,16.41855,1.45521,17.67232a54.26579,54.26579,0,0,1-31.21392,49.75321,56.44613,56.44613,0,0,0-15.689,10.9993,55.79692,55.79692,0,0,0,2.23575,81.47247" }, 4000, mina.easeinout, anim2);
};
var anim2 = function () {
path.animate({ d: "M18.81639,271.31424c22.043,19.67177,56.557,18.80656,77.64052-1.87274a56.02409,56.02409,0,0,0,10.62495-14.39238c9.97314-19.39391,29.57528-31.95421,51.53168-31.58372.56065.01131,1.12365.02476,1.68422.01582,36.03557-.57469,63.04269-11.82944,80.76005-34.24369,8.12938-10.28091,8.77552-11.48725,20.27552-12.15392,12.66667-.83333,24.39159-4.26826,34.05825-12.26826,14.96489-13.00006,18.10841-32.73174,12.29536-51.35493-5.85349-18.37687-27.09543-26.12976-37.02028-28.71014-9.508-3.18095-11.66667-5.83333-18.33333-16C241.66667,51.41695,221,22.08361,165.5703,19.98531c-62.237-.00941-100.9267,49.11333-102.07534,100.161-.02735,1.26507-.03191,7.68919-.01139,8.943a54.26579,54.26579,0,0,1-31.21392,49.75321,56.44613,56.44613,0,0,0-15.689,10.9993,55.79692,55.79692,0,0,0,2.23575,81.47247" }, 4000, mina.easeinout, anim3);
};
var anim3 = function () {
path.animate({ d: "M18.81639,271.31424c22.043,19.67177,56.557,18.80656,77.64052-1.87274a56.02409,56.02409,0,0,0,10.62495-14.39238c9.97314-19.39391,29.57528-31.95421,51.53168-31.58372.56065.01131,1.12358.01582,1.68422.01582A96.91079,96.91079,0,0,0,236.52527,186.661c8.12938-10.28091,20.33829-16.2606,33.38586-18.09044a41.8781,41.8781,0,0,0,27.91156-16.62431,41.21542,41.21542,0,0,0-.05927-48.97385,41.89273,41.89273,0,0,0-27.825-16.52943,52.66958,52.66958,0,0,1-33.97841-18.80655,96.9273,96.9273,0,0,0-77.48555-36.09277c-51.50205.9375-93.83092,42.72081-94.97956,93.76846q-.041,1.8976-.01139,3.77713a54.26579,54.26579,0,0,1-31.21392,49.75321,56.44613,56.44613,0,0,0-15.689,10.9993,55.79692,55.79692,0,0,0,2.23575,81.47247" }, 8000, mina.easeinout, anim1);
};
anim1();
})(this);
} else if ($(this).is('.type-b')) {
(function (svgelement) {
var s = Snap(svgelement);
// var s = Snap(1365, 1038, $('.keyvisual .inner')[0]);
s.attr({ viewBox: "0 0 1365 1092" });
var path = s.path("M178.94356,614.96522c83.07032,73.11326,156.75609,84.87586,258.08949,109.37622C556.49016,753.22388,741.57231,836.07,859.49517,988.3122c150.99569,167.96125,416.3563,16.19024,360.58469-196.8036-15.03643-57.45262-77.54923-190.43055-89.76543-249.64-14.25715-69.086,47.02457-182.09636,29.708-278.72136C1142.469,149.5006,1018.90765,87.557,929.935,96.50482c-80.33342,3.06374-141.048,74.65753-187.27849,41.23112-32.95826-23.83127-62.18012-50.0879-100.3122-67.50351-50.83208-23.216-108.56243-48.12908-185.36544-50.13307C355.45819,16.254,278.00759,47.82211,233.10963,74.5591,48.696,184.38687,14.51541,470.24279,178.94356,614.96522Z");
path.attr({ fill: "l(0, 0, 1, 1)#00B4E6-#00035C" });
var anim1 = function () {
path.animate({ d: "M104.83259,680.9911c83.07032,73.11326,141.47809,94.67092,242.81149,119.17128,119.45711,28.88244,224.9358-11.91713,500.5194,123.64021,193.65334,86.39918,305.37642-98.31631,260.68719-210.03939-15.03643-57.45262-72.69334-132.95422-84.90954-192.1637-14.25715-69.086,61.57138-142.01267,52.63353-223.94293-13.40677-87.88882-93.25966-155.92551-182.23231-146.97769-80.33342,3.06374-125.07824,45.34354-171.30872,11.91713-32.95826-23.83127-84.01883-66.50072-122.1509-83.91633-50.83208-23.216-119.82928-49.637-196.63228-51.641C302.72975,23.19333,206.33692,59.88733,161.439,86.62431-22.97463,196.45208-59.59556,536.26866,104.83259,680.9911Z" }, 10000, mina.easeinout, anim2);
};
var anim2 = function () {
path.animate({ d: "M271.45433,627.472c83.07032,73.11326,100.54415,72.36911,201.87756,96.86947C592.789,753.22388,687.50477,748.21608,805.42763,900.45832c150.99569,167.96125,426.25309,34.50276,370.48148-178.49108-15.03643-57.45262-49.677-105.54324-61.89318-164.75272-14.25715-69.086,18.64875-106.172,1.33222-202.797-14.43529-118.426-134.42929-173.92323-204.92577-170.92338-80.33342,3.06374-93.26254,18.42716-139.493-14.99925-32.95826-23.83127-57.86313-50.081-95.9952-67.49663-50.83208-23.216-71.68957-30.99437-148.49258-32.99835C428,67.99994,367,102.89,317.952,135.49657,175.45913,229.99184,127.46153,486.479,271.45433,627.472Z" }, 10000, mina.easeinout, anim3);
};
var anim3 = function () {
path.animate({ d: "M178.94356,614.96522c83.07032,73.11326,156.75609,84.87586,258.08949,109.37622C556.49016,753.22388,741.57231,836.07,859.49517,988.3122c150.99569,167.96125,416.3563,16.19024,360.58469-196.8036-15.03643-57.45262-77.54923-190.43055-89.76543-249.64-14.25715-69.086,47.02457-182.09636,29.708-278.72136C1142.469,149.5006,1018.90765,87.557,929.935,96.50482c-80.33342,3.06374-141.048,74.65753-187.27849,41.23112-32.95826-23.83127-62.18012-50.0879-100.3122-67.50351-50.83208-23.216-108.56243-48.12908-185.36544-50.13307C355.45819,16.254,278.00759,47.82211,233.10963,74.5591,48.696,184.38687,14.51541,470.24279,178.94356,614.96522Z" }, 20000, mina.easeinout, anim1);
};
anim1();
})(this);
} else if ($(this).is('.type-c')) {
(function (svgelement) {
var s = Snap(svgelement);
s.attr({ viewBox: "0 0 1900 1450" });
var path = s.path("M777.16357,354.359c19.49634,83.44141,46.27466,125.96631,126.67261,129.26874,49.52905,2.0376,111.187-39.35791,178.07129-98.13049,162.0481-142.39911,429.551-100.0361,552.655,70.66779,66.98389,92.883,87.96387,216.29,55.69385,326.14066-52.22485,177.78748-179.02979,167.167-286.136,277.1994-55.625,57.148-41.2959,148.28394-100.78979,201.57129-101.926,91.28467-185.625,12.02734-272.99365-26.11536-105.92407-46.24011-151.66016,62.96667-263.94409,78.45813-117.83472,16.26428-228.48975-55.72778-286.66528-153.155-50.38135-84.376-49.53271-186.81946-87.293-275.73309-51.333-120.87744-128.84033-158.06885-220.293-242.44824C94.51611,570.464,57.46924,473.27474,57.4624,376.49165c-.00635-133.83249,70.81982-266.90948,203.13232-330.67853C522.58276-80.4629,721.36694,115.5631,777.16357,354.359Z");
path.attr({ fill: "l(0, 0, 1, 1)#00035C-#00B4E6" });
var anim1 = function () {
path.animate({ d: "M865.85352,292.12773c19.49646,83.44141-6,154.722,58,154.722,49.52905,2.0376,120.75159-149.94937,187.63586-208.722,192.36414-172,409.06421-106.7039,532.16821,64,66.984,92.883,78.19592,261.99994,28.19592,381.99994-53.5592,124.543-72.33447,133.326-196,208-73.88855,49.326,4.8866,166.05505-55.1134,236-58.8866,74-143.51794,18.1427-230.8866-20-105.92383-46.24011-173.80408,198.86523-364,196.54761-117.83459,16.26428-242.03015-55.354-294.23145-143.354-90.0787-122-30.0079-248.28-67.76852-337.1936-51.33313-120.87744-72.54724-89.79181-164-174.1712-77.62575-71.61877-129.99342-173.334-130-270.11707-.00659-133.8325,47.68762-259.40277,180-323.17184C577.85352-49.33246,810.05688,53.33179,865.85352,292.12773Z" }, 10000, mina.easeinout, anim2);
};
var anim2 = function () {
path.animate({ d: "M718.86438,332.88966C738.36084,416.33107,755.60217,446.39876,836,449.70119c49.52905,2.0376,126-66,193.63586-145.89C1216,97.70117,1508-25.18882,1772,277.70119c151.02905,194.63217,107.02905,358.74216,31.02905,490.63217-112,194.11-330.10046,129.66809-437.20654,239.70044-55.625,57.14795-41.2959,158.28455-100.78992,211.5719C1163.10657,1310.89037,1086,1187.86913,970,1257.58971c-114,76.27942-132,101.55164-256,100.11145-184-20.16638-232.96347-100.11145-293.6767-200.0564-52.07877-106,11.88541-234.94366-26.18423-324.585C342.806,712.18236,205.2953,714.99345,113.84261,630.61406,36.21687,558.99529.00661,490.48427,0,393.70119-.00661,259.86873,59.98237,148.11658,192.29477,84.34749,454.283-41.92849,663.06769,94.09373,718.86438,332.88966Z" }, 10000, mina.easeinout, anim3);
};
var anim3 = function () {
path.animate({ d: "M777.16357,354.359c19.49634,83.44141,46.27466,125.96631,126.67261,129.26874,49.52905,2.0376,111.187-39.35791,178.07129-98.13049,162.0481-142.39911,429.551-100.0361,552.655,70.66779,66.98389,92.883,87.96387,216.29,55.69385,326.14066-52.22485,177.78748-179.02979,167.167-286.136,277.1994-55.625,57.148-41.2959,148.28394-100.78979,201.57129-101.926,91.28467-185.625,12.02734-272.99365-26.11536-105.92407-46.24011-151.66016,62.96667-263.94409,78.45813-117.83472,16.26428-228.48975-55.72778-286.66528-153.155-50.38135-84.376-49.53271-186.81946-87.293-275.73309-51.333-120.87744-128.84033-158.06885-220.293-242.44824C94.51611,570.464,57.46924,473.27474,57.4624,376.49165c-.00635-133.83249,70.81982-266.90948,203.13232-330.67853C522.58276-80.4629,721.36694,115.5631,777.16357,354.359Z" }, 20000, mina.easeinout, anim1);
};
anim1();
})(this);
}
$(element).addClass('initiated');
});
}
// ——————————————————————————————————————————————————
$(document).ready(init);
$(document).on('module:init', init);
})(jQuery);
Type C
23/02/2021
<div class="module--keyvisual">
<div class="keyvisual-wrap type-c">
<svg class="keyvisual type-c">
</svg>
</div>
</div>import Snap from 'snapsvg';
import jQuery from 'jquery';
/* eslint-disable */
(function ($) {
function init() {
// document.querySelector('module--keyvisual').forEach(module=>{
console.log(Snap);
// })
$('.keyvisual:not(.initiated)').each(function (index, element) {
if ($(this).is('.type-a')) {
(function (svgelement) {
var s = Snap(svgelement);
s.attr({ viewBox: "0 0 318 300" });
var path = s.path("M18.81639,271.31424c22.043,19.67177,56.557,18.80656,77.64052-1.87274a56.02409,56.02409,0,0,0,10.62495-14.39238c9.97314-19.39391,29.57528-31.95421,51.53168-31.58372.56065.01131,1.12358.01582,1.68422.01582A96.91079,96.91079,0,0,0,236.52527,186.661c8.12938-10.28091,20.33829-16.2606,33.38586-18.09044a41.8781,41.8781,0,0,0,27.91156-16.62431,41.21542,41.21542,0,0,0-.05927-48.97385,41.89273,41.89273,0,0,0-27.825-16.52943,52.66958,52.66958,0,0,1-33.97841-18.80655,96.9273,96.9273,0,0,0-77.48555-36.09277c-51.50205.9375-93.83092,42.72081-94.97956,93.76846q-.041,1.8976-.01139,3.77713a54.26579,54.26579,0,0,1-31.21392,49.75321,56.44613,56.44613,0,0,0-15.689,10.9993,55.79692,55.79692,0,0,0,2.23575,81.47247");
path.attr({ fill: "l(0, 0, 1, 1)#00B4E6-#00035C" });
var anim1 = function () {
path.animate({ d: "M18.81639,271.31424c22.043,19.67177,56.557,18.80656,77.64052-1.87274a56.02409,56.02409,0,0,0,10.62495-14.39238c9.97314-19.39391,29.57528-31.95421,51.53168-31.58372.56065.01131,1.12365.02476,1.68422.01582,36.03557-.57469,63.04269-11.82944,80.76005-34.24369,8.12938-10.28091,8.77552-11.48725,20.27552-12.15392,12.66667-.83333,29.3919-5.26833,39.05857-13.26833,14.96489-13.00006,20.63651-31.89854,12.0338-51.39848-8.89735-20.99981-31.83418-25.08615-41.759-27.66653-9.508-3.18095-12.97165-17.16668-19.63832-27.33335-10.66667-17.33333-31.0703-41.90169-86.5-44-62.237-.00941-101.35136,46.95235-102.5,98-.02735,1.26507,1.4347,16.41855,1.45521,17.67232a54.26579,54.26579,0,0,1-31.21392,49.75321,56.44613,56.44613,0,0,0-15.689,10.9993,55.79692,55.79692,0,0,0,2.23575,81.47247" }, 4000, mina.easeinout, anim2);
};
var anim2 = function () {
path.animate({ d: "M18.81639,271.31424c22.043,19.67177,56.557,18.80656,77.64052-1.87274a56.02409,56.02409,0,0,0,10.62495-14.39238c9.97314-19.39391,29.57528-31.95421,51.53168-31.58372.56065.01131,1.12365.02476,1.68422.01582,36.03557-.57469,63.04269-11.82944,80.76005-34.24369,8.12938-10.28091,8.77552-11.48725,20.27552-12.15392,12.66667-.83333,24.39159-4.26826,34.05825-12.26826,14.96489-13.00006,18.10841-32.73174,12.29536-51.35493-5.85349-18.37687-27.09543-26.12976-37.02028-28.71014-9.508-3.18095-11.66667-5.83333-18.33333-16C241.66667,51.41695,221,22.08361,165.5703,19.98531c-62.237-.00941-100.9267,49.11333-102.07534,100.161-.02735,1.26507-.03191,7.68919-.01139,8.943a54.26579,54.26579,0,0,1-31.21392,49.75321,56.44613,56.44613,0,0,0-15.689,10.9993,55.79692,55.79692,0,0,0,2.23575,81.47247" }, 4000, mina.easeinout, anim3);
};
var anim3 = function () {
path.animate({ d: "M18.81639,271.31424c22.043,19.67177,56.557,18.80656,77.64052-1.87274a56.02409,56.02409,0,0,0,10.62495-14.39238c9.97314-19.39391,29.57528-31.95421,51.53168-31.58372.56065.01131,1.12358.01582,1.68422.01582A96.91079,96.91079,0,0,0,236.52527,186.661c8.12938-10.28091,20.33829-16.2606,33.38586-18.09044a41.8781,41.8781,0,0,0,27.91156-16.62431,41.21542,41.21542,0,0,0-.05927-48.97385,41.89273,41.89273,0,0,0-27.825-16.52943,52.66958,52.66958,0,0,1-33.97841-18.80655,96.9273,96.9273,0,0,0-77.48555-36.09277c-51.50205.9375-93.83092,42.72081-94.97956,93.76846q-.041,1.8976-.01139,3.77713a54.26579,54.26579,0,0,1-31.21392,49.75321,56.44613,56.44613,0,0,0-15.689,10.9993,55.79692,55.79692,0,0,0,2.23575,81.47247" }, 8000, mina.easeinout, anim1);
};
anim1();
})(this);
} else if ($(this).is('.type-b')) {
(function (svgelement) {
var s = Snap(svgelement);
// var s = Snap(1365, 1038, $('.keyvisual .inner')[0]);
s.attr({ viewBox: "0 0 1365 1092" });
var path = s.path("M178.94356,614.96522c83.07032,73.11326,156.75609,84.87586,258.08949,109.37622C556.49016,753.22388,741.57231,836.07,859.49517,988.3122c150.99569,167.96125,416.3563,16.19024,360.58469-196.8036-15.03643-57.45262-77.54923-190.43055-89.76543-249.64-14.25715-69.086,47.02457-182.09636,29.708-278.72136C1142.469,149.5006,1018.90765,87.557,929.935,96.50482c-80.33342,3.06374-141.048,74.65753-187.27849,41.23112-32.95826-23.83127-62.18012-50.0879-100.3122-67.50351-50.83208-23.216-108.56243-48.12908-185.36544-50.13307C355.45819,16.254,278.00759,47.82211,233.10963,74.5591,48.696,184.38687,14.51541,470.24279,178.94356,614.96522Z");
path.attr({ fill: "l(0, 0, 1, 1)#00B4E6-#00035C" });
var anim1 = function () {
path.animate({ d: "M104.83259,680.9911c83.07032,73.11326,141.47809,94.67092,242.81149,119.17128,119.45711,28.88244,224.9358-11.91713,500.5194,123.64021,193.65334,86.39918,305.37642-98.31631,260.68719-210.03939-15.03643-57.45262-72.69334-132.95422-84.90954-192.1637-14.25715-69.086,61.57138-142.01267,52.63353-223.94293-13.40677-87.88882-93.25966-155.92551-182.23231-146.97769-80.33342,3.06374-125.07824,45.34354-171.30872,11.91713-32.95826-23.83127-84.01883-66.50072-122.1509-83.91633-50.83208-23.216-119.82928-49.637-196.63228-51.641C302.72975,23.19333,206.33692,59.88733,161.439,86.62431-22.97463,196.45208-59.59556,536.26866,104.83259,680.9911Z" }, 10000, mina.easeinout, anim2);
};
var anim2 = function () {
path.animate({ d: "M271.45433,627.472c83.07032,73.11326,100.54415,72.36911,201.87756,96.86947C592.789,753.22388,687.50477,748.21608,805.42763,900.45832c150.99569,167.96125,426.25309,34.50276,370.48148-178.49108-15.03643-57.45262-49.677-105.54324-61.89318-164.75272-14.25715-69.086,18.64875-106.172,1.33222-202.797-14.43529-118.426-134.42929-173.92323-204.92577-170.92338-80.33342,3.06374-93.26254,18.42716-139.493-14.99925-32.95826-23.83127-57.86313-50.081-95.9952-67.49663-50.83208-23.216-71.68957-30.99437-148.49258-32.99835C428,67.99994,367,102.89,317.952,135.49657,175.45913,229.99184,127.46153,486.479,271.45433,627.472Z" }, 10000, mina.easeinout, anim3);
};
var anim3 = function () {
path.animate({ d: "M178.94356,614.96522c83.07032,73.11326,156.75609,84.87586,258.08949,109.37622C556.49016,753.22388,741.57231,836.07,859.49517,988.3122c150.99569,167.96125,416.3563,16.19024,360.58469-196.8036-15.03643-57.45262-77.54923-190.43055-89.76543-249.64-14.25715-69.086,47.02457-182.09636,29.708-278.72136C1142.469,149.5006,1018.90765,87.557,929.935,96.50482c-80.33342,3.06374-141.048,74.65753-187.27849,41.23112-32.95826-23.83127-62.18012-50.0879-100.3122-67.50351-50.83208-23.216-108.56243-48.12908-185.36544-50.13307C355.45819,16.254,278.00759,47.82211,233.10963,74.5591,48.696,184.38687,14.51541,470.24279,178.94356,614.96522Z" }, 20000, mina.easeinout, anim1);
};
anim1();
})(this);
} else if ($(this).is('.type-c')) {
(function (svgelement) {
var s = Snap(svgelement);
s.attr({ viewBox: "0 0 1900 1450" });
var path = s.path("M777.16357,354.359c19.49634,83.44141,46.27466,125.96631,126.67261,129.26874,49.52905,2.0376,111.187-39.35791,178.07129-98.13049,162.0481-142.39911,429.551-100.0361,552.655,70.66779,66.98389,92.883,87.96387,216.29,55.69385,326.14066-52.22485,177.78748-179.02979,167.167-286.136,277.1994-55.625,57.148-41.2959,148.28394-100.78979,201.57129-101.926,91.28467-185.625,12.02734-272.99365-26.11536-105.92407-46.24011-151.66016,62.96667-263.94409,78.45813-117.83472,16.26428-228.48975-55.72778-286.66528-153.155-50.38135-84.376-49.53271-186.81946-87.293-275.73309-51.333-120.87744-128.84033-158.06885-220.293-242.44824C94.51611,570.464,57.46924,473.27474,57.4624,376.49165c-.00635-133.83249,70.81982-266.90948,203.13232-330.67853C522.58276-80.4629,721.36694,115.5631,777.16357,354.359Z");
path.attr({ fill: "l(0, 0, 1, 1)#00035C-#00B4E6" });
var anim1 = function () {
path.animate({ d: "M865.85352,292.12773c19.49646,83.44141-6,154.722,58,154.722,49.52905,2.0376,120.75159-149.94937,187.63586-208.722,192.36414-172,409.06421-106.7039,532.16821,64,66.984,92.883,78.19592,261.99994,28.19592,381.99994-53.5592,124.543-72.33447,133.326-196,208-73.88855,49.326,4.8866,166.05505-55.1134,236-58.8866,74-143.51794,18.1427-230.8866-20-105.92383-46.24011-173.80408,198.86523-364,196.54761-117.83459,16.26428-242.03015-55.354-294.23145-143.354-90.0787-122-30.0079-248.28-67.76852-337.1936-51.33313-120.87744-72.54724-89.79181-164-174.1712-77.62575-71.61877-129.99342-173.334-130-270.11707-.00659-133.8325,47.68762-259.40277,180-323.17184C577.85352-49.33246,810.05688,53.33179,865.85352,292.12773Z" }, 10000, mina.easeinout, anim2);
};
var anim2 = function () {
path.animate({ d: "M718.86438,332.88966C738.36084,416.33107,755.60217,446.39876,836,449.70119c49.52905,2.0376,126-66,193.63586-145.89C1216,97.70117,1508-25.18882,1772,277.70119c151.02905,194.63217,107.02905,358.74216,31.02905,490.63217-112,194.11-330.10046,129.66809-437.20654,239.70044-55.625,57.14795-41.2959,158.28455-100.78992,211.5719C1163.10657,1310.89037,1086,1187.86913,970,1257.58971c-114,76.27942-132,101.55164-256,100.11145-184-20.16638-232.96347-100.11145-293.6767-200.0564-52.07877-106,11.88541-234.94366-26.18423-324.585C342.806,712.18236,205.2953,714.99345,113.84261,630.61406,36.21687,558.99529.00661,490.48427,0,393.70119-.00661,259.86873,59.98237,148.11658,192.29477,84.34749,454.283-41.92849,663.06769,94.09373,718.86438,332.88966Z" }, 10000, mina.easeinout, anim3);
};
var anim3 = function () {
path.animate({ d: "M777.16357,354.359c19.49634,83.44141,46.27466,125.96631,126.67261,129.26874,49.52905,2.0376,111.187-39.35791,178.07129-98.13049,162.0481-142.39911,429.551-100.0361,552.655,70.66779,66.98389,92.883,87.96387,216.29,55.69385,326.14066-52.22485,177.78748-179.02979,167.167-286.136,277.1994-55.625,57.148-41.2959,148.28394-100.78979,201.57129-101.926,91.28467-185.625,12.02734-272.99365-26.11536-105.92407-46.24011-151.66016,62.96667-263.94409,78.45813-117.83472,16.26428-228.48975-55.72778-286.66528-153.155-50.38135-84.376-49.53271-186.81946-87.293-275.73309-51.333-120.87744-128.84033-158.06885-220.293-242.44824C94.51611,570.464,57.46924,473.27474,57.4624,376.49165c-.00635-133.83249,70.81982-266.90948,203.13232-330.67853C522.58276-80.4629,721.36694,115.5631,777.16357,354.359Z" }, 20000, mina.easeinout, anim1);
};
anim1();
})(this);
}
$(element).addClass('initiated');
});
}
// ——————————————————————————————————————————————————
$(document).ready(init);
$(document).on('module:init', init);
})(jQuery);