Skip to content

Instantly share code, notes, and snippets.

@lostintangent

lostintangent/character-saying-wow.markdown

Last active March 5, 2024 20:40
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lostintangent/b6e9f463e2213b5bc1cb8de64ac4dc14 to your computer and use it in GitHub Desktop.
Save lostintangent/b6e9f463e2213b5bc1cb8de64ac4dc14 to your computer and use it in GitHub Desktop.
Download ZIP
Character Saying WOW
Raw
character-saying-wow.markdown
Raw
index.html
<div class="svgmotion">
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?--><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation: isolate; filter: blur(0px) hue-rotate(0deg) brightness(1) contrast(1) saturate(1) grayscale(0%) sepia(0%) invert(0%);" viewBox="0 0 256 256"><defs><clipPath id="_clipPath_rgQ5v7CZXIRrFSzv8QXNYEubuI5IEStq"><rect width="256" height="256"></rect></clipPath></defs><g clip-path="url(#_clipPath_rgQ5v7CZXIRrFSzv8QXNYEubuI5IEStq)"><rect width="256" height="256" style="fill:rgb(248,255,247)"></rect><g><g><path d=" M 116 58 C -3.579 59.941 10.5 228.375 116 224 C 220.785 219.655 270 55.5 116 58 Z " fill="rgb(253,222,189)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"></path><path d=" M 54.137 84.692 L 58.758 93.111 L 98.09 77.133 Q 96.849 74.548 96.337 69.722 Q 95.826 64.895 96.045 65.578 L 54.137 84.692 Z " fill="rgb(0,72,99)"></path><path d=" M 182.232 84.504 L 177.969 93.111 L 138 78.803 Q 139.131 76.168 139.439 71.324 Q 139.747 66.481 139.556 67.172 L 182.232 84.504 Z " fill="rgb(0,72,99)"></path><g><path d=" M 81 98 C 55.333 92.333 42.5 139.738 68 150 C 95.333 161 106.667 103.667 81 98 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><clipPath id="_clipPath_gMCuCmg8GWEd2X4IdMCS1MSRZJb7p9z2"><path d=" M 81 98 C 55.333 92.333 42.5 139.738 68 150 C 95.333 161 106.667 103.667 81 98 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></clipPath><g clip-path="url(#_clipPath_gMCuCmg8GWEd2X4IdMCS1MSRZJb7p9z2)"><path d=" M 76.596 116.693 C 69.058 115.028 65.289 128.95 72.778 131.964 C 80.805 135.195 84.134 118.357 76.596 116.693 Z " fill="rgb(0,72,99)"></path></g><path d=" M 81 98 C 55.333 92.333 42.5 139.738 68 150 C 95.333 161 106.667 103.667 81 98 Z " fill="transparent" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><g><path d=" M 153 98.602 C 124.842 99.317 129.333 154.732 153 152 C 182.159 148.634 176.667 98 153 98.602 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><clipPath id="_clipPath_GUzbwJYkFBsIWCxweNDB11JRzuLTVtwg"><path d=" M 153 98.602 C 124.842 99.317 129.333 154.732 153 152 C 182.159 148.634 176.667 98 153 98.602 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></clipPath><g clip-path="url(#_clipPath_GUzbwJYkFBsIWCxweNDB11JRzuLTVtwg)"><path d=" M 153.145 118.321 C 145.747 118.509 146.927 133.067 153.145 132.349 C 160.805 131.465 159.362 118.163 153.145 118.321 Z " fill="rgb(0,72,99)"></path></g><path d=" M 153 98.602 C 124.842 99.317 129.333 154.732 153 152 C 182.159 148.634 176.667 98 153 98.602 Z " fill="transparent" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><g><g><path d=" M 116 190 Q 110.875 190.063 111 193 Q 111.125 195.938 114 197 Q 110.844 198.031 112 202 Q 113.156 205.969 117 203" fill="none" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><g><path d=" M 113.712 173.01 C 84.347 173.828 91.173 217.91 113.712 216.35 C 143.074 214.317 140.046 172.275 113.712 173.01 Z " fill="rgb(0,72,99)"></path></g></g><path d=" M 113 100 C 115.5 104.5 118 124 116 131 C 114 138 105 147.5 105 156 C 105 164.5 111.586 168.398 118 160" fill="none" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><g><path d=" M 195 118 C 215.333 97.333 243.107 143.789 200 152" fill="rgb(253,222,189)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><path d=" M 206.09 133.337 C 204.757 129.671 208.746 125.775 213.09 133.337 C 218.865 143.392 191.402 139.021 201.09 128.337 Q 208.09 120.619 215.09 126.337" fill="none" stroke-width="2" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><path d=" M 118 57 C 120.333 50.333 123.333 34.667 122 28 C 120.667 21.333 111.667 15.333 105 24 C 98.333 32.667 104.963 45.293 114 37 C 121.219 30.375 113.333 25 109 30" fill="none" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><g><path d=" M 109.1 58 C 67.987 58.727 44.081 82.796 35.346 112.396 C 37.767 123.668 36.566 134.515 31.633 144.181 C 33.571 185.702 60.978 226.173 109.1 224 C 205.316 219.655 250.506 55.5 109.1 58 Z " fill="rgb(253,222,189)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"></path><clipPath id="_clipPath_OOmwrWbWmp4dcKBsTz8LW8EclSR6dV5O"><path d=" M 109.1 58 C 67.987 58.727 44.081 82.796 35.346 112.396 C 37.767 123.668 36.566 134.515 31.633 144.181 C 33.571 185.702 60.978 226.173 109.1 224 C 205.316 219.655 250.506 55.5 109.1 58 Z " fill="rgb(253,222,189)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"></path></clipPath><g clip-path="url(#_clipPath_OOmwrWbWmp4dcKBsTz8LW8EclSR6dV5O)"><g><g><path d=" M 64.003 181.73 Q 58.878 181.792 59.003 184.73 Q 59.128 187.667 62.003 188.73 Q 58.847 189.761 60.003 193.73 Q 61.159 197.698 65.003 194.73" fill="none" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><g><path d=" M 65.825 165.01 C 36.46 165.828 43.286 209.91 65.825 208.35 C 95.187 206.317 92.159 164.275 65.825 165.01 Z " fill="rgb(0,72,99)"></path></g></g><g><path d=" M 67.255 98.07 C 95.414 98.786 90.922 154.2 67.255 151.469 C 38.096 148.103 43.589 97.469 67.255 98.07 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><clipPath id="_clipPath_T7u9QwKENArX51ojr74YQQWxfUeGXDHn"><path d=" M 67.255 98.07 C 95.414 98.786 90.922 154.2 67.255 151.469 C 38.096 148.103 43.589 97.469 67.255 98.07 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></clipPath><g clip-path="url(#_clipPath_T7u9QwKENArX51ojr74YQQWxfUeGXDHn)"><path d=" M 57.885 118.001 C 65.282 118.189 64.102 132.748 57.885 132.03 C 50.224 131.146 51.667 117.843 57.885 118.001 Z " fill="rgb(0,72,99)"></path></g><path d=" M 67.255 98.07 C 95.414 98.786 90.922 154.2 67.255 151.469 C 38.096 148.103 43.589 97.469 67.255 98.07 Z " fill="transparent" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><g><path d=" M -5.137 97.469 C -30.803 91.802 -43.637 139.206 -18.137 149.469 C 9.197 160.469 20.53 103.135 -5.137 97.469 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><clipPath id="_clipPath_yTOS5Umo5l90PcUUjt3uugvp99diDYK3"><path d=" M -5.137 97.469 C -30.803 91.802 -43.637 139.206 -18.137 149.469 C 9.197 160.469 20.53 103.135 -5.137 97.469 Z " fill="rgb(255,255,255)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></clipPath><g clip-path="url(#_clipPath_yTOS5Umo5l90PcUUjt3uugvp99diDYK3)"><path d=" M -9.541 116.161 C -17.079 114.497 -20.848 128.419 -13.359 131.433 C -5.331 134.663 -2.003 117.825 -9.541 116.161 Z " fill="rgb(0,72,99)"></path></g><path d=" M -5.137 97.469 C -30.803 91.802 -43.637 139.206 -18.137 149.469 C 9.197 160.469 20.53 103.135 -5.137 97.469 Z " fill="transparent" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><path d=" M 92.096 88.393 L 87.832 97 L 47.863 82.692 Q 48.994 80.057 49.302 75.213 Q 49.61 70.37 49.42 71.061 L 92.096 88.393 Z " fill="rgb(0,72,99)"></path><path d=" M -36 88.58 L -31.378 97 L 7.953 81.022 Q 6.712 78.437 6.201 73.61 Q 5.689 68.784 5.908 69.467 L -36 88.58 Z " fill="rgb(0,72,99)"></path></g><path d=" M 109.1 58 C 67.987 58.727 44.081 82.796 35.346 112.396 C 37.767 123.668 36.566 134.515 31.633 144.181 C 33.571 185.702 60.978 226.173 109.1 224 C 205.316 219.655 250.506 55.5 109.1 58 Z " fill="transparent" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"></path><path d=" M 35.676 112.396 C 36.954 119.969 37.318 129.431 36.013 134 C 34.013 141 25.013 150.5 25.013 159 C 25.013 167.5 31.599 171.398 38.013 163" fill="rgb(253,222,189)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><g><path d=" M 148 113.625 C 168.333 92.958 196.107 139.414 153 147.625" fill="rgb(253,222,189)" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path><path d=" M 159.09 128.962 C 157.757 125.296 161.746 121.4 166.09 128.962 C 171.865 139.017 144.402 134.646 154.09 123.962 Q 161.09 116.244 168.09 121.962" fill="none" stroke-width="2" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g><path d=" M 118 57 C 120.333 50.333 123.333 34.667 122 28 C 120.667 21.333 111.667 15.333 105 24 C 98.333 32.667 104.963 45.293 114 37 C 121.219 30.375 113.333 25 109 30" fill="none" stroke-width="4" stroke="rgb(0,72,99)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"></path></g></g></g></svg>
</div>
Raw
script.js
/*
This animation was created using svgMotion v1.000-release
Create yours today at https://michaelsboost.com/svgMotion
*/
function rig(selector, val) {
val = parseInt(val).toFixed(0);
document.querySelectorAll(selector).forEach(function(elm, i) {
elm.style.display = "none";
elm.style.opacity = "100%";
if (i.toString() === val) {
elm.style.display = "block";
elm.style.opacity = "100%";
}
});
}
var mainTL = new TimelineMax({
repeat: -1
});
mainTL.to({}, {
duration: 0,
immediateRender: true,
onStart() {
rig(".svgmotion > svg > g > g > g", 0);
},
onUpdate() {
rig(".svgmotion > svg > g > g > g", 0);
}
}, 0.00);
mainTL.to({}, {
duration: 0.25,
onStart() {
rig(".svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g", 0);
},
onUpdate() {
rig(".svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g", 0);
}
}, 0.00);
mainTL.to({}, {
duration: 0.25,
immediateRender: true,
onUpdate() {
rig(".svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g", 1);
}
}, 0.25);
mainTL.to({}, {
duration: 0.25
}, 0.50);
// eyes
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(4), .svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(5)', {
y: -17,
scaleY: 1.65,
transformOrigin: 'center center',
// eases: none, power1, power2, power3, power4, back, elastic, bounce, rough, slow, steps, circ, expo, and sine
ease: 'none',
duration: 0.25
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(4), .svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(5)', {
y: -17,
scaleY: 1.452,
transformOrigin: 'bottom center',
// eases: none, power1, power2, power3, power4, back, elastic, bounce, rough, slow, steps, circ, expo, and sine
ease: 'none',
duration: 0.25
}, 0.25)
// eyebrows
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(2), .svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(3)', {
y: -32,
transformOrigin: 'center center',
// eases: none, power1, power2, power3, power4, back, elastic, bounce, rough, slow, steps, circ, expo, and sine
ease: 'none',
duration: 0.25
}, 0.00)
.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(2), .svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(3)', {
y: -24,
transformOrigin: 'center center',
// eases: none, power1, power2, power3, power4, back, elastic, bounce, rough, slow, steps, circ, expo, and sine
ease: 'none',
duration: 0.25
}, 0.25)
// head
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(1)', {
// eases: none, power1.in, power2.out, power3.inOut, power4, back, elastic, bounce, rough, slow, steps, circ, expo, and sine
ease: 'none',
duration: 0.25,
attr: {d: "M116,46.72C-3.579,48.659,7.048,258.288,112.567,253.915,217.344,249.564,261.661,35.392,116,46.72"}
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(1)', {
// eases: none, power1.in, power2.out, power3.inOut, power4, back, elastic, bounce, rough, slow, steps, circ, expo, and sine
ease: 'none',
duration: 0.25,
attr: {d: " M 116 58 C -3.579 59.941 10.5 228.375 116 224 C 220.785 219.655 270 55.5 116 58 Z "}
}, 0.25)
// hair
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(9)', {
y: -12,
transformOrigin: 'bottom center',
ease: 'none',
duration: 0.25,
attr: {d: "M118,57C120.333,50.333,117.039,34.816,110.201,29.378,104.877,25.143,98.783,24.056,93.966,30.277,87.27,38.918,89.636,44.3,97.602,46.341,104.964,48.227,114.229,44.9,102.409,36.734"}
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(9)', {
y: 0,
transformOrigin: 'bottom center',
ease: 'none',
duration: 0.25,
attr: {d: "M118,57C120.333,50.332,123.333,34.667,122,28,120.667,21.333,111.667,15.333,105,24,98.333,32.667,104.963,45.293,114,37,121.219,30.375,113.333,25,109,30"}
}, 0.25)
// nose
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(7)', {
x: -1,
y: -4,
rotation: 1,
transformOrigin: 'center center',
ease: 'none',
duration: 0.25
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > path:nth-child(7)', {
x: 0,
y: 0,
rotation: 0,
transformOrigin: 'center center',
ease: 'none',
duration: 0.25
}, 0.25)
// ear
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(8)', {
x: -2,
y: -9,
rotation: -3,
transformOrigin: 'center center',
ease: 'none',
duration: 0.25
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(8)', {
x: 0,
y: 0,
rotation: 0,
transformOrigin: 'center center',
ease: 'none',
duration: 0.25
}, 0.25)
// closed mouth
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g:nth-child(1) > path', {
x: -5,
y: 12,
rotation: 0,
transformOrigin: 'center center',
ease: 'none',
duration: 0.25
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g:nth-child(1) > path', {
x: 0,
y: 0,
rotation: 0,
transformOrigin: 'center center',
ease: 'none',
duration: 0.25
}, 0.25)
// open mouth
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g:nth-child(2) > path', {
x: -5,
y: 12,
scale: 1.15,
rotation: 14,
transformOrigin: 'center center',
ease: 'none',
duration: 0.25
}, 0.00)
mainTL.to('.svgmotion > svg > g > g > g:nth-child(1) > g:nth-child(6) > g:nth-child(2) > path', {
x: 0,
y: 0,
scale: 1,
rotation: 0,
transformOrigin: 'center center',
ease: 'none',
duration: 0.25
}, 0.25)
var fps = 30;
var duration = mainTL.duration();
var frames = Math.ceil(duration / 1 * fps);
mainTL.play(0).timeScale(1);
Raw
scripts
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
Raw
style.css
html, body, .svgmotion, svg {
width: 100%;
height: 100%;
margin: 0;
}
body {
background: rgb(32, 169, 91);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment