A different take on designing a Lovelace UI

Perfect, thanks @Mattias_Persson

Another one very impressed by your awesome lovelace design. I’m trying to build something similar by building things up step by step from your resources. So far I have two questions.

What are the weird symbols in the anchor definitions?

anchors:
  ⚓₁: &title
    entity: sensor.placeholder
    tap_action:
      action: none
    hold_action:
      action: none
    type: state-label
  ⚓₂: &title-style
    color: '#bcbebf'
    font-family: SF Text
    font-size: 2.4vw
    font-weight: 500
    max-width: 1px
    cursor: default

I don’t manage to use a standard material design icon on the media card, so e.g. use mdi:audio-video instead the custom apple tv one

- type: conditional
  conditions:
  - entity: input_select.conditional_media
    state: Receiver
  elements:
    - type: custom:button-card
      entity: media_player.pioneer_vsx_922
      custom_fields:
        icon: mdi:audio-video
      style:
        top: 50%
        left: 50%
        width: 100%
      template: media

I’m trying to be clever, they are literally anchors

Icon does not go under custom field, you’d have to use html for that.

I see :slight_smile: Is it just a label, which isn’t used anywhere else then?

I noticed now that normal icons are disabled in the media template and if enabled take up the whole card. I guess I’ll find (or create) some nice cstom icons’s svg code myself :slight_smile:

To clarify you can use this html if you want to use mdi in custom fields.

custom_fields:
  icon_av: >
    <ha-icon icon='mdi:audio-video'></ha-icon>

Say no more. :slight_smile: https://pastebin.com/pe108j94

Basically the button is made the same way as the others.

How have you managed to put the icons in the sidebar footer? It’s - type: icon bit that’s not a card. What is it that makes that possible? Some custom elements or how is it done? Or is it because everything is inside a picture element card and do the hui-card do some trick to get this to work propper?

No, icon is a configuration variable in picture-elements card. No trickery.

type: picture-elements
elements:
  - type: icon
    ...

Just like entity is a configuration variable in entities card.

type: entities
entities:
  - entity: light.kitchen
    ...

Ok not I got it, I think I finally understod you setup and how you have used picture-elements card to be able to put anything anywhere…brilliant :smile:

I’m running into an issue again. I’m most likely overlooking something. I want to change the Media swipe card into just the picture elements with the conditional cards for the different media players. I removed the custom:swipe-card entry, copied the part of the styles to the picture-elements, fixed the indent level but run into an error: Unknown type encountered: picture-elements

          - type: picture-elements
            image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' /%3E"
            style:
              top: 20.35%
              left: 35.8%
              width: 20.97%
              height: 1px
              --ha-card-background: none
              --ha-card-border-radius: .88vw
              --ha-card-box-shadow: none
              image-rendering: crisp-edges
            elements:
              - type: conditional
                conditions:
                  - entity: input_select.conditional_media
                    state: Chromecast TV
                elements:
                  - type: custom:button-card
                    entity: media_player.woonkamer_tv
                    custom_fields:
                      icon: &icon_chromecast >
                        <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M21,3H3C1.89,3 1,3.89 1,5V8H3V5H21V19H14V21H21A2,2 0 0,0 23,19V5C23,3.89 22.1,3 21,3M1,10V12A9,9 0 0,1 10,21H12C12,14.92 7.07,10 1,10M19,7H5V8.63C8.96,9.91 12.09,13.04 13.37,17H19M1,14V16A5,5 0 0,1 6,21H8A7,7 0 0,0 1,14M1,18V21H4A3,3 0 0,0 1,18Z" /></svg>
                    style:
                      top: 50%
                      left: 50%
                      width: 100%
                    template: media
              - type: conditional
                conditions:
                  - entity: input_select.conditional_media
                    state: Eetkamer speakers
                elements:
                  - type: custom:button-card
                    entity: media_player.eetkamer_speaker
                    custom_fields:
                      icon: &icon_cast_audio >
                        <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M2 11V13C7 13 11 17 11 22H13C13 15.9 8.1 11 2 11M20 2H10C8.9 2 8 2.9 8 4V10.5C9 11 9.9 11.7 10.7 12.4C11.6 11 13.2 10 15 10C17.8 10 20 12.2 20 15S17.8 20 15 20H14.8C14.9 20.7 15 21.3 15 22H20C21.1 22 22 21.1 22 20V4C22 2.9 21.1 2 20 2M15 8C13.9 8 13 7.1 13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6S16.1 8 15 8M15 18C14.8 18 14.5 18 14.3 17.9C13.8 16.4 13.1 15.1 12.2 13.9C12.6 12.8 13.7 11.9 15 11.9C16.7 11.9 18 13.2 18 14.9S16.7 18 15 18M2 15V17C4.8 17 7 19.2 7 22H9C9 18.1 5.9 15 2 15M2 19V22H5C5 20.3 3.7 19 2 19" /></svg>
                    style:
                      top: 50%
                      left: 50%
                      width: 100%
                    template: media

OK fixed it, made the picture-elements a custom:hui-element

Hi Matthias

First of all, very nice work :slight_smile:
I am trying to make your sidebar_active sensor, and was hoping to jump right into using most of yours. Only changing to Danish :wink:
I have a sensor that counts all the lights on and I was hoping to use it.
For now I’m just using my media_player.stue as the switches part.
Is it even possible to use a sensor like this? I’m not that comfortable in templating yet…

    sidebar_active:
      value_template: >-
        {% set lights = [states.sensor.number_of_lights_on] %}
        {% set lights_on = lights | selectattr('state','eq','on') | list %}
        {% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
        {% set switches = [states.media_player.stue] %}
        {% set switches_on = switches | selectattr('state','eq','on') | list %} 
        {% set switches_name = switches | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
        {% if (lights_on | length ==0 ) and (switches_on | length > 0) %} 
        {{ switches_name | regex_replace(',([^,]*)$',' og\\1') }} er tændt
        {% elif (lights_on | length ==1) and (switches_on | length == 1) %}
        {{ lights_name }} og {{switches_name }} er tændt
        {% elif (lights_on | length ==1) and (switches_on | length > 1) %}
        {{ lights_name }}, {{ switches_name | regex_replace(',([^,]*)$',' og\\1') }} är på
        {% elif (lights_on | length > 1) and (switches_on | length == 1) %}
        {{ lights_on | length }} lamper og {{ switches_name }} er tændt
        {% elif (lights_on | length > 1 ) and (switches_on | length > 1) %}
        {{ lights_on | length }} lamper, {{ switches_name | regex_replace(',([^,]*)$',' og\\1') }} är på
        {% elif (lights_on | length ==1) and (switches_on | length ==0) %}
        {{ lights_name }} er tændt
        {% elif (lights_on | length >1 ) and (switches_on | length ==0) %}
        {{ lights_on | length}} lamper er tændt
        {% else %} 
        <font color='#6a7377'>Alt er slukket</font> 
        {% endif %}

Sensor does come up, but is only showing “Unavailable”

Thanks in advance :slight_smile:

I would like to implement step by step, starting from the grid and theme.
Can you please direct me to the correct files i need to copy and modify?

I mean which files / directories from the config i need to start and explore in order to implement only the grid and theme?

1 Like

@Mattias_Persson
Trying to use same setup for my mobiles but I must rotate screen to see icon and text in normal scale. How can I adjust/fix that?

Seems that this working like i want.

styles:
   custom_fields:
        icon_fan:
            - top: 9%
            - left: 10%
            - width: 3.5vmax
            - position: absolute

Wow, your work is amazing and thanks for sharing. :smiling_face_with_three_hearts:

Now im trying to convert this to my setup, so I had a couple of questions. :smiley:

I have no plex Server, so I want to see my Apple TV or my PS4 in the First “Media”-Field, but how can I achieve this?
And Instead of Plex, it would be great to have a second “Now playing”-field for my sonos setup. Again, I have no idea how i could do this. :confused:

And last question: I have 3 input_boolean-switches on my setup, but if i click on them, nothing happend. I think, i had to configure them as a seperate template or something like this.

Same here. I’m a noob on HA, and I don’t know hot to start implementing this wonderful UI.

Someone with a lot of patience can explain us what can be a good method to import step by step the UI files, and how to adapt it to our setup?

Thank you very much!

Hi, I’ve almost got everything set up and complete (with my own customizations ofc :slight_smile: ).
I am trying to modify the code for ui-sound to fit my environment. I believe you have one tablet in your use case @Mattias_Persson which has allowed you to define the media_player to play the sound on. However, I have multiple tablets throughout the house. Is there a way to modify the code below to play the sound on whichever tablet is toggling the action? I’m trying to modify media_player.tablet to instead play the sound on whatever tablet is toggling the switch.

ui_sound: &ui_sound |
        [[[ if (entity.state === 'off') {
        hass.callService('media_player', 'play_media', {entity_id: **'media_player.tablet**', media_content_id: '/local/sound/on.m4a', media_content_type: 'music'}); }
        else if (entity.state === 'on') {
        hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/off.m4a', media_content_type: 'music'}); } ]]]

Hello. Noob Here!
Today I tryed to import this UI to my Setup.
I installed the custom components from HACS, then imported only the Theme. Until this point it was ok, but the UI is based on custom icons, pictures and other stuff.

So I started importing the other stuff (files and folders).

After that i changed my configuration.yaml, adding this:

https://pastebin.com/hmTZHbSe

This completely broke my HA. HACS didn’t worked anymore. Main frontend couldn’t appear, and the “experimental” was identical to the normal one but with all the entities inside.

What I wronged? =)

Hi Mattias, i try and fail with my own animated SVG, so i take parts of your´s and mod them to the style i need:-) You have the “Puls” Animation on your Monitor Speaker. I use it, but i want to puls it all the time. I can not find how to set the animation in a loop.
I want it for my Sileno Mower.

                [[[ if (entity.state === 'cleaning') {
                return '<svg viewBox="0 0 279.23 251.86"><style>@keyframes animate{35%{transform: scale(0.8); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);}36%{transform: translateY(0%);}49%{transform: scale(1.25);}63%{transform: scale(0.85); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);}77%{transform: scale(1.15); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);}95%{transform: scale(1);}}.animate{animation: animate 1.4s; transform-origin: center;}@keyframes rubber{0%{transform: scale(1);}40%{transform: scale(1);}49%{transform: scale(0.95);}63%{transform: scale(1);}77%{transform: scale(0.95);}100%{transform: scale(1);}}.rubber{animation: rubber 1.3s; transform-origin: center;}</style>
                <g class="rubber"><path fill="#358438" d="M166.13,0A49,49,0,0,1,187.6,4.56a50.14,50.14,0,0,1,14.4,10,2.77,2.77,0,0,1-.9,4.77,2.55,2.55,0,0,1-2.82-.78A45.31,45.31,0,0,0,175.06,6.24a45.16,45.16,0,0,0-14.62-.48,44.26,44.26,0,0,0-13.68,4.08,46,46,0,0,0-12.35,8.74,2.72,2.72,0,1,1-3.8-3.9,50.25,50.25,0,0,1,19.16-12A46.41,46.41,0,0,1,166.13,0ZM156.9,15.23a35.11,35.11,0,0,0-16.26,9.28,2.66,2.66,0,0,0-.25,4,2.73,2.73,0,0,0,4,0,31.24,31.24,0,0,1,44,.05A2.7,2.7,0,0,0,193,27.34a2.84,2.84,0,0,0-.93-2.9c-7.19-7-15.83-10.31-27.15-10.54C163.11,14.19,159.94,14.46,156.9,15.23Zm-6.38,19.26a2.71,2.71,0,1,0,3.67,4,18.39,18.39,0,0,1,6.36-4,17.2,17.2,0,0,1,9.32-.64,16.73,16.73,0,0,1,8.48,4.47,3,3,0,0,0,3.6.53,2.78,2.78,0,0,0,.94-3.49,11.87,11.87,0,0,0-2.45-2.4,22.12,22.12,0,0,0-14-4.93A22.65,22.65,0,0,0,150.52,34.49ZM267.28,163.42a27.65,27.65,0,0,0-4.44-13c-2.45-3.51-5.75-5.6-10.23-5.07a14.37,14.37,0,0,0-6.63,2.79,36,36,0,0,0-10,11.47,71,71,0,0,0-8.51,23.16,63.69,63.69,0,0,0-.83,19.91c.58,4.56,1.7,9,4.35,12.87,2.52,3.68,5.87,5.86,10.52,5.22a14.61,14.61,0,0,0,7.11-3.17c5.26-4.14,8.83-9.55,11.72-15.46a73,73,0,0,0,5.78-17.06A95.1,95.1,0,0,0,267.88,170C267.72,168.26,267.55,165.84,267.28,163.42ZM251,196.31a12.37,12.37,0,0,1-4.64,4.21,5.18,5.18,0,0,1-7.22-2.16c-1.85-3.15-2.18-6.64-2.06-10.16A34.6,34.6,0,0,1,241.61,172a15.88,15.88,0,0,1,5.6-6.13c3.5-2,6.54-.6,8.17,2.82a20.52,20.52,0,0,1,1.6,8.5A34.26,34.26,0,0,1,251,196.31ZM81.47,214.72c3.69-.44,7.34-1.13,10.6-3.09,3.08-1.86,4.46-4.44,2.51-8.13a20.05,20.05,0,0,0-5.52-6.21,67.15,67.15,0,0,0-18.9-10.11,114.94,114.94,0,0,0-15.68-4.47,82.36,82.36,0,0,0-14.63-2,106.52,106.52,0,0,0-12.38.33,22.7,22.7,0,0,0-10.06,3.06c-2.79,1.73-4.33,4.16-2.5,7.79A19.05,19.05,0,0,0,20,197.85c6.22,5.2,13.46,8.52,21,11.2a106,106,0,0,0,17.57,4.57,109.9,109.9,0,0,0,16.25,1.54C76.55,215.05,79,215,81.47,214.72ZM47.86,185.19a104.19,104.19,0,0,1,18.46,5.22c6.9,2.69,13.53,5.92,19.33,10.63,3.33,2.72,3.17,7.48-.38,9.67a6.79,6.79,0,0,1-2.61.88,58.36,58.36,0,0,1-14-.05c-3.24-.35-6.44-1-9.64-1.64a90.88,90.88,0,0,1-15.42-4.53c-7.19-2.77-14.07-6.1-20-11.15a5.65,5.65,0,0,1-1.64-6.5A5.77,5.77,0,0,1,27,184.06l5.51-.4A94.27,94.27,0,0,1,47.86,185.19ZM184,113.8c-3.32-.55-6.63-1.11-10-1.68a1.75,1.75,0,0,0-1.75.55q-7.41,8-14.87,16c-.24.26-.44.56-.71.91l11.74,3.69a1.07,1.07,0,0,0,1.34-.34c3.86-4.18,7.77-8.31,11.65-12.47,1.84-2,3.66-3.94,5.7-6.15C185.86,114.09,184.91,114,184,113.8Zm19.18,3.13c-3.28-.55-6.57-1.09-9.85-1.66a1.8,1.8,0,0,0-1.83.63c-4.49,4.87-9,9.69-13.54,14.53-1.33,1.43-2.65,2.87-4.11,4.45.72.22,1.27.38,1.82.56l9.1,2.88c.57.18,1,.19,1.37-.47a26.9,26.9,0,0,1,1.72-2.58,76.33,76.33,0,0,1,15.93-17c.36-.27.7-.59,1.21-1ZM151,127.79c.58.18,1.06.33,1.58-.23,5-5.42,10-10.82,15.22-16.41l-2.66-.43c-3.84-.62-7.67-1.25-11.51-1.83a1.44,1.44,0,0,0-1.06.4c-1.14,1.14-2.23,2.33-3.33,3.52-3.41,3.65-6.81,7.32-10.39,11.16ZM140.43,129q-2-.63-4.05-1.29a1.23,1.23,0,0,0-1.44.43c-3.24,3.53-6.52,7-9.79,10.52l-2.53,2.75c4,1.37,7.87,2.61,11.65,4a1.65,1.65,0,0,0,2.16-.58c2.6-2.86,5.26-5.65,7.89-8.48,1.44-1.53,2.86-3.08,4.46-4.81Zm24.69,7.61c-3.64-1.11-7.28-2.18-10.9-3.34a1.27,1.27,0,0,0-1.58.46c-3.22,3.5-6.49,6.95-9.74,10.42-1,1-1.87,2.05-2.85,3.12a2.39,2.39,0,0,0,.46.31c3.72,1.3,7.44,2.61,11.17,3.86a1.25,1.25,0,0,0,1-.34c2.06-2.13,4.09-4.3,6.11-6.47,2.35-2.51,4.68-5,7.07-7.63A5.7,5.7,0,0,0,165.12,136.63Zm-55.87,22.81c3.11,1.14,6.23,2.26,9.32,3.45a1.11,1.11,0,0,0,1.42-.38l11.84-12.75a2.86,2.86,0,0,0,.29-.56c-4-1.35-7.89-2.63-11.75-4a1.3,1.3,0,0,0-1.68.41q-4.59,5-9.23,9.92c-.89,1-1.81,1.86-2.88,3Zm13.15-40.51c3.64,1.11,7.29,2.18,10.91,3.35a1.31,1.31,0,0,0,1.62-.35c4.17-4.51,8.37-9,12.55-13.51a3.47,3.47,0,0,0,.31-.57c-2.91-.47-5.71-.89-8.49-1.41-1.64-.3-3.38-.24-4.9-1.17-.21-.13-.84.14-1.09.4-2.67,2.79-5.31,5.62-7.94,8.44-1.34,1.43-2.65,2.88-4,4.39C121.77,118.68,122.07,118.83,122.4,118.93Zm5.32,6.12c-3-1-6-1.93-9-2.83a1.34,1.34,0,0,0-1.13.35c-3.12,3.27-6.2,6.58-9.28,9.88-.9,1-1.79,1.94-2.8,3l1.94.69c3.3,1.15,6.59,2.3,9.9,3.44a1.25,1.25,0,0,0,1.47-.4c3.32-3.61,6.67-7.19,10-10.78.7-.74,1.38-1.49,2.21-2.39C129.77,125.67,128.74,125.37,127.72,125.05Zm-37.34,27.4c3.66,1.37,7.33,2.72,11,4.09a1.36,1.36,0,0,0,1.7-.45c3.62-3.94,7.28-7.83,10.92-11.75a12.84,12.84,0,0,0,.84-1.05c-.48-.2-.79-.34-1.12-.46-3.4-1.16-6.82-2.28-10.2-3.52a1.65,1.65,0,0,0-2.12.52c-2.62,2.88-5.31,5.71-8,8.56L90,152.15A2.14,2.14,0,0,0,90.38,152.45ZM98.46,160c-3.69-1.37-7.39-2.73-11.08-4.11a1.08,1.08,0,0,0-1.33.4q-4.85,5.23-9.72,10.44c-.36.39-.69.8-1.14,1.32l2.77.72c3,.79,6,1.57,8.92,2.39a2.38,2.38,0,0,0,2.9-.81c1-1.22,2.1-2.28,3.16-3.41L99,160.4A2.85,2.85,0,0,0,98.46,160Zm-29.31,6.6a1.9,1.9,0,0,0,2.15-.71c2.76-3,5.57-6,8.36-9l2.49-2.68c-.19-.18-.26-.28-.35-.32-3.13-1.18-6.27-2.38-9.42-3.51a1.26,1.26,0,0,0-1,.34c-2.51,2.62-5,5.27-7.46,7.91-1.62,1.73-3.22,3.48-5,5.42C62.44,164.91,65.81,165.7,69.15,166.61Zm43.53-46.29c-3.17-1-6.34-2-9.52-2.91a1.36,1.36,0,0,0-1.12.33c-2.7,2.82-5.36,5.67-8,8.52-1.19,1.28-2.36,2.57-3.6,3.93a9.1,9.1,0,0,0,.89.42c3.07,1.07,6.13,2.14,9.22,3.16a1.1,1.1,0,0,0,.91-.32c1.4-1.44,2.76-2.91,4.13-4.38,2.59-2.76,5.17-5.53,7.85-8.41A7.37,7.37,0,0,0,112.68,120.32ZM96.3,136.85c-2.82-1-5.65-1.89-8.45-2.89a1.13,1.13,0,0,0-1.41.43l-8,8.63c-1.12,1.19-2.22,2.41-3.43,3.73,3.39,1.24,6.61,2.4,9.8,3.61A1.05,1.05,0,0,0,86.1,150q5.64-6.07,11.29-12.13a3.6,3.6,0,0,0,.31-.49ZM75.23,125.2c.1.12.2.31.33.35,1.15.3,2.33.53,3.46.88,2,.64,4.09,1.31,6.11,2a1,1,0,0,0,1.33-.35c3.07-3.32,6.18-6.6,9.26-9.91.71-.76,1.38-1.55,2.14-2.41-.43-.17-.64-.27-.87-.34-3-.92-6-1.78-9-2.8a1.54,1.54,0,0,0-2,.66c-2.14,2.52-4.34,5-6.54,7.46a7.18,7.18,0,0,1-1.2.88C77.69,123.13,76.18,123.92,75.23,125.2Zm-5.69,19.53a1.44,1.44,0,0,0,1.9-.53c2.15-2.39,4.39-4.7,6.59-7l4.6-5-10.75-3.86-11.43,13C63.66,142.54,66.62,143.58,69.54,144.73Zm58.1-40.06a18.71,18.71,0,0,1-8.9-3.68c-.5-.38-.84-.34-1.29.15-3.27,3.55-6.57,7.07-9.85,10.6l-1.71,1.85c.19.16.25.26.34.29,3.3,1,6.6,2.06,9.91,3.05a1.15,1.15,0,0,0,.94-.25c2.33-2.45,4.63-4.93,6.93-7.4l4.06-4.34C127.8,104.77,127.73,104.68,127.64,104.67ZM48.09,161.32c1.87.49,3.74,1,5.63,1.43.21.05.56-.19.75-.39,2.91-3.08,5.81-6.18,8.71-9.27,1.39-1.49,2.76-3,4.24-4.58-3-1.13-5.94-2.16-8.8-3.27-.7-.28-1,0-1.35.48a118,118,0,0,0-9.51,15.34C47.93,161.2,48,161.3,48.09,161.32ZM113.17,98.9c-1.91,0-3.9-.33-5.74.06a36.8,36.8,0,0,0-15.66,7.68c-.7.56-1.29,1.25-2,2a3.16,3.16,0,0,0,.45.32c3.33,1,6.67,2.06,10,3.12a1.48,1.48,0,0,0,1.73-.5c2.41-2.64,4.87-5.25,7.31-7.87q2-2.18,4-4.36Zm.87,66.9-2-.74-7.68-2.87a1.16,1.16,0,0,0-1.46.28c-2.89,3.15-5.81,6.26-8.72,9.4a5.15,5.15,0,0,0-.47.79l.19.31a18.17,18.17,0,0,0,2.46-.5c3.78-1.32,7.55-2.69,11.32-4.05l6.3-2.3Zm13.32-4.53,18.84-6.92c-3-1.29-5.91-2.34-8.86-3.33a1.29,1.29,0,0,0-1,.32c-2.05,2.13-4.07,4.31-6.09,6.47-1,1.07-2,2.15-3,3.23Zm33.94-12.55,18.58-7.23c-.22-.21-.27-.28-.32-.3-2.87-.92-5.73-1.84-8.61-2.71-.21-.07-.62.18-.82.39q-3.12,3.3-6.22,6.64l-2.78,3Z"/></svg>'; }
                else { return '<svg viewBox="0 0 50 50"><path fill="##252525" d="M166.13,0A49,49,0,0,1,187.6,4.56a50.14,50.14,0,0,1,14.4,10,2.77,2.77,0,0,1-.9,4.77,2.55,2.55,0,0,1-2.82-.78A45.31,45.31,0,0,0,175.06,6.24a45.16,45.16,0,0,0-14.62-.48,44.26,44.26,0,0,0-13.68,4.08,46,46,0,0,0-12.35,8.74,2.72,2.72,0,1,1-3.8-3.9,50.25,50.25,0,0,1,19.16-12A46.41,46.41,0,0,1,166.13,0ZM156.9,15.23a35.11,35.11,0,0,0-16.26,9.28,2.66,2.66,0,0,0-.25,4,2.73,2.73,0,0,0,4,0,31.24,31.24,0,0,1,44,.05A2.7,2.7,0,0,0,193,27.34a2.84,2.84,0,0,0-.93-2.9c-7.19-7-15.83-10.31-27.15-10.54C163.11,14.19,159.94,14.46,156.9,15.23Zm-6.38,19.26a2.71,2.71,0,1,0,3.67,4,18.39,18.39,0,0,1,6.36-4,17.2,17.2,0,0,1,9.32-.64,16.73,16.73,0,0,1,8.48,4.47,3,3,0,0,0,3.6.53,2.78,2.78,0,0,0,.94-3.49,11.87,11.87,0,0,0-2.45-2.4,22.12,22.12,0,0,0-14-4.93A22.65,22.65,0,0,0,150.52,34.49ZM267.28,163.42a27.65,27.65,0,0,0-4.44-13c-2.45-3.51-5.75-5.6-10.23-5.07a14.37,14.37,0,0,0-6.63,2.79,36,36,0,0,0-10,11.47,71,71,0,0,0-8.51,23.16,63.69,63.69,0,0,0-.83,19.91c.58,4.56,1.7,9,4.35,12.87,2.52,3.68,5.87,5.86,10.52,5.22a14.61,14.61,0,0,0,7.11-3.17c5.26-4.14,8.83-9.55,11.72-15.46a73,73,0,0,0,5.78-17.06A95.1,95.1,0,0,0,267.88,170C267.72,168.26,267.55,165.84,267.28,163.42ZM251,196.31a12.37,12.37,0,0,1-4.64,4.21,5.18,5.18,0,0,1-7.22-2.16c-1.85-3.15-2.18-6.64-2.06-10.16A34.6,34.6,0,0,1,241.61,172a15.88,15.88,0,0,1,5.6-6.13c3.5-2,6.54-.6,8.17,2.82a20.52,20.52,0,0,1,1.6,8.5A34.26,34.26,0,0,1,251,196.31ZM81.47,214.72c3.69-.44,7.34-1.13,10.6-3.09,3.08-1.86,4.46-4.44,2.51-8.13a20.05,20.05,0,0,0-5.52-6.21,67.15,67.15,0,0,0-18.9-10.11,114.94,114.94,0,0,0-15.68-4.47,82.36,82.36,0,0,0-14.63-2,106.52,106.52,0,0,0-12.38.33,22.7,22.7,0,0,0-10.06,3.06c-2.79,1.73-4.33,4.16-2.5,7.79A19.05,19.05,0,0,0,20,197.85c6.22,5.2,13.46,8.52,21,11.2a106,106,0,0,0,17.57,4.57,109.9,109.9,0,0,0,16.25,1.54C76.55,215.05,79,215,81.47,214.72ZM47.86,185.19a104.19,104.19,0,0,1,18.46,5.22c6.9,2.69,13.53,5.92,19.33,10.63,3.33,2.72,3.17,7.48-.38,9.67a6.79,6.79,0,0,1-2.61.88,58.36,58.36,0,0,1-14-.05c-3.24-.35-6.44-1-9.64-1.64a90.88,90.88,0,0,1-15.42-4.53c-7.19-2.77-14.07-6.1-20-11.15a5.65,5.65,0,0,1-1.64-6.5A5.77,5.77,0,0,1,27,184.06l5.51-.4A94.27,94.27,0,0,1,47.86,185.19ZM184,113.8c-3.32-.55-6.63-1.11-10-1.68a1.75,1.75,0,0,0-1.75.55q-7.41,8-14.87,16c-.24.26-.44.56-.71.91l11.74,3.69a1.07,1.07,0,0,0,1.34-.34c3.86-4.18,7.77-8.31,11.65-12.47,1.84-2,3.66-3.94,5.7-6.15C185.86,114.09,184.91,114,184,113.8Zm19.18,3.13c-3.28-.55-6.57-1.09-9.85-1.66a1.8,1.8,0,0,0-1.83.63c-4.49,4.87-9,9.69-13.54,14.53-1.33,1.43-2.65,2.87-4.11,4.45.72.22,1.27.38,1.82.56l9.1,2.88c.57.18,1,.19,1.37-.47a26.9,26.9,0,0,1,1.72-2.58,76.33,76.33,0,0,1,15.93-17c.36-.27.7-.59,1.21-1ZM151,127.79c.58.18,1.06.33,1.58-.23,5-5.42,10-10.82,15.22-16.41l-2.66-.43c-3.84-.62-7.67-1.25-11.51-1.83a1.44,1.44,0,0,0-1.06.4c-1.14,1.14-2.23,2.33-3.33,3.52-3.41,3.65-6.81,7.32-10.39,11.16ZM140.43,129q-2-.63-4.05-1.29a1.23,1.23,0,0,0-1.44.43c-3.24,3.53-6.52,7-9.79,10.52l-2.53,2.75c4,1.37,7.87,2.61,11.65,4a1.65,1.65,0,0,0,2.16-.58c2.6-2.86,5.26-5.65,7.89-8.48,1.44-1.53,2.86-3.08,4.46-4.81Zm24.69,7.61c-3.64-1.11-7.28-2.18-10.9-3.34a1.27,1.27,0,0,0-1.58.46c-3.22,3.5-6.49,6.95-9.74,10.42-1,1-1.87,2.05-2.85,3.12a2.39,2.39,0,0,0,.46.31c3.72,1.3,7.44,2.61,11.17,3.86a1.25,1.25,0,0,0,1-.34c2.06-2.13,4.09-4.3,6.11-6.47,2.35-2.51,4.68-5,7.07-7.63A5.7,5.7,0,0,0,165.12,136.63Zm-55.87,22.81c3.11,1.14,6.23,2.26,9.32,3.45a1.11,1.11,0,0,0,1.42-.38l11.84-12.75a2.86,2.86,0,0,0,.29-.56c-4-1.35-7.89-2.63-11.75-4a1.3,1.3,0,0,0-1.68.41q-4.59,5-9.23,9.92c-.89,1-1.81,1.86-2.88,3Zm13.15-40.51c3.64,1.11,7.29,2.18,10.91,3.35a1.31,1.31,0,0,0,1.62-.35c4.17-4.51,8.37-9,12.55-13.51a3.47,3.47,0,0,0,.31-.57c-2.91-.47-5.71-.89-8.49-1.41-1.64-.3-3.38-.24-4.9-1.17-.21-.13-.84.14-1.09.4-2.67,2.79-5.31,5.62-7.94,8.44-1.34,1.43-2.65,2.88-4,4.39C121.77,118.68,122.07,118.83,122.4,118.93Zm5.32,6.12c-3-1-6-1.93-9-2.83a1.34,1.34,0,0,0-1.13.35c-3.12,3.27-6.2,6.58-9.28,9.88-.9,1-1.79,1.94-2.8,3l1.94.69c3.3,1.15,6.59,2.3,9.9,3.44a1.25,1.25,0,0,0,1.47-.4c3.32-3.61,6.67-7.19,10-10.78.7-.74,1.38-1.49,2.21-2.39C129.77,125.67,128.74,125.37,127.72,125.05Zm-37.34,27.4c3.66,1.37,7.33,2.72,11,4.09a1.36,1.36,0,0,0,1.7-.45c3.62-3.94,7.28-7.83,10.92-11.75a12.84,12.84,0,0,0,.84-1.05c-.48-.2-.79-.34-1.12-.46-3.4-1.16-6.82-2.28-10.2-3.52a1.65,1.65,0,0,0-2.12.52c-2.62,2.88-5.31,5.71-8,8.56L90,152.15A2.14,2.14,0,0,0,90.38,152.45ZM98.46,160c-3.69-1.37-7.39-2.73-11.08-4.11a1.08,1.08,0,0,0-1.33.4q-4.85,5.23-9.72,10.44c-.36.39-.69.8-1.14,1.32l2.77.72c3,.79,6,1.57,8.92,2.39a2.38,2.38,0,0,0,2.9-.81c1-1.22,2.1-2.28,3.16-3.41L99,160.4A2.85,2.85,0,0,0,98.46,160Zm-29.31,6.6a1.9,1.9,0,0,0,2.15-.71c2.76-3,5.57-6,8.36-9l2.49-2.68c-.19-.18-.26-.28-.35-.32-3.13-1.18-6.27-2.38-9.42-3.51a1.26,1.26,0,0,0-1,.34c-2.51,2.62-5,5.27-7.46,7.91-1.62,1.73-3.22,3.48-5,5.42C62.44,164.91,65.81,165.7,69.15,166.61Zm43.53-46.29c-3.17-1-6.34-2-9.52-2.91a1.36,1.36,0,0,0-1.12.33c-2.7,2.82-5.36,5.67-8,8.52-1.19,1.28-2.36,2.57-3.6,3.93a9.1,9.1,0,0,0,.89.42c3.07,1.07,6.13,2.14,9.22,3.16a1.1,1.1,0,0,0,.91-.32c1.4-1.44,2.76-2.91,4.13-4.38,2.59-2.76,5.17-5.53,7.85-8.41A7.37,7.37,0,0,0,112.68,120.32ZM96.3,136.85c-2.82-1-5.65-1.89-8.45-2.89a1.13,1.13,0,0,0-1.41.43l-8,8.63c-1.12,1.19-2.22,2.41-3.43,3.73,3.39,1.24,6.61,2.4,9.8,3.61A1.05,1.05,0,0,0,86.1,150q5.64-6.07,11.29-12.13a3.6,3.6,0,0,0,.31-.49ZM75.23,125.2c.1.12.2.31.33.35,1.15.3,2.33.53,3.46.88,2,.64,4.09,1.31,6.11,2a1,1,0,0,0,1.33-.35c3.07-3.32,6.18-6.6,9.26-9.91.71-.76,1.38-1.55,2.14-2.41-.43-.17-.64-.27-.87-.34-3-.92-6-1.78-9-2.8a1.54,1.54,0,0,0-2,.66c-2.14,2.52-4.34,5-6.54,7.46a7.18,7.18,0,0,1-1.2.88C77.69,123.13,76.18,123.92,75.23,125.2Zm-5.69,19.53a1.44,1.44,0,0,0,1.9-.53c2.15-2.39,4.39-4.7,6.59-7l4.6-5-10.75-3.86-11.43,13C63.66,142.54,66.62,143.58,69.54,144.73Zm58.1-40.06a18.71,18.71,0,0,1-8.9-3.68c-.5-.38-.84-.34-1.29.15-3.27,3.55-6.57,7.07-9.85,10.6l-1.71,1.85c.19.16.25.26.34.29,3.3,1,6.6,2.06,9.91,3.05a1.15,1.15,0,0,0,.94-.25c2.33-2.45,4.63-4.93,6.93-7.4l4.06-4.34C127.8,104.77,127.73,104.68,127.64,104.67ZM48.09,161.32c1.87.49,3.74,1,5.63,1.43.21.05.56-.19.75-.39,2.91-3.08,5.81-6.18,8.71-9.27,1.39-1.49,2.76-3,4.24-4.58-3-1.13-5.94-2.16-8.8-3.27-.7-.28-1,0-1.35.48a118,118,0,0,0-9.51,15.34C47.93,161.2,48,161.3,48.09,161.32ZM113.17,98.9c-1.91,0-3.9-.33-5.74.06a36.8,36.8,0,0,0-15.66,7.68c-.7.56-1.29,1.25-2,2a3.16,3.16,0,0,0,.45.32c3.33,1,6.67,2.06,10,3.12a1.48,1.48,0,0,0,1.73-.5c2.41-2.64,4.87-5.25,7.31-7.87q2-2.18,4-4.36Zm.87,66.9-2-.74-7.68-2.87a1.16,1.16,0,0,0-1.46.28c-2.89,3.15-5.81,6.26-8.72,9.4a5.15,5.15,0,0,0-.47.79l.19.31a18.17,18.17,0,0,0,2.46-.5c3.78-1.32,7.55-2.69,11.32-4.05l6.3-2.3Zm13.32-4.53,18.84-6.92c-3-1.29-5.91-2.34-8.86-3.33a1.29,1.29,0,0,0-1,.32c-2.05,2.13-4.07,4.31-6.09,6.47-1,1.07-2,2.15-3,3.23Zm33.94-12.55,18.58-7.23c-.22-.21-.27-.28-.32-.3-2.87-.92-5.73-1.84-8.61-2.71-.21-.07-.62.18-.82.39q-3.12,3.3-6.22,6.64l-2.78,3Z"/></svg>'; } ]]]