Einrichtung

<svg id="svg4227" width="100" class="floral schreinerei" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 682.67 683.2"><defs><style>.cls-1{clip-path:url(#clippath);}.cls-2{stroke-width:0px;}.cls-2,.cls-3{fill:none;}.cls-3{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:20px;}</style><clipPath id="clippath"><rect class="cls-2" y=".27" width="682.67" height="682.67"/></clipPath></defs><g id="g4233"><g id="g4235"><g class="cls-1"><g id="g4237"><g id="g4243"><path id="path4245" class="cls-3" d="m304.43,632.45c-14.47,4.68-29.93,5.44-44.84,2.54-1.95-.38-3.47-1.9-3.85-3.85-3.05-15.69-2.05-31.99,3.31-47.1,6.69-18.87,19.73-36.77,38.06-45.78.03-.02.07-.03.1-.05,18.63-9.14,39.84-11.57,60.07-6.95"/></g><g id="g4247"><path id="path4249" class="cls-3" d="m377.09,632.07c14.8,5.02,30.68,5.9,45.99,2.92,1.95-.38,3.47-1.9,3.85-3.85,3.05-15.69,2.05-31.99-3.31-47.1-6.69-18.87-19.73-36.77-38.06-45.78-.03-.02-.07-.04-.1-.05-18.63-9.14-39.84-11.57-60.07-6.95"/></g><g id="g4251"><path id="path4253" class="cls-3" d="m302.22,577.33c6.7-19.64,19.99-36.35,37.56-47.39l1.55-.97,1.55.97c17.57,11.03,30.86,27.75,37.57,47.39.01.04.03.07.04.11,6.58,19.34,3.16,41.21-5.46,59.29-6.9,14.47-17.71,26.71-30.97,35.64-1.64,1.11-3.8,1.11-5.44,0-13.25-8.94-24.07-21.17-30.97-35.64-1.95-4.1-3.64-8.4-5.01-12.82"/></g><g id="g4255"><path id="path4257" class="cls-3" d="m550.71,274.56c-5.87-9.22-17.5-11.93-27.43-8.19-28.42,10.7-13.98,46.06,11.18,48.92,26.5,3.02,47.65-15.06,49-41.04,1.16-22.41-14.81-41.05-35.24-49.59-36.88-15.42-73.62,10.99-103.55,28.94-11,6.6-22.68,12.06-34.78,16.3-20.36,7.14-41.85,10.47-63.42,10.47h-10.25c-21.57,0-43.07-3.33-63.42-10.47-12.11-4.24-23.78-9.7-34.78-16.3-29.93-17.95-66.67-44.36-103.55-28.94-20.42,8.54-36.39,27.18-35.24,49.59,1.34,25.98,22.5,44.05,49,41.04,25.16-2.86,39.6-38.22,11.18-48.92-9.94-3.74-21.57-1.03-27.43,8.19"/></g><g id="g4259"><path id="path4261" class="cls-3" d="m376.68,232.46c7.66,4.56,18.59,1.21,23.26-6.39,4.66-7.59,3.22-18.09-2.54-24.89-5.76-6.8-15.14-9.98-24.02-9.25-21.15,1.73-32.57,19.56-32.19,38.55"/></g><g id="g4263"><path id="path4265" class="cls-3" d="m305.98,232.46c-7.66,4.56-18.59,1.21-23.26-6.39-4.66-7.59-3.22-18.09,2.54-24.89,5.76-6.8,15.14-9.98,24.02-9.25,24.39,1.99,32.23,24.23,31.88,46.96v41.03"/></g><g id="g4267"><path id="path4269" class="cls-3" d="m376.68,450.75c7.66-4.56,18.59-1.21,23.26,6.39,4.66,7.59,3.22,18.09-2.54,24.89-5.76,6.8-15.14,9.98-24.02,9.25-21.15-1.73-32.57-19.56-32.19-38.55"/></g><g id="g4271"><path id="path4273" class="cls-3" d="m305.98,450.75c-7.66-4.56-18.59-1.21-23.26,6.39-4.66,7.59-3.22,18.09,2.54,24.89,5.76,6.8,15.14,9.98,24.02,9.25,24.39-1.99,32.23-24.23,31.88-46.96v-41.03"/></g><g id="g4275"><path id="path4277" class="cls-3" d="m304.4,50.75c-14.46-4.67-29.91-5.43-44.81-2.53-1.95.38-3.47,1.9-3.85,3.85-3.05,15.69-2.05,31.99,3.31,47.1,6.69,18.87,19.73,36.77,38.06,45.78.03.02.07.04.1.05,18.63,9.15,39.84,11.57,60.07,6.95"/></g><g id="g4279"><path id="path4281" class="cls-3" d="m378.67,50.62c14.34-4.56,29.64-5.27,44.4-2.4,1.95.38,3.47,1.9,3.85,3.85,1.82,9.33,2.2,18.86,1.08,28.24"/></g><g id="g4283"><path id="path4285" class="cls-3" d="m410.39,123.9c-6.64,8.77-14.97,16.19-24.84,21.05-.03.02-.07.03-.1.05-18.63,9.15-39.84,11.57-60.07,6.95"/></g><g id="g4287"><path id="path4289" class="cls-3" d="m375.02,46.47c-6.9-14.47-17.71-26.71-30.97-35.64-1.64-1.11-3.79-1.11-5.44,0-13.25,8.94-24.07,21.17-30.97,35.64-8.62,18.08-12.04,39.95-5.46,59.29.01.04.03.07.04.11,6.71,19.64,19.99,36.35,37.56,47.39l1.55.97,1.55-.97c17.57-11.03,30.86-27.75,37.56-47.39.01-.04.03-.07.04-.11,6.58-19.34,3.15-41.21-5.46-59.29Z"/></g><g id="g4291"><path id="path4293" class="cls-3" d="m131.96,408.65c5.87,9.22,17.5,11.93,27.43,8.19,28.42-10.7,13.98-46.06-11.18-48.92-26.5-3.02-47.65,15.06-49,41.04-1.16,22.41,14.81,41.05,35.24,49.59,36.88,15.42,73.62-10.99,103.55-28.94,11-6.6,22.68-12.06,34.78-16.3,20.35-7.14,41.85-10.47,63.42-10.47h10.25c21.57,0,43.07,3.33,63.42,10.47,12.11,4.24,23.78,9.7,34.78,16.3,29.92,17.95,66.67,44.36,103.55,28.94,20.42-8.54,36.39-27.18,35.24-49.59-1.34-25.98-22.5-44.05-49-41.04-25.16,2.87-39.6,38.22-11.18,48.92,9.93,3.74,21.57,1.03,27.43-8.19"/></g></g></g></g></g></svg>

