Untitled

type: 'custom:config-template-card'
entities:
  - sensor.window_open_percentage
variables:
  window_open_percentage: states['sensor.window_open_percentage'].state
card:
  type: picture-elements
  image: >
    ${`data:image/svg+xml;charset=utf-8,%3Csvg width="400" height="400"
    xmlns="http://www.w3.org/2000/svg"%3E%3C!-- Roof window frame --%3E%3Cg
    transform="rotate(-45 200 200)"%3E%3C!-- Outer frame --%3E%3Crect x="95"
    y="197.5" width="210" height="15" stroke="%23333" fill="%23f0f0f0" /%3E%3C!--
    Inner frame --%3E%3Crect x="100" y="200" width="200" height="10"
    stroke="%23666" fill="%23e0e0e0" /%3E%3C!-- Handle --%3E%3Ccircle cx="200"
    cy="200" r="8" fill="%23666" /%3E%3Crect x="195" y="195" width="10"
    height="10" stroke="none" fill="%23666" /%3E%3C!-- Roof window sash
    --%3E%3Cline id="rotatingLine" x1="100" y1="200" x2="300" y2="200"
    stroke="%23999" stroke-width="10" transform="rotate(${window_open_percentage} 200 200)" /%3E%3C/g%3E%3C/svg%3E`}
  elements:
    - type: state-label
      entity: sensor.window_open_percentage
      style:
        top: 10%
        left: 10%
        color: white