svg.svg-background fill="none" viewbox=("0 0 911 167") xmlns="http://www.w3.org/2000/svg"
path#L1 d=("M0 83.5H215.216C223.549 83.5 231.859 82.6217 240.007 80.8796L257.278 77.1875C272.966 73.8335 289.333 76.0284 303.584 83.3977L315.274 89.4425C331.349 97.7556 350.737 96.3017 365.394 85.6842V85.6842C382.377 73.3806 405.389 73.5514 422.188 86.1056L428.288 90.664C445.708 103.683 469.866 102.723 486.199 88.3631V88.3631C501.865 74.5894 524.839 73.0818 542.171 84.6901L547.267 88.1033C561.28 97.489 578.876 99.7845 594.828 94.3082L612.012 88.4091C621.48 85.1588 631.421 83.5 641.432 83.5H683.25H911")
path#L2 d=("M0 84H210.471C221.876 84 233.166 86.2751 243.68 90.692V90.692C262.584 98.6334 283.708 99.5375 303.222 93.2405L304.317 92.8869C322.214 87.1116 341.482 87.1637 359.347 93.0356L361.137 93.6238C379.699 99.7247 399.694 99.9306 418.378 94.2132L424.761 92.26C442.495 86.833 461.275 85.75 479.516 89.1025L486.13 90.318C500.226 92.9087 514.653 93.1506 528.828 91.0338L566.385 85.4256C572.741 84.4765 579.158 84 585.585 84H626.312H683.25H911")
path#L3 d=("M0 83.5H227.75H264.173C274.961 83.5 285.67 81.6668 295.844 78.0786L304.5 75.0259C322.706 68.6049 342.714 69.6573 360.146 77.9528L364.788 80.1618C380.614 87.6935 398.903 88.1164 415.061 81.3241L425.661 76.8683C442.679 69.7144 462.345 73.7518 475.168 87.0325V87.0325C491.067 103.499 516.833 105.304 534.873 91.2148L544.283 83.8653C559.396 72.0621 579.367 68.4934 597.632 74.3321L613.127 79.2852C621.865 82.0782 630.982 83.5 640.155 83.5H683.25H911")
g
g
circle cx="22" cy="43" r="10.5" stroke="black" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="16s" from=("0 6 7") repeatcount="indefinite" to=("-360 6 7") type="rotate"
animatemotion begin="0s" dur="32s" repeatcount="indefinite"
mpath xlink:href="#L3"
g
g
circle cx="22" cy="43" r="10.5" stroke="black" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="8s" from=("0 6 7") repeatcount="indefinite" to=("-360 6 7") type="rotate"
animatemotion begin="12s" dur="46s" repeatcount="indefinite"
mpath xlink:href="#L1"
g
g
path d=("M9.14359 36L23 12L36.8564 36H9.14359Z") stroke="black" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="14s" from=("0 6 7") repeatcount="indefinite" to=("360 6 7") type="rotate"
animatemotion begin="0s" dur="36s" repeatcount="indefinite"
mpath xlink:href="#L2"
g
g
path d=("M9.14359 36L23 12L36.8564 36H9.14359Z") stroke="black" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="8s" from=("0 6 7") repeatcount="indefinite" to=("360 6 7") type="rotate"
animatemotion begin="3s" dur="44s" repeatcount="indefinite"
mpath xlink:href="#L1"
g
g
path d=("M9.14359 36L23 12L36.8564 36H9.14359Z") stroke="black" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="12s" from=("0 6 7") repeatcount="indefinite" to=("360 6 7") type="rotate"
animatemotion begin="7s" dur="30s" repeatcount="indefinite"
mpath xlink:href="#L2"
g
g
path d=("M30.9198 52L14.4717 79M10 56.4614L36 73.5422") stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="14s" from=("0 6 7") repeatcount="indefinite" to=("360 6 7") type="rotate"
animatemotion begin="14s" dur="25s" repeatcount="indefinite"
mpath xlink:href="#L3"
g
g
path d=("M30.9198 52L14.4717 79M10 56.4614L36 73.5422") stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="12s" from=("0 6 7") repeatcount="indefinite" to=("360 6 7") type="rotate"
animatemotion begin="12s" dur="34s" repeatcount="indefinite"
mpath xlink:href="#L2"
g
g
path d=("M30.9198 52L14.4717 79M10 56.4614L36 73.5422") stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="10s" from=("0 6 7") repeatcount="indefinite" to=("360 6 7") type="rotate"
animatemotion begin="0s" dur="42s" repeatcount="indefinite"
mpath xlink:href="#L1"
button.btn type="button"
span.btn_text click me
.mover
span.link
| Made with
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0H24V24H0z"/><path fill="#7f71fe" d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"/></svg>
| by
a href="https://codepen.io/Anna_Batura/" target="_blank" Anna Batura@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&display=swap')
\:root
--mouse-x: -50px
--mouse-y: -50px
--mouse-btn-x: -50px
--mouse-btn-y: -50px
html
height: 100%
body
font-family: sans-serif
font-size: 14px
height: 100%
margin: 0
display: flex
align-items: center
justify-content: center
overflow: hidden
font-family: 'Comfortaa', cursive
background-color: #A8CAF5
font-weight: 400
.svg-background
position: absolute
left: -20vw
right: -20vw
bottom: 0
width: 140vw
a
color: #7f71fe
text-decoration: none
font-weight: 700
.btn
appearance: none
outline: 0
position: relative
overflow: hidden
display: inline-block
text-align: center
text-decoration: none
vertical-align: middle
cursor: pointer
-webkit-user-select: none
-moz-user-select: none
user-select: none
border: none
letter-spacing: 3px
line-height: 80px
height: 80px
width: 300px
padding: 0 30px
font-size: 32px
font-weight: 600
color: #fff
background-color: #1A1D2C
border-radius: 5px
transition: all 0.3s ease-in
&_text
position: relative
z-index: 2
&:hover
background-color: #262c48
.link
position: fixed
bottom: 10px
left: 0
right: 0
text-align: center
font-size: 18px
svg
position: relative
top: 5px
margin: 0 4px
.mover
pointer-events: none
position: absolute
top: 0
left: 0
margin-top: -10px
margin-left: -10px
border-radius: 50%
left: var(--mouse-x)
top: var(--mouse-y)
height: 20px
width: 20px
background: rgba(255, 255, 255, 0.3)
transform: scale(1.5)
transition: all 0.1s ease-out
z-index: 1
&.active
transform: scale(0.8)
.mouse
pointer-events: none
height: 30px
width: 30px
position: absolute
left: var(--mouse-btn-x)
top: var(--mouse-btn-y)
.svg
position: absolute
width: 160px
height: 180px
top: -110px
left: -80px//#cpc-click-button#codepenchallenge
let root = document.documentElement;
let mover = document.querySelector(".mover");
let link = document.querySelector(".btn");
root.addEventListener("mousemove", (e) => {
root.style.setProperty("--mouse-x", e.clientX + "px");
root.style.setProperty("--mouse-y", e.clientY + "px");
});
link.addEventListener("click", function (event) {
event.preventDefault();
let svg =
`<svg class="svg" fill="none" viewBox="0 0 140 160" xmlns="http://www.w3.org/2000/svg"> <path d="M70.5 82.5V45.5" id="Line1"></path> <path d="M61.5 90.5L24.5 90.5" id="Line2"></path> <path d="M70.5 100.5V137.5" id="Line3"></path> <path d="M79.5 90.5L116.5 90.5" id="Line4"></path> <path d="M64.8786 85.9999L38.7157 59.8369" id="Line5"></path> <path d="M76 85.8788L102.163 59.7158" id="Line6"></path> <path d="M64 97.1211L37.837 123.284" id="Line7"></path> <path d="M76.1213 97L102.284 123.163" id="Line8"></path> <!-- /- (1..@snowFew).each do --> <g> <g> <g class="svg_obj"> <path d="M14.6324 5.25L20.9832 16.25C21.5606 17.25 20.8389 18.5 19.6842 18.5H6.98249C5.82778 18.5 5.10609 17.25 5.68344 16.25L12.0343 5.25C12.6116 4.25 14.055 4.25 14.6324 5.25Z" fill="none" stroke-linecap="square" stroke-linejoin="round" stroke-width="3" stroke="#7f71fe"></path> </g> <animateMotion begin="0s" dur="1.5s" repeatCount="1"> <mpath xlink:href="#Line` +
Math.floor(Math.random() * 8 + 1) +
`"></mpath> </animateMotion> </g> </g> <g> <g> <g class="svg_obj"> <circle cx="12" cy="11" r="6.5" stroke-width="3" stroke="#1A3AF8"></circle> </g> <animateMotion begin="0s" dur="1.5s" repeatCount="1"> <mpath xlink:href="#Line` +
Math.floor(Math.random() * 8 + 1) +
`"></mpath> </animateMotion> </g> </g> <g> <g> <g class="svg_obj"> <path d="M17.2394 3L7.6162 18.2116M5 5.51355L20.2116 15.1367" stroke="#47cf73" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> </g> <animateMotion begin="0s" dur="1.5s" repeatCount="1"> <mpath xlink:href="#Line` +
Math.floor(Math.random() * 8 + 1) +
`"></mpath> </animateMotion> </g> </g> </svg>`;
let x = event.offsetX == undefined ? event.layerX : event.offsetX,
y = event.offsetY == undefined ? event.layerY : event.offsetY;
let span = document.createElement("span");
span.className = "mouse";
span.innerHTML = svg;
s = span.style;
s.top = y + "px";
s.left = x + "px";
this.appendChild(span);
setTimeout(function () {
span.remove();
}, 1400);
mover.classList.add("active");
setTimeout(function () {
mover.classList.remove("active");
}, 250);
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.