<script>
window.addEventListener("load", () => {
    
    // Set the variables
    var iOSupported = "IntersectionObserver" in window; /* true if supported */
    var box = document.querySelectorAll('.floral');
    
    // Check if IntersectionObserver is supported by the browser
    if (!iOSupported) {
        return;
    }

    // Set the config options 
    const config = {
        root: null, // sets the framing element to the viewport
        rootMargin: '0% 0% -25% 0%', // the animation will be triggered when at 25% from the bottom of the viewport
        threshold: 0 
    };
    
    // Init the observer
    let observer = new IntersectionObserver((entries) => {
        entries.forEach((item) => {
        
        if (item.isIntersecting) {
            
            // adding the class active when the element is intersecting
            item.target.classList.add("active");

        } else {
            // removing the class active when the element is NOT intersecting - Uncomment the following row in order to apply it
            // item.target.classList.remove("active");
        }
        
    });
        
    }, config);


    // observe all the element that has the class 'custom-animation-on-scroll'
    box.forEach((item) => {
        observer.observe(item);
    });
});
</script>

.floral {
  opacity: 0;
  transition: opacity 2s ease;
  width: 100px;
}

.floral.active {
 opacity: 1 
}

.floral path {
 stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.floral.active path {
   animation: dash 2s ease-in-out forwards; 
}

.schreinerei path {
  stroke: #739a76;
}

.einrichtungshof path {
  stroke: #9f97a2 
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}