783-289-395

Kreatywni@www.pl

SVG BLOB INFINITE ANIMATION

/*HTML*/
<div class="svgFloat">
<canvas class="svg_canvas" width="450" height="500"></canvas>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="test" width="450" height="500" viewBox="0 0 450 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<image id="img-1" class="svg-image" width="450" height="500" xlink:href="https://kreatywni.info/kreatywni/wp-content/uploads/2021/06/supriya-s-ulLxn3oxHGA-unsplash-1-scaled.jpg" preserveAspectRatio="xMinYMin slice"></image>
</svg>
<svg>
<defs>
<clipPath id="my-clip">
<path id="p" fill="#E5E5E5" d="M375.8 42.7C408.8 75.1 418.9 130.1 431.1 186.6C443.2 243.1 457.5 301 439.9 349.3C422.4 397.6 373 436.1 320.9 446C268.7 455.9 213.8 437.1 157.3 418.3C100.9 399.5 43.0001 380.8 17.4001 341.1C-8.09992 301.4 -1.2999 240.8 11.6001 183.7C24.5001 126.6 43.6001 72.9 81.1001 41.4C118.7 9.89999 174.9 0.400003 230.9 0.600003C286.9 0.700003 342.8 10.4 375.8 42.7Z"></path>
</clipPath>
</defs>
<animate xlink:href="#p" attributeName="d" dur="40s" repeatCount="indefinite" values="
M373.7,24.9c38.9,28.8,54.8,88.9,53.4,142.8c-1.3,54-19.9,101.9-46.2,143.4c-26.3,41.5-60.3,76.5-100.2,87.6c-39.8,11.1-85.5-1.7-128.3-18.9c-42.8-17.2-82.6-38.8-110.7-73.7C13.5,271.1-3,222.7,1,174c3.9-48.6,28.2-97.7,66.6-126.6C106,18.5,158.5,9.8,215.7,4.2C272.9-1.5,334.8-3.9,373.7,24.9z;
M359,39c38.9,28.8,37.4,77.1,36,131c-1.3,54-7.7,83.5-34,125c-26.3,41.5-42.1,57.9-82,69c-39.8,11.1-81.2,3.2-124-14c-42.8-17.2-62.9-28.1-91-63c-28.2-35-29-75.3-25-124c3.9-48.6,19.6-78.1,58-107c38.4-28.9,59.8-32.4,117-38C271.2,12.3,320.1,10.2,359,39z;
M258,151c38.9,28.8,115.4-11.7,114,42.2c-1.3,54-23.7,39.3-50,80.8c-26.3,41.5-49.1-9.1-89,2c-39.8,11.1-35.2,91.2-78,74c-42.8-17.2-7.9-49.1-36-84c-28.2-35-84-54.3-80-103c3.9-48.6,35.6-20.1,74-49c38.4-28.9,43.8-90.4,101-96C271.2,12.3,219.1,122.2,258,151z;
M373.7,24.9c38.9,28.8,54.8,88.9,53.4,142.8c-1.3,54-19.9,101.9-46.2,143.4c-26.3,41.5-60.3,76.5-100.2,87.6c-39.8,11.1-85.5-1.7-128.3-18.9c-42.8-17.2-82.6-38.8-110.7-73.7C13.5,271.1-3,222.7,1,174c3.9-48.6,28.2-97.7,66.6-126.6C106,18.5,158.5,9.8,215.7,4.2C272.9-1.5,334.8-3.9,373.7,24.9z
"></animate>
</svg>
</div>

CSS
.svgFloat{
position: relative;
animation: svgFloat 6s ease-in-out infinite;
}
.svgFloat svg{
position: absolute;
top: 0;
left: 0;
}
.svgFloat .svg-image{
clip-path: url(#my-clip);
}

@keyframes svgFloat {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}

Group Elements HTML

hgroup {
    text-align: right;
    font-family: Verdana, sans-serif;
    padding-right: 16px;
    border-right: 10px solid #00c8d7;
}

h1 {
    font-size: 1.93rem;
    margin-bottom: 0;
}

h2 {
    font-size: 1.16rem;
    margin-top: 0;
}

p {
    text-align: justify;
    font-family: Georgia, serif;
    font-size: .95rem;
}

p::first-letter {
    font-size: 3.2rem;
    line-height: .7;
    float: left;
    padding-right: 8px;
    padding-top: 4px;
}


/* HTML*/
<hgroup>
<h1>Calculus I</h1>
<h2>Fundamentals</h2>
</hgroup>
<p>This course will start with a brief introduction about the limit of a function. Then we will describe how the idea of derivative emerges in the Physics and Geometry fields. After that, we will explain that the key to master calculus is …</p>

CLIP PATH MASK

* {
–clip-path: initial;
-webkit-clip-path: var(–clip-path);
clip-path: var(–clip-path);
–polygon: polygon(0% 0%, 100% 0%, 100% calc(100% – 2.5em), 0% 100%);
–rounded-corner: inset(0 0 0 0 round 0 0 35% 0);
–inset-triangle: polygon(0 0, 100% 0, 100% 100%, calc(50% + 40px) 100%, 50% calc(100% – 40px), calc(50% – 40px) 100%, 0 100%);
–outset-triangle: polygon(0 0, 100% 0, 100% calc(100% – 40px), calc(50% + 40px) calc(100% – 40px), 50% 100%, calc(50% – 40px) calc(100% – 40px), 0 calc(100% – 40px));
}
header{
–clip-path: var(–rounded-corner);
}

MAKE ALL SECTION FULL WIDTH

.entry-content .et_pb_section > .et_pb_row{
min-width: 100% !important;
}
.entry-content .et_section_specialty> .et_pb_row {
min-width: 100% !important;

}

:not(.et_pb_fullwidth_section).entry-content .et_pb_section {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
:not(.et_pb_fullwidth_section).entry-content .et_pb_section {
padding-top: 50px !important;
padding-bottom: 50px !important;
}