Mirrors/overte-lubosz
3
0
Fork 0
mirror of https://github.com/lubosz/overte.git synced 2025-04-23 19:34:02 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

go go go go go

Browse source
This commit is contained in:
Zach Fox 2018-01-18 17:37:26 -08:00
parent c6429f4f33
commit 6b5389a167
6 changed files with 320 additions and 268 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
interface/resources/qml/hifi/commerce/wallet/Wallet.qml
View file

@ -389,7 +389,7 @@ Rectangle {
//
Item {
id: tabButtonsContainer;
visible: !needsLogIn.visible && root.activeView !== "passphraseChange" && root.activeView !== "securityImageChange";
visible: !needsLogIn.visible && root.activeView !== "passphraseChange" && root.activeView !== "securityImageChange" && sendMoney.currentActiveView !== "sendMoneyStep";
property int numTabs: 5;
// Size
width: root.width;

6
interface/resources/qml/hifi/commerce/wallet/sendMoney/RecipientDisplay.qml
View file

@ -46,7 +46,7 @@ Item {
// Text size
size: 18;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.white;
verticalAlignment: Text.AlignBottom;
elide: Text.ElideRight;
}
@ -63,7 +63,7 @@ Item {
// Text size
size: 16;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.white;
verticalAlignment: Text.AlignTop;
elide: Text.ElideRight;
}
@ -108,7 +108,7 @@ Item {
// Text size
size: 16;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.white;
verticalAlignment: Text.AlignVCenter;
elide: Text.ElideRight;
}

539
interface/resources/qml/hifi/commerce/wallet/sendMoney/SendMoney.qml
View file

@ -29,8 +29,9 @@ Item {
property int parentAppNavBarHeight;
property string currentActiveView: "sendMoneyHome";
property string nextActiveView: "";
property bool isCurrentlyFullScreen: chooseRecipientConnection.visible ||
chooseRecipientNearby.visible || sendMoneyStep.visible || paymentSuccess.visible || paymentFailure.visible;
property bool shouldShowTopAndBottomOfWallet: chooseRecipientConnection.visible ||
chooseRecipientNearby.visible || paymentSuccess.visible || paymentFailure.visible;
property bool shouldShowTopOfWallet: sendMoneyStep.visible;
property bool isCurrentlySendingMoney: false;
// This object is always used in a popup or full-screen Wallet section.
@ -38,9 +39,9 @@ Item {
// able to click on a button/mouseArea underneath the popup/section.
MouseArea {
x: 0;
y: root.isCurrentlyFullScreen ? 0 : root.parentAppTitleBarHeight;
y: (root.shouldShowTopAndBottomOfWallet && !root.shouldShowTopOfWallet) ? 0 : root.parentAppTitleBarHeight;
width: parent.width;
height: root.isCurrentlyFullScreen ? parent.height : parent.height - root.parentAppTitleBarHeight - root.parentAppNavBarHeight;
height: (root.shouldShowTopAndBottomOfWallet || root.shouldShowTopOfWallet) ? parent.height : parent.height - root.parentAppTitleBarHeight - root.parentAppNavBarHeight;
propagateComposedEvents: false;
}
@ -195,6 +196,17 @@ Item {
anchors.right: parent.right;
anchors.bottom: parent.bottom;
height: 440;
LinearGradient {
anchors.fill: parent;
start: Qt.point(0, 0);
end: Qt.point(0, height);
gradient: Gradient {
GradientStop { position: 0.0; color: hifi.colors.white }
GradientStop { position: 1.0; color: hifi.colors.faintGray }
}
}
RalewaySemiBold {
id: sendMoneyText;
@ -224,12 +236,13 @@ Item {
Image {
anchors.top: parent.top;
source: "../images/wallet-bg.jpg";
height: 60;
source: "./images/connection.svg";
height: 70;
width: parent.width;
fillMode: Image.PreserveAspectFit;
horizontalAlignment: Image.AlignHCenter;
verticalAlignment: Image.AlignTop;
mipmap: true;
}
RalewaySemiBold {
@ -265,12 +278,13 @@ Item {
Image {
anchors.top: parent.top;
source: "../images/wallet-bg.jpg";
height: 60;
source: "./images/nearby.svg";
height: 70;
width: parent.width;
fillMode: Image.PreserveAspectFit;
horizontalAlignment: Image.AlignHCenter;
verticalAlignment: Image.AlignTop;
mipmap: true;
}
RalewaySemiBold {
@ -714,284 +728,281 @@ Item {
visible: root.currentActiveView === "sendMoneyStep";
anchors.fill: parent;
anchors.topMargin: root.parentAppTitleBarHeight;
Rectangle {
anchors.centerIn: parent;
width: parent.width - 30;
height: parent.height - 30;
color: "#AAAAAA";
RalewaySemiBold {
id: sendMoneyText_sendMoneyStep;
text: "Send Money";
// Anchors
anchors.top: parent.top;
anchors.topMargin: 26;
anchors.left: parent.left;
anchors.leftMargin: 20;
width: paintedWidth;
height: 30;
// Text size
size: 22;
// Style
color: hifi.colors.white;
}
Item {
id: sendToContainer;
anchors.top: sendMoneyText_sendMoneyStep.bottom;
anchors.topMargin: 20;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.right: parent.right;
anchors.rightMargin: 20;
height: 80;
RalewaySemiBold {
id: sendMoneyText_sendMoneyStep;
text: "Send Money To:";
id: sendToText_sendMoneyStep;
text: "Send to:";
// Anchors
anchors.top: parent.top;
anchors.topMargin: 26;
anchors.left: parent.left;
anchors.leftMargin: 20;
width: paintedWidth;
height: 30;
anchors.bottom: parent.bottom;
width: 90;
// Text size
size: 22;
size: 18;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.white;
verticalAlignment: Text.AlignVCenter;
}
Item {
id: sendToContainer;
anchors.top: sendMoneyText_sendMoneyStep.bottom;
anchors.topMargin: 20;
anchors.left: parent.left;
anchors.leftMargin: 20;
RecipientDisplay {
anchors.top: parent.top;
anchors.left: sendToText_sendMoneyStep.right;
anchors.right: changeButton.left;
anchors.rightMargin: 12;
height: parent.height;
displayName: sendMoneyStep.selectedRecipientDisplayName;
userName: sendMoneyStep.selectedRecipientUserName;
profilePic: sendMoneyStep.selectedRecipientProfilePic !== "" ? ((0 === sendMoneyStep.selectedRecipientProfilePic.indexOf("http")) ?
sendMoneyStep.selectedRecipientProfilePic : (Account.metaverseServerURL + sendMoneyStep.selectedRecipientProfilePic)) : "";
isDisplayingNearby: sendMoneyStep.referrer === "nearby";
}
// "CHANGE" button
HifiControlsUit.Button {
id: changeButton;
color: hifi.buttons.none;
colorScheme: hifi.colorSchemes.white;
anchors.right: parent.right;
anchors.rightMargin: 20;
height: 80;
RalewaySemiBold {
id: sendToText_sendMoneyStep;
text: "Send To:";
// Anchors
anchors.top: parent.top;
anchors.left: parent.left;
anchors.bottom: parent.bottom;
width: 90;
// Text size
size: 18;
// Style
color: hifi.colors.baseGray;
verticalAlignment: Text.AlignVCenter;
}
RecipientDisplay {
anchors.top: parent.top;
anchors.left: sendToText_sendMoneyStep.right;
anchors.right: changeButton.left;
anchors.rightMargin: 12;
height: parent.height;
displayName: sendMoneyStep.selectedRecipientDisplayName;
userName: sendMoneyStep.selectedRecipientUserName;
profilePic: sendMoneyStep.selectedRecipientProfilePic !== "" ? ((0 === sendMoneyStep.selectedRecipientProfilePic.indexOf("http")) ?
sendMoneyStep.selectedRecipientProfilePic : (Account.metaverseServerURL + sendMoneyStep.selectedRecipientProfilePic)) : "";
isDisplayingNearby: sendMoneyStep.referrer === "nearby";
}
// "CHANGE" button
HifiControlsUit.Button {
id: changeButton;
color: hifi.buttons.black;
colorScheme: hifi.colorSchemes.dark;
anchors.right: parent.right;
anchors.verticalCenter: parent.verticalCenter;
height: 35;
width: 120;
text: "CHANGE";
onClicked: {
if (sendMoneyStep.referrer === "connections") {
root.nextActiveView = "chooseRecipientConnection";
} else if (sendMoneyStep.referrer === "nearby") {
root.nextActiveView = "chooseRecipientNearby";
}
resetSendMoneyData();
anchors.verticalCenter: parent.verticalCenter;
height: 35;
width: 100;
text: "CHANGE";
onClicked: {
if (sendMoneyStep.referrer === "connections") {
root.nextActiveView = "chooseRecipientConnection";
} else if (sendMoneyStep.referrer === "nearby") {
root.nextActiveView = "chooseRecipientNearby";
}
resetSendMoneyData();
}
}
}
Item {
id: amountContainer;
anchors.top: sendToContainer.bottom;
anchors.topMargin: 2;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.right: parent.right;
anchors.rightMargin: 20;
height: 80;
RalewaySemiBold {
id: amountText;
text: "Amount:";
// Anchors
anchors.top: parent.top;
anchors.left: parent.left;
anchors.bottom: parent.bottom;
width: 90;
// Text size
size: 18;
// Style
color: hifi.colors.white;
verticalAlignment: Text.AlignVCenter;
}
HifiControlsUit.TextField {
id: amountTextField;
colorScheme: hifi.colorSchemes.dark;
inputMethodHints: Qt.ImhDigitsOnly;
// Anchors
anchors.verticalCenter: parent.verticalCenter;
anchors.left: amountText.right;
anchors.right: parent.right;
height: 50;
// Style
leftPermanentGlyph: hifi.glyphs.hfc;
activeFocusOnPress: true;
activeFocusOnTab: true;
validator: IntValidator { bottom: 0; }
onAccepted: {
optionalMessage.focus = true;
}
}
Item {
id: amountContainer;
anchors.top: sendToContainer.bottom;
RalewaySemiBold {
id: amountTextFieldError;
// Anchors
anchors.top: amountTextField.bottom;
anchors.topMargin: 2;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.right: parent.right;
anchors.rightMargin: 20;
height: 80;
RalewaySemiBold {
id: amountText;
text: "Amount:";
// Anchors
anchors.top: parent.top;
anchors.left: parent.left;
anchors.bottom: parent.bottom;
width: 90;
// Text size
size: 18;
// Style
color: hifi.colors.baseGray;
verticalAlignment: Text.AlignVCenter;
}
HifiControlsUit.TextField {
id: amountTextField;
colorScheme: hifi.colorSchemes.light;
inputMethodHints: Qt.ImhDigitsOnly;
// Anchors
anchors.verticalCenter: parent.verticalCenter;
anchors.left: amountText.right;
anchors.right: parent.right;
height: 50;
// Style
leftPermanentGlyph: hifi.glyphs.hfc;
activeFocusOnPress: true;
activeFocusOnTab: true;
validator: IntValidator { bottom: 0; }
onAccepted: {
optionalMessage.focus = true;
}
}
RalewaySemiBold {
id: amountTextFieldError;
// Anchors
anchors.top: amountTextField.bottom;
anchors.topMargin: 2;
anchors.left: amountTextField.left;
anchors.right: amountTextField.right;
height: 40;
// Text size
size: 16;
// Style
color: hifi.colors.baseGray;
verticalAlignment: Text.AlignTop;
horizontalAlignment: Text.AlignRight;
}
anchors.left: amountTextField.left;
anchors.right: amountTextField.right;
height: 40;
// Text size
size: 16;
// Style
color: hifi.colors.white;
verticalAlignment: Text.AlignTop;
horizontalAlignment: Text.AlignRight;
}
}
Item {
id: messageContainer;
anchors.top: amountContainer.bottom;
anchors.topMargin: 16;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.right: parent.right;
anchors.rightMargin: 20;
height: 140;
Item {
id: messageContainer;
anchors.top: amountContainer.bottom;
anchors.topMargin: 16;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.right: parent.right;
anchors.rightMargin: 20;
height: 140;
FontLoader { id: firaSansSemiBold; source: "../../../../../fonts/FiraSans-SemiBold.ttf"; }
TextArea {
id: optionalMessage;
property int maximumLength: 70;
property string previousText: text;
placeholderText: "Optional Message";
font.family: firaSansSemiBold.name;
font.pixelSize: 20;
// Anchors
FontLoader { id: firaSansSemiBold; source: "../../../../../fonts/FiraSans-SemiBold.ttf"; }
TextArea {
id: optionalMessage;
property int maximumLength: 72;
property string previousText: text;
placeholderText: "<i>Optional Message (" + maximumLength + " character limit)</i>";
font.family: firaSansSemiBold.name;
font.pixelSize: 20;
// Anchors
anchors.fill: parent;
// Style
background: Rectangle {
anchors.fill: parent;
// Style
background: Rectangle {
anchors.fill: parent;
color: optionalMessage.activeFocus ? hifi.colors.white : hifi.colors.textFieldLightBackground;
border.width: optionalMessage.activeFocus ? 1 : 0;
border.color: optionalMessage.activeFocus ? hifi.colors.primaryHighlight : hifi.colors.textFieldLightBackground;
}
color: hifi.colors.black;
textFormat: TextEdit.PlainText;
wrapMode: TextEdit.Wrap;
activeFocusOnPress: true;
activeFocusOnTab: true;
// Workaround for no max length on TextAreas
onTextChanged: {
if (text.length > maximumLength) {
var cursor = cursorPosition;
text = previousText;
if (cursor > text.length) {
cursorPosition = text.length;
} else {
cursorPosition = cursor-1;
}
}
previousText = text;
}
color: optionalMessage.activeFocus ? hifi.colors.black : hifi.colors.baseGrayShadow;
border.width: optionalMessage.activeFocus ? 1 : 0;
border.color: optionalMessage.activeFocus ? hifi.colors.primaryHighlight : hifi.colors.textFieldLightBackground;
}
RalewaySemiBold {
id: optionalMessageCharacterCount;
text: optionalMessage.text.length + "/" + optionalMessage.maximumLength;
// Anchors
anchors.top: optionalMessage.bottom;
anchors.topMargin: 2;
anchors.right: optionalMessage.right;
height: paintedHeight;
// Text size
size: 16;
// Style
color: hifi.colors.baseGray;
verticalAlignment: Text.AlignTop;
horizontalAlignment: Text.AlignRight;
color: hifi.colors.white;
textFormat: TextEdit.PlainText;
wrapMode: TextEdit.Wrap;
activeFocusOnPress: true;
activeFocusOnTab: true;
// Workaround for no max length on TextAreas
onTextChanged: {
if (text.length > maximumLength) {
var cursor = cursorPosition;
text = previousText;
if (cursor > text.length) {
cursorPosition = text.length;
} else {
cursorPosition = cursor-1;
}
}
previousText = text;
}
}
RalewaySemiBold {
id: optionalMessageCharacterCount;
text: optionalMessage.text.length + "/" + optionalMessage.maximumLength;
// Anchors
anchors.top: optionalMessage.bottom;
anchors.topMargin: 4;
anchors.right: optionalMessage.right;
height: paintedHeight;
// Text size
size: 16;
// Style
color: optionalMessage.text.length === optionalMessage.maximumLength ? "#ea89a5" : hifi.colors.lightGrayText;
verticalAlignment: Text.AlignTop;
horizontalAlignment: Text.AlignRight;
}
}
HifiControlsUit.CheckBox {
id: sendPubliclyCheckbox;
visible: true; // FIXME ONCE PARTICLE EFFECTS ARE IN
text: "Send Publicly"
// Anchors
anchors.top: messageContainer.bottom;
anchors.topMargin: 16;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.right: parent.right;
anchors.rightMargin: 16;
boxSize: 24;
}
Item {
id: bottomBarContainer;
anchors.left: parent.left;
anchors.leftMargin: 20;
anchors.right: parent.right;
anchors.rightMargin: 20;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 20;
height: 60;
// "CANCEL" button
HifiControlsUit.Button {
id: cancelButton_sendMoneyStep;
color: hifi.buttons.noneBorderlessWhite;
colorScheme: hifi.colorSchemes.dark;
anchors.left: parent.left;
anchors.leftMargin: 24;
anchors.verticalCenter: parent.verticalCenter;
height: 40;
width: 150;
text: "CANCEL";
onClicked: {
resetSendMoneyData();
root.nextActiveView = "sendMoneyHome";
}
}
Item {
id: bottomBarContainer;
anchors.top: messageContainer.bottom;
anchors.topMargin: 30;
anchors.left: parent.left;
anchors.leftMargin: 20;
// "SEND" button
HifiControlsUit.Button {
id: sendButton;
color: hifi.buttons.blue;
colorScheme: hifi.colorSchemes.dark;
anchors.right: parent.right;
anchors.rightMargin: 20;
height: 80;
HifiControlsUit.CheckBox {
id: sendPubliclyCheckbox;
visible: false; // FIXME ONCE PARTICLE EFFECTS ARE IN
text: "Send Publicly"
// Anchors
anchors.verticalCenter: parent.verticalCenter;
anchors.left: parent.left;
anchors.right: cancelButton_sendMoneyStep.left;
anchors.rightMargin: 16;
boxSize: 24;
}
// "CANCEL" button
HifiControlsUit.Button {
id: cancelButton_sendMoneyStep;
color: hifi.buttons.noneBorderless;
colorScheme: hifi.colorSchemes.dark;
anchors.right: sendButton.left;
anchors.rightMargin: 16;
anchors.verticalCenter: parent.verticalCenter;
height: 35;
width: 100;
text: "CANCEL";
onClicked: {
resetSendMoneyData();
root.nextActiveView = "sendMoneyHome";
}
}
// "SEND" button
HifiControlsUit.Button {
id: sendButton;
color: hifi.buttons.blue;
colorScheme: hifi.colorSchemes.dark;
anchors.right: parent.right;
anchors.verticalCenter: parent.verticalCenter;
height: 35;
width: 100;
text: "SEND";
onClicked: {
if (parseInt(amountTextField.text) > parseInt(balanceText.text)) {
amountTextField.focus = true;
amountTextField.error = true;
amountTextFieldError.text = "<i>amount exceeds available funds</i>";
} else if (amountTextField.text === "" || parseInt(amountTextField.text) < 1) {
amountTextField.focus = true;
amountTextField.error = true;
amountTextFieldError.text = "<i>invalid amount</i>";
} else {
amountTextFieldError.text = "";
amountTextField.error = false;
root.isCurrentlySendingMoney = true;
amountTextField.focus = false;
optionalMessage.focus = false;
if (sendMoneyStep.referrer === "connections") {
Commerce.transferHfcToUsername(sendMoneyStep.selectedRecipientUserName, parseInt(amountTextField.text), optionalMessage.text);
} else if (sendMoneyStep.referrer === "nearby") {
Commerce.transferHfcToNode(sendMoneyStep.selectedRecipientNodeID, parseInt(amountTextField.text), optionalMessage.text);
}
anchors.rightMargin: 24;
anchors.verticalCenter: parent.verticalCenter;
height: 40;
width: 150;
text: "SUBMIT";
onClicked: {
if (parseInt(amountTextField.text) > parseInt(balanceText.text)) {
amountTextField.focus = true;
amountTextField.error = true;
amountTextFieldError.text = "<i>amount exceeds available funds</i>";
} else if (amountTextField.text === "" || parseInt(amountTextField.text) < 1) {
amountTextField.focus = true;
amountTextField.error = true;
amountTextFieldError.text = "<i>invalid amount</i>";
} else {
amountTextFieldError.text = "";
amountTextField.error = false;
root.isCurrentlySendingMoney = true;
amountTextField.focus = false;
optionalMessage.focus = false;
if (sendMoneyStep.referrer === "connections") {
Commerce.transferHfcToUsername(sendMoneyStep.selectedRecipientUserName, parseInt(amountTextField.text), optionalMessage.text);
} else if (sendMoneyStep.referrer === "nearby") {
Commerce.transferHfcToNode(sendMoneyStep.selectedRecipientNodeID, parseInt(amountTextField.text), optionalMessage.text);
}
}
}
@ -1157,7 +1168,7 @@ Item {
// Text size
size: 18;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.white;
verticalAlignment: Text.AlignVCenter;
}
@ -1172,7 +1183,7 @@ Item {
anchors.verticalCenter: parent.verticalCenter;
height: 50;
// Style
color: hifi.colors.baseGray;
color: hifi.colors.lightGrayText;
}
RalewaySemiBold {
@ -1186,7 +1197,7 @@ Item {
height: 50;
// Style
size: 22;
color: hifi.colors.baseGray;
color: hifi.colors.darkGray;
}
}

14
interface/resources/qml/hifi/commerce/wallet/sendMoney/images/connection.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1398BB;}
</style>
<path class="st0" d="M256.8,42C138.5,42,42.2,138.3,42.2,256.6s96.3,214.6,214.6,214.6c118.3,0,214.6-96.3,214.6-214.6
S375.1,42,256.8,42z M256.8,444.4C153.2,444.4,69,360.1,69,256.6C69,153,153.2,68.7,256.8,68.7c103.6,0,187.8,84.3,187.8,187.8
C444.6,360.1,360.4,444.4,256.8,444.4z"/>
<circle class="st0" cx="260.6" cy="189.4" r="60.6"/>
<path class="st0" d="M306.4,282.6h-87.6c-36.5,0-66.4,30.2-66.4,66.7v33.9c29.3,22.6,65.4,36.1,105,36.1c44.4,0,84.7-17,115.2-44.7
v-25.3C372.7,312.7,342.9,282.6,306.4,282.6z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 921 B

BIN
interface/resources/qml/hifi/commerce/wallet/sendMoney/images/loader.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 58 KiB

27
interface/resources/qml/hifi/commerce/wallet/sendMoney/images/nearby.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1398BB;}
</style>
<path class="st0" d="M144.3,155c-8.7-8.8-16.7-17.1-25.2-25.7c-22.4,25.4-36.6,53.9-43.6,86.2c-26.9,125.7,81.2,241.5,208.6,223.4
C385.9,424.4,458,329.2,443.5,228.2c-4.4-30.6-15.4-58.9-34.1-83.9c-1.6-2.2-3.3-4.3-4.7-6.6c-4.4-7.4-3.1-14.9,3-19.5
c6-4.5,14.2-3.6,19.2,3.5c8.2,11.7,16.6,23.4,22.9,36.1c41.9,84.9,25.7,181.7-41,248.7c-67,67.4-175.1,81.3-257.1,33.3
c-35.3-20.7-63.1-48.6-82.7-84.5c-41-75-31.5-172.5,23.4-237.9c2.2-2.7,4.4-5.4,7.1-8.7c-8.1-8.5-16.1-16.9-24-25.3
c-7.2-7.7-7.9-16.1-1.9-22.1c5.9-5.9,15-5.1,22.1,2.4c56.8,59.5,113.6,119,170.4,178.6c7.2,7.6,7.8,15.4,1.9,21.4
c-6.1,6.2-14.7,5.5-22-2c-10.2-10.4-20.2-21-30.3-31.5c-17.4,24.7-3.3,62,27.2,72.5c23,7.9,48.8-2,60.7-23.1
c1.2-2.1,2.3-4.3,3.7-6.3c4.5-6.6,11.7-8.6,18.3-5c6.6,3.5,8.9,10.5,5.9,18.1c-12.4,31.6-47.9,52.2-82.3,47.7
c-36.1-4.8-64.3-32.6-68.4-67.7c-2.4-20.7,2.4-39.7,14.9-57.5c-10.4-10.9-20.8-21.6-31.7-33c-9.7,10.8-16.2,22.7-20.9,35.7
c-31.3,86.4,38.9,175.1,130.1,164.3c74-8.7,122.3-80.9,103.3-154.3c-3.4-13.1-1-20.2,7.8-22.7c9.5-2.8,15.2,1.8,19.2,15.4
c20.1,67.4-16,144.8-79.8,175.3c-67.5,32.2-147.5,9.7-188.8-49c-37.8-53.8-36.1-127.7,4.7-179.1C141.2,159.4,142.5,157.4,144.3,155z
"/>
<path class="st0" d="M236.2,262.2c-4.2-13.6,3.4-28.2,16.8-32.4c13.5-4.2,28.1,3.3,32.5,16.8c4.5,13.9-3.1,28.4-17.2,32.7
C254.6,283.5,240.4,275.9,236.2,262.2z"/>
<path class="st0" d="M319.6,101.9c-3.7-11,1.8-22.3,12.7-26c11.3-3.9,22.8,1.9,26.4,13.2c3.5,11-2.3,22.2-13.2,25.8
C334.5,118.5,323.3,112.9,319.6,101.9z"/>
<path class="st0" d="M214.9,66.2c3.2,10.2-2.2,20.5-12.5,23.6c-9.8,3-20-2.3-23.3-12c-3.3-9.9,2.2-20.8,12-24
C201.1,50.5,211.8,56.2,214.9,66.2z"/>
<path class="st0" d="M230.8,164.6c-3.7-11,1.8-22.3,12.7-26c11.3-3.9,22.8,1.9,26.4,13.2c3.5,11-2.3,22.2-13.2,25.8
C245.7,181.2,234.5,175.6,230.8,164.6z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB