Untitled

entities:
  - sensor.window_open_percentage
type: picture-elements
variables:
  window_open_percentage: '{{ states(''sensor.window_open_percentage'') | int }}'
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