Skip to content
Snippets Groups Projects
Commit 76389f85 authored by Myśliwiec, D. (Dominik, Student M-CS)'s avatar Myśliwiec, D. (Dominik, Student M-CS)
Browse files

Change droplet faces depending on fill percentage

parent e4fcbf9a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
components/TheDroplet.vue
+ 117
− 51
View file @ 76389f85
<template>
<section class="droplet-section" id="droplet-section">
<section id="droplet-section" class="droplet-section">
<h1 class="greeting">Hi, <span>John</span>!</h1>
<svg id="droplet-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="224" height="336.833" viewBox="0 0 224 336.833">
<svg
id="droplet-icon"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="224"
height="336.833"
viewBox="0 0 224 336.833"
>
<defs>
<clipPath id="droplet-clip-path">
<path id="Path_47" data-name="Path 47" d="M104.988,219.221A103.211,103.211,0,0,1,84.133,217.1a102.363,102.363,0,0,1-37-15.732A104.675,104.675,0,0,1,3.6,135.721,106.424,106.424,0,0,1,1.5,114.64c0-12.932,5.3-31.623,15.765-55.555C25.718,39.747,37.538,16.978,52.4-8.587,63.138-27.068,75.19-46.558,88.219-66.514c7.922-12.134,13.992-21.036,16.734-25.017.4.6.907,1.348,1.5,2.225,8.325,12.355,33.657,49.953,57.166,91.456,13.311,23.5,23.833,44.391,31.275,62.1,9.014,21.448,13.586,38.4,13.586,50.394a106.427,106.427,0,0,1-2.1,21.081,104.676,104.676,0,0,1-43.531,65.644,102.263,102.263,0,0,1-57.854,17.856Z" transform="translate(7554.014 -1288.48)" fill="none" stroke="#707070" stroke-width="1"/>
<path
id="Path_47"
data-name="Path 47"
d="M104.988,219.221A103.211,103.211,0,0,1,84.133,217.1a102.363,102.363,0,0,1-37-15.732A104.675,104.675,0,0,1,3.6,135.721,106.424,106.424,0,0,1,1.5,114.64c0-12.932,5.3-31.623,15.765-55.555C25.718,39.747,37.538,16.978,52.4-8.587,63.138-27.068,75.19-46.558,88.219-66.514c7.922-12.134,13.992-21.036,16.734-25.017.4.6.907,1.348,1.5,2.225,8.325,12.355,33.657,49.953,57.166,91.456,13.311,23.5,23.833,44.391,31.275,62.1,9.014,21.448,13.586,38.4,13.586,50.394a106.427,106.427,0,0,1-2.1,21.081,104.676,104.676,0,0,1-43.531,65.644,102.263,102.263,0,0,1-57.854,17.856Z"
transform="translate(7554.014 -1288.48)"
fill="none"
stroke="#707070"
stroke-width="1"
/>
</clipPath>
<filter id="Path_6" x="31.868" y="222.703" width="42.134" height="42.134" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.349"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
<filter
id="Path_6"
x="31.868"
y="222.703"
width="42.134"
height="42.134"
filterUnits="userSpaceOnUse"
>
<feOffset dy="3" input="SourceAlpha" />
<feGaussianBlur stdDeviation="3" result="blur" />
<feFlood flood-opacity="0.349" />
<feComposite operator="in" in2="blur" />
<feComposite in="SourceGraphic" />
</filter>
<filter id="Ellipse_2" x="147.998" y="224.833" width="40" height="40" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur-2"/>
<feFlood flood-opacity="0.341"/>
<feComposite operator="in" in2="blur-2"/>
<feComposite in="SourceGraphic"/>
<filter
id="Ellipse_2"
x="147.998"
y="224.833"
width="40"
height="40"
filterUnits="userSpaceOnUse"
>
<feOffset dy="3" input="SourceAlpha" />
<feGaussianBlur stdDeviation="3" result="blur-2" />
<feFlood flood-opacity="0.341" />
<feComposite operator="in" in2="blur-2" />
<feComposite in="SourceGraphic" />
</filter>
<filter id="Path_5" x="85.833" y="229.261" width="52.335" height="53.141" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur-3"/>
<feFlood flood-opacity="0.361"/>
<feComposite operator="in" in2="blur-3"/>
<feComposite in="SourceGraphic"/>
<filter
id="Path_5"
x="85.833"
y="229.261"
width="52.335"
height="53.141"
filterUnits="userSpaceOnUse"
>
<feOffset dy="3" input="SourceAlpha" />
<feGaussianBlur stdDeviation="3" result="blur-3" />
<feFlood flood-opacity="0.361" />
<feComposite operator="in" in2="blur-3" />
<feComposite in="SourceGraphic" />
</filter>
<filter id="Path_42" x="85.583" y="233.831" width="52.335" height="25.009" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur-4"/>
<feFlood flood-opacity="0.361"/>
<feComposite operator="in" in2="blur-4"/>
<feComposite in="SourceGraphic"/>
<filter
id="Path_42"
x="85.583"
y="233.831"
width="52.335"
height="25.009"
filterUnits="userSpaceOnUse"
>
<feOffset dy="3" input="SourceAlpha" />
<feGaussianBlur stdDeviation="3" result="blur-4" />
<feFlood flood-opacity="0.361" />
<feComposite operator="in" in2="blur-4" />
<feComposite in="SourceGraphic" />
</filter>
<filter id="Path_43" x="85.584" y="221.303" width="52.835" height="50.069" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur-5"/>
<feFlood flood-opacity="0.361"/>
<feComposite operator="in" in2="blur-5"/>
<feComposite in="SourceGraphic"/>
<filter
id="Path_43"
x="85.584"
y="221.303"
width="52.835"
height="50.069"
filterUnits="userSpaceOnUse"
>
<feOffset dy="3" input="SourceAlpha" />
<feGaussianBlur stdDeviation="3" result="blur-5" />
<feFlood flood-opacity="0.361" />
<feComposite operator="in" in2="blur-5" />
<feComposite in="SourceGraphic" />
</filter>
</defs>
<g id="Group_41" data-name="Group 41" transform="translate(-7339.002 1394)">
<g id="Mask_Group_10" data-name="Mask Group 10" transform="translate(-208 3)" clip-path="url(#droplet-clip-path)">
<rect id="Rectangle_73" class="droplet-fill" :class="translateYPos + 'px'" data-name="Rectangle 73" width="211" height="317" fill="#59acf5" :style="{ '--translate-y-pos': `${translateYPos}px`, '--clip-percentage':`${100 - fillPercentage}%` }"/>
<rect
id="Rectangle_73"
class="droplet-fill"
:class="translateYPos + 'px'"
data-name="Rectangle 73"
width="211"
height="317"
fill="#59acf5"
:style="{ '--translate-y-pos': `${translateYPos}px`, '--clip-percentage':`${100 - fillPercentage}%` }"
/>
</g>
<g id="Group_40" data-name="Group 40" transform="translate(7860 -745.167)">
<g id="Droplet" transform="translate(-521 -660)">
<g id="Group_38" data-name="Group 38" transform="translate(0.002 12)">
<g id="Path_3" data-name="Path 3" transform="translate(0 94)">
<path id="Path_43-2" data-name="Path 43" d="M112,240.5a110.2,110.2,0,0,1-22.268-2.268,109.3,109.3,0,0,1-39.506-16.8,111.767,111.767,0,0,1-46.48-70.092A113.635,113.635,0,0,1,1.5,128.833c0-13.808,5.663-33.766,16.833-59.32C27.359,48.865,39.98,24.554,55.845-2.744,67.314-22.477,80.183-43.287,94.1-64.6c8.459-12.956,14.94-22.461,17.868-26.712.43.641.968,1.44,1.6,2.375C122.45-75.74,149.5-35.595,174.6,8.721c14.213,25.091,25.448,47.4,33.394,66.3,9.625,22.9,14.506,41.005,14.506,53.808a113.638,113.638,0,0,1-2.246,22.509,111.768,111.768,0,0,1-46.48,70.092A109.192,109.192,0,0,1,112,240.5Zm1.238-333.67-2.531-1.218.046-.445,2.676,1.289Z" fill="rgba(89,172,245,0.18)"/>
<path id="Path_44" data-name="Path 44" d="M111.95-88.639c-3.311,4.835-9.2,13.528-16.6,24.867C81.451-42.485,68.6-21.7,57.14-1.987,41.3,25.261,28.709,49.52,19.707,70.116,8.621,95.478,3,115.233,3,128.833a112.148,112.148,0,0,0,2.216,22.212A110.274,110.274,0,0,0,51.071,220.2a107.976,107.976,0,0,0,121.858,0,110.266,110.266,0,0,0,45.855-69.15A112.165,112.165,0,0,0,221,128.833c0-12.6-4.841-30.51-14.389-53.227C198.688,56.755,187.479,34.5,173.295,9.46,148.222-34.8,121.2-74.913,112.317-88.094l-.367-.545M112-94h0Zm0,0c-.149.467,112,160.359,112,222.832C224,191.333,173.856,242,112,242S0,191.333,0,128.833C0,66.485,111.7-93.547,112-94Z" fill="#fff"/>
<path id="Path_43-2" data-name="Path 43" d="M112,240.5a110.2,110.2,0,0,1-22.268-2.268,109.3,109.3,0,0,1-39.506-16.8,111.767,111.767,0,0,1-46.48-70.092A113.635,113.635,0,0,1,1.5,128.833c0-13.808,5.663-33.766,16.833-59.32C27.359,48.865,39.98,24.554,55.845-2.744,67.314-22.477,80.183-43.287,94.1-64.6c8.459-12.956,14.94-22.461,17.868-26.712.43.641.968,1.44,1.6,2.375C122.45-75.74,149.5-35.595,174.6,8.721c14.213,25.091,25.448,47.4,33.394,66.3,9.625,22.9,14.506,41.005,14.506,53.808a113.638,113.638,0,0,1-2.246,22.509,111.768,111.768,0,0,1-46.48,70.092A109.192,109.192,0,0,1,112,240.5Zm1.238-333.67-2.531-1.218.046-.445,2.676,1.289Z" fill="rgba(89,172,245,0.18)" />
<path id="Path_44" data-name="Path 44" d="M111.95-88.639c-3.311,4.835-9.2,13.528-16.6,24.867C81.451-42.485,68.6-21.7,57.14-1.987,41.3,25.261,28.709,49.52,19.707,70.116,8.621,95.478,3,115.233,3,128.833a112.148,112.148,0,0,0,2.216,22.212A110.274,110.274,0,0,0,51.071,220.2a107.976,107.976,0,0,0,121.858,0,110.266,110.266,0,0,0,45.855-69.15A112.165,112.165,0,0,0,221,128.833c0-12.6-4.841-30.51-14.389-53.227C198.688,56.755,187.479,34.5,173.295,9.46,148.222-34.8,121.2-74.913,112.317-88.094l-.367-.545M112-94h0Zm0,0c-.149.467,112,160.359,112,222.832C224,191.333,173.856,242,112,242S0,191.333,0,128.833C0,66.485,111.7-93.547,112-94Z" fill="#fff" />
</g>
<g id="Path_3-2" data-name="Path 3" transform="translate(0 94)">
<path id="Path_46" data-name="Path 46" d="M111.95-88.639c-3.311,4.835-9.2,13.528-16.6,24.867C81.451-42.485,68.6-21.7,57.14-1.987,41.3,25.261,28.709,49.52,19.707,70.116,8.621,95.478,3,115.233,3,128.833a112.148,112.148,0,0,0,2.216,22.212A110.274,110.274,0,0,0,51.071,220.2a107.976,107.976,0,0,0,121.858,0,110.266,110.266,0,0,0,45.855-69.15A112.165,112.165,0,0,0,221,128.833c0-12.6-4.841-30.51-14.389-53.227C198.688,56.755,187.479,34.5,173.295,9.46,148.222-34.8,121.2-74.913,112.317-88.094l-.367-.545M112-94h0Zm0,0c-.149.467,112,160.359,112,222.832C224,191.333,173.856,242,112,242S0,191.333,0,128.833C0,66.485,111.7-93.547,112-94Z" fill="#59acf5"/>
<path id="Path_46" data-name="Path 46" d="M111.95-88.639c-3.311,4.835-9.2,13.528-16.6,24.867C81.451-42.485,68.6-21.7,57.14-1.987,41.3,25.261,28.709,49.52,19.707,70.116,8.621,95.478,3,115.233,3,128.833a112.148,112.148,0,0,0,2.216,22.212A110.274,110.274,0,0,0,51.071,220.2a107.976,107.976,0,0,0,121.858,0,110.266,110.266,0,0,0,45.855-69.15A112.165,112.165,0,0,0,221,128.833c0-12.6-4.841-30.51-14.389-53.227C198.688,56.755,187.479,34.5,173.295,9.46,148.222-34.8,121.2-74.913,112.317-88.094l-.367-.545M112-94h0Zm0,0c-.149.467,112,160.359,112,222.832C224,191.333,173.856,242,112,242S0,191.333,0,128.833C0,66.485,111.7-93.547,112-94Z" fill="#59acf5" />
</g>
</g>
<g transform="matrix(1, 0, 0, 1, 0, 11.17)" filter="url(#Path_6)">
<path id="Path_6-2" data-name="Path 6" d="M12.067,0A12.067,12.067,0,1,1,0,12.067,12.067,12.067,0,0,1,12.067,0Z" transform="translate(40.87 228.7)"/>
<path id="Path_6-2" data-name="Path 6" d="M12.067,0A12.067,12.067,0,1,1,0,12.067,12.067,12.067,0,0,1,12.067,0Z" transform="translate(40.87 228.7)" />
</g>
<g transform="matrix(1, 0, 0, 1, 0, 11.17)" filter="url(#Ellipse_2)">
<circle id="Ellipse_2-2" data-name="Ellipse 2" cx="11" cy="11" r="11" transform="translate(157 230.83)"/>
<circle
id="Ellipse_2-2"
data-name="Ellipse 2"
cx="11"
cy="11"
r="11"
transform="translate(157 230.83)"
/>
</g>
<g transform="matrix(1, 0, 0, 1, 0, 11.17)" filter="url(#Path_5)">
<path id="Path_5-2" data-name="Path 5" d="M230-465.908c3.522-4.813,30.113-3.58,32,0s1.943,31.9-16,31.977S226.478-461.1,230-465.908Z" transform="translate(-133.65 704.33)"/>
<g v-if="fillPercentage>75" transform="matrix(1, 0, 0, 1, 0, 11.17)" filter="url(#Path_5)">
<path id="Path_5-2" data-name="Path 5" d="M230-465.908c3.522-4.813,30.113-3.58,32,0s1.943,31.9-16,31.977S226.478-461.1,230-465.908Z" transform="translate(-133.65 704.33)" />
</g>
</g>
<g transform="matrix(1, 0, 0, 1, -521, -648.83)" filter="url(#Path_42)" fill="none">
<path id="Path_42-2" data-name="Path 42" d="M230-468.441c3.522-.96,30.113-.714,32,0s1.943,6.362-16,6.378S226.478-467.481,230-468.441Z" transform="translate(-133.9 708.9)"/>
<g v-if="fillPercentage>=40 && fillPercentage<75" transform="matrix(1, 0, 0, 1, -521, -648.83)" filter="url(#Path_42)">
<path id="Path_42-2" data-name="Path 42" d="M230-468.441c3.522-.96,30.113-.714,32,0s1.943,6.362-16,6.378S226.478-467.481,230-468.441Z" transform="translate(-133.9 708.9)" />
</g>
<g transform="matrix(1, 0, 0, 1, -521, -648.83)" filter="url(#Path_43)" fill="none">
<path id="Path_43-3" data-name="Path 43" d="M230-434.023c2.934-1.227,28.349-2.085,32,0s1.943-31.9-16-31.977S227.066-432.8,230-434.023Z" transform="translate(-134.15 693.3)"/>
<g v-else-if="fillPercentage<40" transform="matrix(1, 0, 0, 1, -521, -648.83)" filter="url(#Path_43)">
<path id="Path_43-3" data-name="Path 43" d="M230-434.023c2.934-1.227,28.349-2.085,32,0s1.943-31.9-16-31.977S227.066-432.8,230-434.023Z" transform="translate(-134.15 693.3)" />
</g>
</g>
</g>
......@@ -89,23 +155,23 @@
<script>
export default {
data: function () {
data () {
return {
translateYFull: -1383,
translateYEmpty: -1066,
translateYPos: -1383,
fillPercentage: 0,
fillPercentage: 0
}
},
mounted () {
this.fillDroplet()
},
methods: {
fillDroplet: async function () {
async fillDroplet () {
setTimeout(() => {
this.fillPercentage = 40
}, 4)
}
},
mounted () {
this.fillDroplet()
}
}
</script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment