tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: power layouts for power button widget

pull/11206/head
Artem Dzhereleiko 2 years ago
parent
8aea90b0be
commit
078c5be6d4
5 changed files with 267 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 164
      ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts
  2. 3
      ui-ngx/src/assets/locale/locale.constant-en_US.json
  3. 51
      ui-ngx/src/assets/widget/power-button/default-power-layout.svg
  4. 38
      ui-ngx/src/assets/widget/power-button/outlined-power-layout.svg
  5. 34
      ui-ngx/src/assets/widget/power-button/simplified-power-layout.svg

164
ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts
View File

@ -24,7 +24,7 @@ import {
SetValueSettings,
ValueToDataType
} from '@shared/models/action-widget-settings.models';
import { Circle, Effect, Element, G, Gradient, Runner, Svg, Text, Timeline } from '@svgdotjs/svg.js';
import { Circle, Effect, Element, G, Gradient, Path, Runner, Svg, Text, Timeline } from '@svgdotjs/svg.js';
import '@svgdotjs/svg.filter.js';
import tinycolor from 'tinycolor2';
import { WidgetContext } from '@home/models/widget-component.models';
@ -35,7 +35,10 @@ export enum PowerButtonLayout {
outlined = 'outlined',
default_volume = 'default_volume',
simplified_volume = 'simplified_volume',
outlined_volume = 'outlined_volume'
outlined_volume = 'outlined_volume',
default_power = 'default_power',
simplified_power = 'simplified_power',
outlined_power = 'outlined_power'
}
export const powerButtonLayouts = Object.keys(PowerButtonLayout) as PowerButtonLayout[];
@ -47,7 +50,10 @@ export const powerButtonLayoutTranslations = new Map<PowerButtonLayout, string>(
[PowerButtonLayout.outlined, 'widgets.power-button.layout-outlined'],
[PowerButtonLayout.default_volume, 'widgets.power-button.layout-default-volume'],
[PowerButtonLayout.simplified_volume, 'widgets.power-button.layout-simplified-volume'],
[PowerButtonLayout.outlined_volume, 'widgets.power-button.layout-outlined-volume']
[PowerButtonLayout.outlined_volume, 'widgets.power-button.layout-outlined-volume'],
[PowerButtonLayout.default_power, 'widgets.power-button.layout-default-power'],
[PowerButtonLayout.simplified_power, 'widgets.power-button.layout-simplified-power'],
[PowerButtonLayout.outlined_power, 'widgets.power-button.layout-outlined-power']
]
);
@ -58,7 +64,10 @@ export const powerButtonLayoutImages = new Map<PowerButtonLayout, string>(
[PowerButtonLayout.outlined, 'assets/widget/power-button/outlined-layout.svg'],
[PowerButtonLayout.default_volume, 'assets/widget/power-button/default-volume-layout.svg'],
[PowerButtonLayout.simplified_volume, 'assets/widget/power-button/simplified-volume-layout.svg'],
[PowerButtonLayout.outlined_volume, 'assets/widget/power-button/outlined-volume-layout.svg']
[PowerButtonLayout.outlined_volume, 'assets/widget/power-button/outlined-volume-layout.svg'],
[PowerButtonLayout.default_power, 'assets/widget/power-button/default-power-layout.svg'],
[PowerButtonLayout.simplified_power, 'assets/widget/power-button/simplified-power-layout.svg'],
[PowerButtonLayout.outlined_power, 'assets/widget/power-button/outlined-power-layout.svg']
]
);
@ -242,6 +251,12 @@ export abstract class PowerButtonShape {
return new SimplifiedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick);
case PowerButtonLayout.outlined_volume:
return new OutlinedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick);
case PowerButtonLayout.default_power:
return new DefaultVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true);
case PowerButtonLayout.simplified_power:
return new SimplifiedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true);
case PowerButtonLayout.outlined_power:
return new OutlinedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true);
}
}
@ -249,6 +264,13 @@ export abstract class PowerButtonShape {
protected readonly onLabel: string;
protected readonly offLabel: string;
protected powerCircle = 'M13 4.67063C13 3.65748 12.0377 2.91866 11.0946 3.28889C4.59815 5.83928 0 12.1545 0 19.5412C0 29.1835 ' +
'7.83502 37.0001 17.5 37.0001C27.165 37.0001 35 29.1835 35 19.5412C35 12.1545 30.4019 5.83928 23.9054 3.28889C22.9623 2.91866 22 ' +
'3.65748 22 4.67063C22 5.33931 22.434 5.92434 23.0519 6.17991C28.3077 8.35375 32 13.5209 32 19.5412C32 27.52 25.5148 34.0001 17.5 ' +
'34.0001C9.48521 34.0001 3 27.52 3 19.5412C3 13.5209 6.69234 8.35374 11.9481 6.17991C12.566 5.92434 13 5.33931 13 4.67063Z';
protected powerLine = 'M16.5 1C16.5 0.447716 16.9477 0 17.5 0C18.0523 0 18.5 0.447715 18.5 1V17C18.5 ' +
'17.5523 18.0523 18 17.5 18C16.9477 18 16.5 17.5523 16.5 17V1Z';
protected backgroundShape: Circle;
protected hoverShape: Circle;
protected hovered = false;
@ -260,7 +282,8 @@ export abstract class PowerButtonShape {
protected settings: PowerButtonWidgetSettings,
protected value: boolean,
protected disabled: boolean,
protected onClick: () => void) {
protected onClick: () => void,
protected iconMode: boolean = false) {
this.colors = createPowerButtonShapeColors(this.settings);
this.onLabel = this.widgetContext.translate.instant('widgets.power-button.on-label').toUpperCase();
this.offLabel = this.widgetContext.translate.instant('widgets.power-button.off-label').toUpperCase();
@ -702,6 +725,10 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
private offLabelShape: Text;
private onCircleShape: Circle;
private onLabelShape: Text;
private offPowerSymbolCircle: Path;
private offPowerSymbolLine: Path;
private onPowerSymbolCircle: Path;
private onPowerSymbolLine: Path;
private pressedTimeline: Timeline;
private centerGroup: G;
@ -723,15 +750,30 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
add.stop(1, '#FFFFFF', 1);
}).from(0.832, 0.1188).to(0.268, 0.92);
this.centerGroup = this.svgShape.group();
this.offLabelShape = this.createOffLabel('400').addTo(this.centerGroup);
if (this.iconMode) {
this.offPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.centerGroup);
this.offPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.centerGroup);
} else {
this.offLabelShape = this.createOffLabel('400').addTo(this.centerGroup);
}
this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 24).center(cx, cy);
this.onLabelShape = this.createOnLabel('400');
this.createMask(this.onCircleShape, [this.onLabelShape]);
if (this.iconMode) {
this.onPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy);
this.onPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12);
} else {
this.onLabelShape = this.createOnLabel('400');
}
this.createMask(this.onCircleShape, this.iconMode ? [this.onPowerSymbolCircle, this.onPowerSymbolLine] : [this.onLabelShape]);
this.innerShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 24, cx, cy, 3, 0.3);
this.pressedTimeline = new Timeline();
this.centerGroup.timeline(this.pressedTimeline);
this.onLabelShape.timeline(this.pressedTimeline);
if (this.iconMode) {
this.onPowerSymbolCircle.timeline(this.pressedTimeline);
this.onPowerSymbolLine.timeline(this.pressedTimeline);
} else {
this.onLabelShape.timeline(this.pressedTimeline);
}
this.innerShadow.timeline(this.pressedTimeline);
}
@ -751,7 +793,12 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
this.innerBorder.fill(this.innerBorderGradient);
this.innerBorder.attr({ 'fill-opacity': 1 });
}
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
if (this.iconMode) {
this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
} else {
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
@ -776,14 +823,24 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
this.innerShadow.show();
const pressedScale = 0.75;
powerButtonAnimation(this.centerGroup).transform({scale: pressedScale});
powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale, origin: {x: cx, y: cy}});
if (this.iconMode) {
powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: pressedScale, origin: {x: cx, y: cy}});
powerButtonAnimation(this.onPowerSymbolLine).transform({scale: pressedScale, origin: {x: cx, y: cy}});
} else {
powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale, origin: {x: cx, y: cy}});
}
this.innerShadow.animate(6, 0.6);
}
protected onPressEnd() {
this.pressedTimeline.finish();
powerButtonAnimation(this.centerGroup).transform({scale: 1});
powerButtonAnimation(this.onLabelShape).transform({scale: 1, origin: {x: cx, y: cy}});
if (this.iconMode) {
powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: 1, origin: {x: cx, y: cy}});
powerButtonAnimation(this.onPowerSymbolLine).transform({scale: 1, origin: {x: cx, y: cy}});
} else {
powerButtonAnimation(this.onLabelShape).transform({scale: 1, origin: {x: cx, y: cy}});
}
this.innerShadow.animateRestore().after(() => {
if (this.disabled) {
this.innerShadow.hide();
@ -799,6 +856,10 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape {
private outerBorderMask: Circle;
private offLabelShape: Text;
private onLabelShape: Text;
private offPowerSymbolCircle: Path;
private offPowerSymbolLine: Path;
private onPowerSymbolCircle: Path;
private onPowerSymbolLine: Path;
private innerShadow: InnerShadowCircle;
private pressedShadow: InnerShadowCircle;
private pressedTimeline: Timeline;
@ -812,9 +873,17 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape {
this.outerBorderMask = this.svgShape.circle(powerButtonShapeSize - 4).center(cx, cy);
this.createMask(this.outerBorder, [this.outerBorderMask]);
this.centerGroup = this.svgShape.group();
this.offLabelShape = this.createOffLabel().addTo(this.centerGroup);
this.onCenterGroup = this.svgShape.group();
this.onLabelShape = this.createOnLabel().addTo(this.onCenterGroup);
if (this.iconMode) {
this.offPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.centerGroup);
this.offPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.centerGroup);
this.onPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.onCenterGroup);
this.onPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.onCenterGroup);
} else {
this.offLabelShape = this.createOffLabel().addTo(this.centerGroup);
this.onLabelShape = this.createOnLabel().addTo(this.onCenterGroup);
}
this.innerShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 4, cx, cy, 3, 0.3);
this.pressedShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 4, cx, cy, 0, 0);
this.pressedTimeline = new Timeline();
@ -824,8 +893,15 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape {
}
protected drawColorState(mainColor: PowerButtonColor){
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.onLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
if (this.iconMode) {
this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.onPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.onPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
} else {
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.onLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
}
protected drawOff() {
@ -876,6 +952,10 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
private offLabelShape: Text;
private onCircleShape: Circle;
private onLabelShape: Text;
private offPowerSymbolCircle: Path;
private offPowerSymbolLine: Path;
private onPowerSymbolCircle: Path;
private onPowerSymbolLine: Path;
private pressedShadow: InnerShadowCircle;
private pressedTimeline: Timeline;
private centerGroup: G;
@ -895,19 +975,42 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
this.innerBorderMask = this.svgShape.circle(powerButtonShapeSize - 30).center(cx, cy);
this.createMask(this.innerBorder, [this.innerBorderMask]);
this.centerGroup = this.svgShape.group();
this.offLabelShape = this.createOffLabel('800').addTo(this.centerGroup);
if (this.iconMode) {
this.powerCircle = 'M12 2.95698C12 1.45236 10.4775 0.438524 9.19424 1.22416C3.68417 4.59764 0 10.7283 0 17.7316C0 ' +
'28.3732 8.50659 37 19 37C29.4934 37 38 28.3732 38 17.7316C38 10.7283 34.3158 4.59764 28.8058 1.22416C27.5225 ' +
'0.438524 26 1.45236 26 2.95698C26 3.73878 26.4365 4.44718 27.0911 4.87461C31.2354 7.58066 34 12.3083 34 ' +
'17.7316C34 26.2172 27.2316 33 19 33C10.7684 33 4 26.2172 4 17.7316C4 12.3084 6.76462 7.58066 10.9089 ' +
'4.87461C11.5635 4.44718 12 3.73878 12 2.95698Z';
this.powerLine = 'M0 2.5C0 1.11929 1.11929 0 2.5 0C3.88071 0 5 1.11929 5 2.5V15.5C5 16.8807 3.88071 18 ' +
'2.5 18C1.11929 18 0 16.8807 0 15.5V2.5Z';
this.offPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.centerGroup);
this.offPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.centerGroup);
} else {
this.offLabelShape = this.createOffLabel('800').addTo(this.centerGroup);
}
this.onCenterGroup = this.svgShape.group();
this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 30).center(cx, cy)
.addTo(this.onCenterGroup);
this.onLabelShape = this.createOnLabel('800');
this.createMask(this.onCircleShape, [this.onLabelShape]);
if (this.iconMode) {
this.onPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy);
this.onPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12);
} else {
this.onLabelShape = this.createOnLabel('800');
}
this.createMask(this.onCircleShape, this.iconMode ? [this.onPowerSymbolCircle, this.onPowerSymbolLine] : [this.onLabelShape]);
this.pressedShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 30, cx, cy, 0, 0);
this.backgroundShape.addClass('tb-small-shadow');
this.pressedTimeline = new Timeline();
this.centerGroup.timeline(this.pressedTimeline);
this.onCenterGroup.timeline(this.pressedTimeline);
this.onLabelShape.timeline(this.pressedTimeline);
if (this.iconMode) {
this.onPowerSymbolCircle.timeline(this.pressedTimeline);
this.onPowerSymbolLine.timeline(this.pressedTimeline);
} else {
this.onLabelShape.timeline(this.pressedTimeline);
}
this.pressedShadow.timeline(this.pressedTimeline);
}
@ -919,7 +1022,12 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
this.outerBorder.attr({ 'fill-opacity': 1 });
}
this.innerBorder.attr({fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
if (this.iconMode) {
this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
} else {
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
}
@ -940,7 +1048,12 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
const pressedScale = 0.75;
powerButtonAnimation(this.centerGroup).transform({scale: pressedScale});
powerButtonAnimation(this.onCenterGroup).transform({scale: 0.98});
powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}});
if (this.iconMode) {
powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}});
powerButtonAnimation(this.onPowerSymbolLine).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}});
} else {
powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}});
}
this.pressedShadow.animate(6, 0.6);
}
@ -948,7 +1061,12 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
this.pressedTimeline.finish();
powerButtonAnimation(this.centerGroup).transform({scale: 1});
powerButtonAnimation(this.onCenterGroup).transform({scale: 1});
powerButtonAnimation(this.onLabelShape).transform({scale: 1, origin: {x: cx, y: cy}});
if (this.iconMode) {
powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: 1, origin: {x: cx, y: cy}});
powerButtonAnimation(this.onPowerSymbolLine).transform({scale: 1, origin: {x: cx, y: cy}});
} else {
powerButtonAnimation(this.onLabelShape).transform({scale: 1, origin: {x: cx, y: cy}});
}
this.pressedShadow.animateRestore();
}

3
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -5621,6 +5621,9 @@
"layout-default-volume": "Default.Volume",
"layout-simplified-volume": "Simplified.Volume",
"layout-outlined-volume": "Outlined.Volume",
"layout-default-power": "Default.Power",
"layout-simplified-power": "Simplified.Power",
"layout-outlined-power": "Outlined.Power",
"main": "Main",
"background": "Background",
"power-on-colors": "Power 'On' colors",

51
ui-ngx/src/assets/widget/power-button/default-power-layout.svg
View File

@ -0,0 +1,51 @@
<svg width="213" height="213" viewBox="0 0 213 213" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_5122_9596)">
<rect x="8" y="4" width="197" height="197" rx="4" fill="white" shape-rendering="crispEdges"/>
<path d="M37.4766 36.7578H34.5156V35.2031H37.4766C37.9922 35.2031 38.4089 35.1198 38.7266 34.9531C39.0443 34.7865 39.276 34.5573 39.4219 34.2656C39.5729 33.9688 39.6484 33.6302 39.6484 33.25C39.6484 32.8906 39.5729 32.5547 39.4219 32.2422C39.276 31.9245 39.0443 31.6693 38.7266 31.4766C38.4089 31.2839 37.9922 31.1875 37.4766 31.1875H35.1172V41H33.1562V29.625H37.4766C38.3568 29.625 39.1042 29.7812 39.7188 30.0938C40.3385 30.401 40.8099 30.8281 41.1328 31.375C41.4557 31.9167 41.6172 32.5365 41.6172 33.2344C41.6172 33.9688 41.4557 34.599 41.1328 35.125C40.8099 35.651 40.3385 36.0547 39.7188 36.3359C39.1042 36.6172 38.3568 36.7578 37.4766 36.7578ZM42.9688 36.8672V36.6875C42.9688 36.0781 43.0573 35.513 43.2344 34.9922C43.4115 34.4661 43.6667 34.0104 44 33.625C44.3385 33.2344 44.75 32.9323 45.2344 32.7188C45.724 32.5 46.276 32.3906 46.8906 32.3906C47.5104 32.3906 48.0625 32.5 48.5469 32.7188C49.0365 32.9323 49.4505 33.2344 49.7891 33.625C50.1276 34.0104 50.3854 34.4661 50.5625 34.9922C50.7396 35.513 50.8281 36.0781 50.8281 36.6875V36.8672C50.8281 37.4766 50.7396 38.0417 50.5625 38.5625C50.3854 39.0833 50.1276 39.5391 49.7891 39.9297C49.4505 40.3151 49.0391 40.6172 48.5547 40.8359C48.0703 41.0495 47.5208 41.1562 46.9062 41.1562C46.2865 41.1562 45.7318 41.0495 45.2422 40.8359C44.7578 40.6172 44.3464 40.3151 44.0078 39.9297C43.6693 39.5391 43.4115 39.0833 43.2344 38.5625C43.0573 38.0417 42.9688 37.4766 42.9688 36.8672ZM44.8516 36.6875V36.8672C44.8516 37.2474 44.8906 37.6068 44.9688 37.9453C45.0469 38.2839 45.1693 38.5807 45.3359 38.8359C45.5026 39.0911 45.7161 39.2917 45.9766 39.4375C46.237 39.5833 46.5469 39.6562 46.9062 39.6562C47.2552 39.6562 47.5573 39.5833 47.8125 39.4375C48.0729 39.2917 48.2865 39.0911 48.4531 38.8359C48.6198 38.5807 48.7422 38.2839 48.8203 37.9453C48.9036 37.6068 48.9453 37.2474 48.9453 36.8672V36.6875C48.9453 36.3125 48.9036 35.9583 48.8203 35.625C48.7422 35.2865 48.6172 34.987 48.4453 34.7266C48.2786 34.4661 48.0651 34.263 47.8047 34.1172C47.5495 33.9661 47.2448 33.8906 46.8906 33.8906C46.5365 33.8906 46.2292 33.9661 45.9688 34.1172C45.7135 34.263 45.5026 34.4661 45.3359 34.7266C45.1693 34.987 45.0469 35.2865 44.9688 35.625C44.8906 35.9583 44.8516 36.3125 44.8516 36.6875ZM54.9531 39.125L56.9062 32.5469H58.1094L57.7812 34.5156L55.8125 41H54.7344L54.9531 39.125ZM53.8047 32.5469L55.3281 39.1562L55.4531 41H54.25L51.9609 32.5469H53.8047ZM59.9375 39.0781L61.4141 32.5469H63.25L60.9688 41H59.7656L59.9375 39.0781ZM58.3125 32.5469L60.2422 39.0469L60.4844 41H59.4062L57.4141 34.5078L57.0859 32.5469H58.3125ZM68.5078 41.1562C67.8828 41.1562 67.3177 41.0547 66.8125 40.8516C66.3125 40.6432 65.8854 40.3542 65.5312 39.9844C65.1823 39.6146 64.9141 39.1797 64.7266 38.6797C64.5391 38.1797 64.4453 37.6406 64.4453 37.0625V36.75C64.4453 36.0885 64.5417 35.4896 64.7344 34.9531C64.9271 34.4167 65.1953 33.9583 65.5391 33.5781C65.8828 33.1927 66.2891 32.8984 66.7578 32.6953C67.2266 32.4922 67.7344 32.3906 68.2812 32.3906C68.8854 32.3906 69.4141 32.4922 69.8672 32.6953C70.3203 32.8984 70.6953 33.1849 70.9922 33.5547C71.2943 33.9193 71.5182 34.3542 71.6641 34.8594C71.8151 35.3646 71.8906 35.9219 71.8906 36.5312V37.3359H65.3594V35.9844H70.0312V35.8359C70.0208 35.4974 69.9531 35.1797 69.8281 34.8828C69.7083 34.5859 69.5234 34.3464 69.2734 34.1641C69.0234 33.9818 68.6901 33.8906 68.2734 33.8906C67.9609 33.8906 67.6823 33.9583 67.4375 34.0938C67.1979 34.224 66.9974 34.4141 66.8359 34.6641C66.6745 34.9141 66.5495 35.2161 66.4609 35.5703C66.3776 35.9193 66.3359 36.3125 66.3359 36.75V37.0625C66.3359 37.4323 66.3854 37.776 66.4844 38.0938C66.5885 38.4062 66.7396 38.6797 66.9375 38.9141C67.1354 39.1484 67.375 39.3333 67.6562 39.4688C67.9375 39.599 68.2578 39.6641 68.6172 39.6641C69.0703 39.6641 69.474 39.5729 69.8281 39.3906C70.1823 39.2083 70.4896 38.9505 70.75 38.6172L71.7422 39.5781C71.5599 39.8438 71.3229 40.099 71.0312 40.3438C70.7396 40.5833 70.3828 40.7786 69.9609 40.9297C69.5443 41.0807 69.0599 41.1562 68.5078 41.1562ZM75.5 34.1562V41H73.6172V32.5469H75.4141L75.5 34.1562ZM78.0859 32.4922L78.0703 34.2422C77.9557 34.2214 77.8307 34.2057 77.6953 34.1953C77.5651 34.1849 77.4349 34.1797 77.3047 34.1797C76.9818 34.1797 76.6979 34.2266 76.4531 34.3203C76.2083 34.4089 76.0026 34.5391 75.8359 34.7109C75.6745 34.8776 75.5495 35.0807 75.4609 35.3203C75.3724 35.5599 75.3203 35.8281 75.3047 36.125L74.875 36.1562C74.875 35.625 74.9271 35.1328 75.0312 34.6797C75.1354 34.2266 75.2917 33.8281 75.5 33.4844C75.7135 33.1406 75.9792 32.8724 76.2969 32.6797C76.6198 32.487 76.9922 32.3906 77.4141 32.3906C77.5286 32.3906 77.651 32.401 77.7812 32.4219C77.9167 32.4427 78.0182 32.4661 78.0859 32.4922Z" fill="black" fill-opacity="0.87"/>
<g filter="url(#filter1_i_5122_9596)">
<path d="M153 120.5C153 145.629 132.181 166 106.5 166C80.8188 166 60 145.629 60 120.5C60 95.371 80.8188 75 106.5 75C132.181 75 153 95.371 153 120.5Z" fill="#3F52DD"/>
</g>
<path d="M152 120.5C152 145.056 131.65 165 106.5 165C81.3504 165 61 145.056 61 120.5C61 95.9437 81.3504 76 106.5 76C131.65 76 152 95.9437 152 120.5Z" stroke="white" stroke-width="2"/>
<g filter="url(#filter2_d_5122_9596)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M106.5 176C137.704 176 163 151.152 163 120.5C163 89.8482 137.704 65 106.5 65C75.2959 65 50 89.8482 50 120.5C50 151.152 75.2959 176 106.5 176ZM106.5 166C132.181 166 153 145.629 153 120.5C153 95.371 132.181 75 106.5 75C80.8188 75 60 95.371 60 120.5C60 145.629 80.8188 166 106.5 166Z" fill="url(#paint0_linear_5122_9596)"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M102 105.671C102 104.657 101.038 103.919 100.095 104.289C93.5981 106.839 89 113.155 89 120.541C89 130.183 96.835 138 106.5 138C116.165 138 124 130.183 124 120.541C124 113.155 119.402 106.839 112.905 104.289C111.962 103.919 111 104.657 111 105.671C111 106.339 111.434 106.924 112.052 107.18C117.308 109.354 121 114.521 121 120.541C121 128.52 114.515 135 106.5 135C98.4852 135 92 128.52 92 120.541C92 114.521 95.6923 109.354 100.948 107.18C101.566 106.924 102 106.339 102 105.671Z" fill="white"/>
<path d="M105.5 102C105.5 101.448 105.948 101 106.5 101C107.052 101 107.5 101.448 107.5 102V118C107.5 118.552 107.052 119 106.5 119C105.948 119 105.5 118.552 105.5 118V102Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_5122_9596" x="0" y="0" width="213" height="213" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5122_9596"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5122_9596" result="shape"/>
</filter>
<filter id="filter1_i_5122_9596" x="55" y="75" width="98" height="96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-5" dy="5"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_5122_9596"/>
</filter>
<filter id="filter2_d_5122_9596" x="42" y="61" width="129" height="127" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5122_9596"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5122_9596" result="shape"/>
</filter>
<linearGradient id="paint0_linear_5122_9596" x1="72.3964" y1="165" x2="136.019" y2="74.4248" gradientUnits="userSpaceOnUse">
<stop stop-color="#CCCCCC"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

38
ui-ngx/src/assets/widget/power-button/outlined-power-layout.svg
View File

@ -0,0 +1,38 @@
<svg width="213" height="213" viewBox="0 0 213 213" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_5122_59178)">
<rect x="8" y="4" width="197" height="197" rx="4" fill="white" shape-rendering="crispEdges"/>
<path d="M37.4766 36.7578H34.5156V35.2031H37.4766C37.9922 35.2031 38.4089 35.1198 38.7266 34.9531C39.0443 34.7865 39.276 34.5573 39.4219 34.2656C39.5729 33.9688 39.6484 33.6302 39.6484 33.25C39.6484 32.8906 39.5729 32.5547 39.4219 32.2422C39.276 31.9245 39.0443 31.6693 38.7266 31.4766C38.4089 31.2839 37.9922 31.1875 37.4766 31.1875H35.1172V41H33.1562V29.625H37.4766C38.3568 29.625 39.1042 29.7812 39.7188 30.0938C40.3385 30.401 40.8099 30.8281 41.1328 31.375C41.4557 31.9167 41.6172 32.5365 41.6172 33.2344C41.6172 33.9688 41.4557 34.599 41.1328 35.125C40.8099 35.651 40.3385 36.0547 39.7188 36.3359C39.1042 36.6172 38.3568 36.7578 37.4766 36.7578ZM42.9688 36.8672V36.6875C42.9688 36.0781 43.0573 35.513 43.2344 34.9922C43.4115 34.4661 43.6667 34.0104 44 33.625C44.3385 33.2344 44.75 32.9323 45.2344 32.7188C45.724 32.5 46.276 32.3906 46.8906 32.3906C47.5104 32.3906 48.0625 32.5 48.5469 32.7188C49.0365 32.9323 49.4505 33.2344 49.7891 33.625C50.1276 34.0104 50.3854 34.4661 50.5625 34.9922C50.7396 35.513 50.8281 36.0781 50.8281 36.6875V36.8672C50.8281 37.4766 50.7396 38.0417 50.5625 38.5625C50.3854 39.0833 50.1276 39.5391 49.7891 39.9297C49.4505 40.3151 49.0391 40.6172 48.5547 40.8359C48.0703 41.0495 47.5208 41.1562 46.9062 41.1562C46.2865 41.1562 45.7318 41.0495 45.2422 40.8359C44.7578 40.6172 44.3464 40.3151 44.0078 39.9297C43.6693 39.5391 43.4115 39.0833 43.2344 38.5625C43.0573 38.0417 42.9688 37.4766 42.9688 36.8672ZM44.8516 36.6875V36.8672C44.8516 37.2474 44.8906 37.6068 44.9688 37.9453C45.0469 38.2839 45.1693 38.5807 45.3359 38.8359C45.5026 39.0911 45.7161 39.2917 45.9766 39.4375C46.237 39.5833 46.5469 39.6562 46.9062 39.6562C47.2552 39.6562 47.5573 39.5833 47.8125 39.4375C48.0729 39.2917 48.2865 39.0911 48.4531 38.8359C48.6198 38.5807 48.7422 38.2839 48.8203 37.9453C48.9036 37.6068 48.9453 37.2474 48.9453 36.8672V36.6875C48.9453 36.3125 48.9036 35.9583 48.8203 35.625C48.7422 35.2865 48.6172 34.987 48.4453 34.7266C48.2786 34.4661 48.0651 34.263 47.8047 34.1172C47.5495 33.9661 47.2448 33.8906 46.8906 33.8906C46.5365 33.8906 46.2292 33.9661 45.9688 34.1172C45.7135 34.263 45.5026 34.4661 45.3359 34.7266C45.1693 34.987 45.0469 35.2865 44.9688 35.625C44.8906 35.9583 44.8516 36.3125 44.8516 36.6875ZM54.9531 39.125L56.9062 32.5469H58.1094L57.7812 34.5156L55.8125 41H54.7344L54.9531 39.125ZM53.8047 32.5469L55.3281 39.1562L55.4531 41H54.25L51.9609 32.5469H53.8047ZM59.9375 39.0781L61.4141 32.5469H63.25L60.9688 41H59.7656L59.9375 39.0781ZM58.3125 32.5469L60.2422 39.0469L60.4844 41H59.4062L57.4141 34.5078L57.0859 32.5469H58.3125ZM68.5078 41.1562C67.8828 41.1562 67.3177 41.0547 66.8125 40.8516C66.3125 40.6432 65.8854 40.3542 65.5312 39.9844C65.1823 39.6146 64.9141 39.1797 64.7266 38.6797C64.5391 38.1797 64.4453 37.6406 64.4453 37.0625V36.75C64.4453 36.0885 64.5417 35.4896 64.7344 34.9531C64.9271 34.4167 65.1953 33.9583 65.5391 33.5781C65.8828 33.1927 66.2891 32.8984 66.7578 32.6953C67.2266 32.4922 67.7344 32.3906 68.2812 32.3906C68.8854 32.3906 69.4141 32.4922 69.8672 32.6953C70.3203 32.8984 70.6953 33.1849 70.9922 33.5547C71.2943 33.9193 71.5182 34.3542 71.6641 34.8594C71.8151 35.3646 71.8906 35.9219 71.8906 36.5312V37.3359H65.3594V35.9844H70.0312V35.8359C70.0208 35.4974 69.9531 35.1797 69.8281 34.8828C69.7083 34.5859 69.5234 34.3464 69.2734 34.1641C69.0234 33.9818 68.6901 33.8906 68.2734 33.8906C67.9609 33.8906 67.6823 33.9583 67.4375 34.0938C67.1979 34.224 66.9974 34.4141 66.8359 34.6641C66.6745 34.9141 66.5495 35.2161 66.4609 35.5703C66.3776 35.9193 66.3359 36.3125 66.3359 36.75V37.0625C66.3359 37.4323 66.3854 37.776 66.4844 38.0938C66.5885 38.4062 66.7396 38.6797 66.9375 38.9141C67.1354 39.1484 67.375 39.3333 67.6562 39.4688C67.9375 39.599 68.2578 39.6641 68.6172 39.6641C69.0703 39.6641 69.474 39.5729 69.8281 39.3906C70.1823 39.2083 70.4896 38.9505 70.75 38.6172L71.7422 39.5781C71.5599 39.8438 71.3229 40.099 71.0312 40.3438C70.7396 40.5833 70.3828 40.7786 69.9609 40.9297C69.5443 41.0807 69.0599 41.1562 68.5078 41.1562ZM75.5 34.1562V41H73.6172V32.5469H75.4141L75.5 34.1562ZM78.0859 32.4922L78.0703 34.2422C77.9557 34.2214 77.8307 34.2057 77.6953 34.1953C77.5651 34.1849 77.4349 34.1797 77.3047 34.1797C76.9818 34.1797 76.6979 34.2266 76.4531 34.3203C76.2083 34.4089 76.0026 34.5391 75.8359 34.7109C75.6745 34.8776 75.5495 35.0807 75.4609 35.3203C75.3724 35.5599 75.3203 35.8281 75.3047 36.125L74.875 36.1562C74.875 35.625 74.9271 35.1328 75.0312 34.6797C75.1354 34.2266 75.2917 33.8281 75.5 33.4844C75.7135 33.1406 75.9792 32.8724 76.2969 32.6797C76.6198 32.487 76.9922 32.3906 77.4141 32.3906C77.5286 32.3906 77.651 32.401 77.7812 32.4219C77.9167 32.4427 78.0182 32.4661 78.0859 32.4922Z" fill="black" fill-opacity="0.87"/>
<g filter="url(#filter1_d_5122_59178)">
<path d="M161.5 120.5C161.5 151.152 136.876 176 106.5 176C76.1243 176 51.5 151.152 51.5 120.5C51.5 89.8482 76.1243 65 106.5 65C136.876 65 161.5 89.8482 161.5 120.5Z" fill="url(#paint0_linear_5122_59178)"/>
</g>
<path d="M146.5 120.5C146.5 143.171 128.34 161.5 106 161.5C83.6596 161.5 65.5 143.171 65.5 120.5C65.5 97.829 83.6596 79.5 106 79.5C128.34 79.5 146.5 97.829 146.5 120.5Z" fill="#3F52DD" stroke="white" stroke-width="5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M99 106.957C99 105.452 97.4775 104.439 96.1942 105.224C90.6842 108.598 87 114.728 87 121.732C87 132.373 95.5066 141 106 141C116.493 141 125 132.373 125 121.732C125 114.728 121.316 108.598 115.806 105.224C114.523 104.439 113 105.452 113 106.957C113 107.739 113.436 108.447 114.091 108.875C118.235 111.581 121 116.308 121 121.732C121 130.217 114.232 137 106 137C97.7684 137 91 130.217 91 121.732C91 116.308 93.7646 111.581 97.9089 108.875C98.5635 108.447 99 107.739 99 106.957Z" fill="white"/>
<path d="M104 104.5C104 103.119 105.119 102 106.5 102C107.881 102 109 103.119 109 104.5V117.5C109 118.881 107.881 120 106.5 120C105.119 120 104 118.881 104 117.5V104.5Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_5122_59178" x="0" y="0" width="213" height="213" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5122_59178"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5122_59178" result="shape"/>
</filter>
<filter id="filter1_d_5122_59178" x="43.5" y="61" width="126" height="127" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5122_59178"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5122_59178" result="shape"/>
</filter>
<linearGradient id="paint0_linear_5122_59178" x1="73.3018" y1="165" x2="137.487" y2="76.0497" gradientUnits="userSpaceOnUse">
<stop stop-color="#CCCCCC"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

34
ui-ngx/src/assets/widget/power-button/simplified-power-layout.svg
View File

@ -0,0 +1,34 @@
<svg width="213" height="213" viewBox="0 0 213 213" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_5122_59199)">
<rect x="8" y="4" width="197" height="197" rx="4" fill="white" shape-rendering="crispEdges"/>
<path d="M37.4766 36.7578H34.5156V35.2031H37.4766C37.9922 35.2031 38.4089 35.1198 38.7266 34.9531C39.0443 34.7865 39.276 34.5573 39.4219 34.2656C39.5729 33.9688 39.6484 33.6302 39.6484 33.25C39.6484 32.8906 39.5729 32.5547 39.4219 32.2422C39.276 31.9245 39.0443 31.6693 38.7266 31.4766C38.4089 31.2839 37.9922 31.1875 37.4766 31.1875H35.1172V41H33.1562V29.625H37.4766C38.3568 29.625 39.1042 29.7812 39.7188 30.0938C40.3385 30.401 40.8099 30.8281 41.1328 31.375C41.4557 31.9167 41.6172 32.5365 41.6172 33.2344C41.6172 33.9688 41.4557 34.599 41.1328 35.125C40.8099 35.651 40.3385 36.0547 39.7188 36.3359C39.1042 36.6172 38.3568 36.7578 37.4766 36.7578ZM42.9688 36.8672V36.6875C42.9688 36.0781 43.0573 35.513 43.2344 34.9922C43.4115 34.4661 43.6667 34.0104 44 33.625C44.3385 33.2344 44.75 32.9323 45.2344 32.7188C45.724 32.5 46.276 32.3906 46.8906 32.3906C47.5104 32.3906 48.0625 32.5 48.5469 32.7188C49.0365 32.9323 49.4505 33.2344 49.7891 33.625C50.1276 34.0104 50.3854 34.4661 50.5625 34.9922C50.7396 35.513 50.8281 36.0781 50.8281 36.6875V36.8672C50.8281 37.4766 50.7396 38.0417 50.5625 38.5625C50.3854 39.0833 50.1276 39.5391 49.7891 39.9297C49.4505 40.3151 49.0391 40.6172 48.5547 40.8359C48.0703 41.0495 47.5208 41.1562 46.9062 41.1562C46.2865 41.1562 45.7318 41.0495 45.2422 40.8359C44.7578 40.6172 44.3464 40.3151 44.0078 39.9297C43.6693 39.5391 43.4115 39.0833 43.2344 38.5625C43.0573 38.0417 42.9688 37.4766 42.9688 36.8672ZM44.8516 36.6875V36.8672C44.8516 37.2474 44.8906 37.6068 44.9688 37.9453C45.0469 38.2839 45.1693 38.5807 45.3359 38.8359C45.5026 39.0911 45.7161 39.2917 45.9766 39.4375C46.237 39.5833 46.5469 39.6562 46.9062 39.6562C47.2552 39.6562 47.5573 39.5833 47.8125 39.4375C48.0729 39.2917 48.2865 39.0911 48.4531 38.8359C48.6198 38.5807 48.7422 38.2839 48.8203 37.9453C48.9036 37.6068 48.9453 37.2474 48.9453 36.8672V36.6875C48.9453 36.3125 48.9036 35.9583 48.8203 35.625C48.7422 35.2865 48.6172 34.987 48.4453 34.7266C48.2786 34.4661 48.0651 34.263 47.8047 34.1172C47.5495 33.9661 47.2448 33.8906 46.8906 33.8906C46.5365 33.8906 46.2292 33.9661 45.9688 34.1172C45.7135 34.263 45.5026 34.4661 45.3359 34.7266C45.1693 34.987 45.0469 35.2865 44.9688 35.625C44.8906 35.9583 44.8516 36.3125 44.8516 36.6875ZM54.9531 39.125L56.9062 32.5469H58.1094L57.7812 34.5156L55.8125 41H54.7344L54.9531 39.125ZM53.8047 32.5469L55.3281 39.1562L55.4531 41H54.25L51.9609 32.5469H53.8047ZM59.9375 39.0781L61.4141 32.5469H63.25L60.9688 41H59.7656L59.9375 39.0781ZM58.3125 32.5469L60.2422 39.0469L60.4844 41H59.4062L57.4141 34.5078L57.0859 32.5469H58.3125ZM68.5078 41.1562C67.8828 41.1562 67.3177 41.0547 66.8125 40.8516C66.3125 40.6432 65.8854 40.3542 65.5312 39.9844C65.1823 39.6146 64.9141 39.1797 64.7266 38.6797C64.5391 38.1797 64.4453 37.6406 64.4453 37.0625V36.75C64.4453 36.0885 64.5417 35.4896 64.7344 34.9531C64.9271 34.4167 65.1953 33.9583 65.5391 33.5781C65.8828 33.1927 66.2891 32.8984 66.7578 32.6953C67.2266 32.4922 67.7344 32.3906 68.2812 32.3906C68.8854 32.3906 69.4141 32.4922 69.8672 32.6953C70.3203 32.8984 70.6953 33.1849 70.9922 33.5547C71.2943 33.9193 71.5182 34.3542 71.6641 34.8594C71.8151 35.3646 71.8906 35.9219 71.8906 36.5312V37.3359H65.3594V35.9844H70.0312V35.8359C70.0208 35.4974 69.9531 35.1797 69.8281 34.8828C69.7083 34.5859 69.5234 34.3464 69.2734 34.1641C69.0234 33.9818 68.6901 33.8906 68.2734 33.8906C67.9609 33.8906 67.6823 33.9583 67.4375 34.0938C67.1979 34.224 66.9974 34.4141 66.8359 34.6641C66.6745 34.9141 66.5495 35.2161 66.4609 35.5703C66.3776 35.9193 66.3359 36.3125 66.3359 36.75V37.0625C66.3359 37.4323 66.3854 37.776 66.4844 38.0938C66.5885 38.4062 66.7396 38.6797 66.9375 38.9141C67.1354 39.1484 67.375 39.3333 67.6562 39.4688C67.9375 39.599 68.2578 39.6641 68.6172 39.6641C69.0703 39.6641 69.474 39.5729 69.8281 39.3906C70.1823 39.2083 70.4896 38.9505 70.75 38.6172L71.7422 39.5781C71.5599 39.8438 71.3229 40.099 71.0312 40.3438C70.7396 40.5833 70.3828 40.7786 69.9609 40.9297C69.5443 41.0807 69.0599 41.1562 68.5078 41.1562ZM75.5 34.1562V41H73.6172V32.5469H75.4141L75.5 34.1562ZM78.0859 32.4922L78.0703 34.2422C77.9557 34.2214 77.8307 34.2057 77.6953 34.1953C77.5651 34.1849 77.4349 34.1797 77.3047 34.1797C76.9818 34.1797 76.6979 34.2266 76.4531 34.3203C76.2083 34.4089 76.0026 34.5391 75.8359 34.7109C75.6745 34.8776 75.5495 35.0807 75.4609 35.3203C75.3724 35.5599 75.3203 35.8281 75.3047 36.125L74.875 36.1562C74.875 35.625 74.9271 35.1328 75.0312 34.6797C75.1354 34.2266 75.2917 33.8281 75.5 33.4844C75.7135 33.1406 75.9792 32.8724 76.2969 32.6797C76.6198 32.487 76.9922 32.3906 77.4141 32.3906C77.5286 32.3906 77.651 32.401 77.7812 32.4219C77.9167 32.4427 78.0182 32.4661 78.0859 32.4922Z" fill="black" fill-opacity="0.87"/>
<g filter="url(#filter1_i_5122_59199)">
<path d="M161.5 120.5C161.5 151.152 136.876 176 106.5 176C76.1243 176 51.5 151.152 51.5 120.5C51.5 89.8482 76.1243 65 106.5 65C136.876 65 161.5 89.8482 161.5 120.5Z" fill="white"/>
</g>
<path d="M160.5 120.5C160.5 150.608 136.315 175 106.5 175C76.6851 175 52.5 150.608 52.5 120.5C52.5 90.3919 76.6851 66 106.5 66C136.315 66 160.5 90.3919 160.5 120.5Z" stroke="#FAFAFA" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M102 105.671C102 104.657 101.038 103.919 100.095 104.289C93.5981 106.839 89 113.155 89 120.541C89 130.183 96.835 138 106.5 138C116.165 138 124 130.183 124 120.541C124 113.155 119.402 106.839 112.905 104.289C111.962 103.919 111 104.657 111 105.671C111 106.339 111.434 106.924 112.052 107.18C117.308 109.354 121 114.521 121 120.541C121 128.52 114.515 135 106.5 135C98.4852 135 92 128.52 92 120.541C92 114.521 95.6923 109.354 100.948 107.18C101.566 106.924 102 106.339 102 105.671Z" fill="#3F52DD"/>
<path d="M105.5 102C105.5 101.448 105.948 101 106.5 101C107.052 101 107.5 101.448 107.5 102V118C107.5 118.552 107.052 119 106.5 119C105.948 119 105.5 118.552 105.5 118V102Z" fill="#3F52DD"/>
</g>
<defs>
<filter id="filter0_d_5122_59199" x="0" y="0" width="213" height="213" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5122_59199"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5122_59199" result="shape"/>
</filter>
<filter id="filter1_i_5122_59199" x="51.5" y="65" width="115" height="116" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="5" dy="5"/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_5122_59199"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

Write Preview
Loading…
Cancel
Save