A Web Maker experiment

In this example below you will see how to do a A Web Maker experiment with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by megatronCGN, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright megatronCGN ©
  • HTML
  • CSS
  • JavaScript
    <div class="hero">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.33334 98.666664" height="98.667" width="273.333"><path d="M43.318 21.21v9.576c0 3.778-5.666 3.778-5.666 0V21.21c0-3.777 5.666-3.777 5.666 0" fill="#ff8c00"/><path d="M33.714 21.704l2.478 9.25c.978 3.648-4.496 5.115-5.473 1.465l-2.48-9.25c-.977-3.65 4.496-5.115 5.474-1.466" fill="#ff8c00"/><path d="M10.066 37.144l8.292 4.788c3.272 1.888.438 6.796-2.833 4.907L7.232 42.05c-3.27-1.89-.438-6.797 2.834-4.908" fill="#ff8c00"/><path d="M5.73 45.7l9.25 2.477c3.65.978 2.184 6.452-1.465 5.474l-9.25-2.477C.615 50.195 2.082 44.72 5.73 45.7" fill="#ff8c00"/><path d="M3.74 55.097h9.576c3.777 0 3.777 5.667 0 5.667H3.74c-3.777 0-3.777-5.667 0-5.667" fill="#ff8c00"/><path d="M4.29 64.73l9.248-2.478c3.65-.977 5.116 4.496 1.467 5.473l-9.25 2.48C2.108 71.18.64 65.707 4.29 64.73" fill="#ff8c00"/><path d="M7.263 73.843l8.292-4.788c3.272-1.89 6.105 3.018 2.834 4.908l-8.294 4.787c-3.272 1.89-6.105-3.018-2.833-4.907" fill="#ff8c00"/><path d="M12.518 81.894l6.77-6.77c2.672-2.672 6.68 1.334 4.008 4.006l-6.77 6.77c-2.672 2.672-6.68-1.335-4.008-4.006" fill="#ff8c00"/><path d="M19.668 88.338l4.787-8.293c1.89-3.27 6.797-.438 4.908 2.834l-4.788 8.29c-1.89 3.273-6.796.44-4.907-2.832" fill="#ff8c00"/><path d="M28.24 92.682l2.478-9.25c.978-3.648 6.452-2.18 5.474 1.467l-2.478 9.248c-.978 3.65-6.45 2.183-5.474-1.466" fill="#ff8c00"/><path d="M37.652 94.67v-9.576c0-3.778 5.666-3.778 5.666 0v9.575c0 3.777-5.666 3.777-5.666 0" fill="#ff8c00"/><path d="M47.27 94.15l-2.477-9.25c-.977-3.65 4.496-5.116 5.474-1.467l2.478 9.25c.978 3.648-4.496 5.115-5.474 1.466" fill="#ff8c00"/><path d="M56.384 91.17l-4.788-8.29c-1.89-3.273 3.02-6.106 4.907-2.835l4.788 8.293c1.89 3.272-3.018 6.105-4.906 2.833" fill="#ff8c00"/><path d="M64.447 85.9l-6.77-6.77c-2.672-2.67 1.335-6.678 4.006-4.007l6.77 6.77c2.672 2.672-1.334 6.68-4.006 4.008" fill="#ff8c00"/><path d="M70.882 78.75l-8.293-4.787c-3.272-1.89-.44-6.797 2.832-4.908l8.294 4.788c3.27 1.89.438 6.796-2.834 4.907" fill="#ff8c00"/><path d="M75.233 70.204l-9.25-2.478c-3.648-.978-2.18-6.45 1.468-5.474l9.25 2.48c3.65.976 2.182 6.45-1.467 5.472" fill="#ff8c00"/><path d="M77.223 60.764h-9.575c-3.778 0-3.778-5.667 0-5.667h9.575c3.778 0 3.778 5.667 0 5.667" fill="#ff8c00"/><path d="M76.72 51.173l-9.25 2.478c-3.648.98-5.115-4.494-1.466-5.472l9.25-2.48c3.65-.977 5.115 4.497 1.466 5.475" fill="#ff8c00"/><path d="M73.716 42.052l-8.294 4.788c-3.27 1.89-6.104-3.02-2.833-4.908l8.292-4.788c3.272-1.89 6.105 3.02 2.834 4.908" fill="#ff8c00"/><path d="M68.453 33.977l-6.77 6.77c-2.673 2.672-6.68-1.335-4.008-4.006l6.77-6.77c2.672-2.672 6.68 1.335 4.008 4.007" fill="#ff8c00"/><path d="M61.29 27.575l-4.787 8.293c-1.888 3.272-6.796.44-4.907-2.833l4.788-8.293c1.888-3.272 6.796-.44 4.907 2.833" fill="#ff8c00"/><path d="M52.745 23.195l-2.478 9.25c-.978 3.648-6.45 2.182-5.474-1.467l2.478-9.25c.98-3.65 6.453-2.182 5.475 1.467" fill="#ff8c00"/><path d="M10.653 24.155l6.77 6.77c2.67 2.672-1.336 6.68-4.006 4.008l-6.772-6.77c-2.67-2.672 1.336-6.68 4.008-4.008" fill="#ff8c00"/><path d="M11.103 1.493l4.788 8.293c1.89 3.27-3.018 6.105-4.907 2.833L6.195 4.326c-1.89-3.272 3.02-6.105 4.908-2.834" fill="#ff8c00"/><path d="M95.325 77.847V94.66h2.924c2.898 0 3.83-.075 4.915-.427 1.714-.53 2.824-2.193 2.824-4.26 0-2.294-1.16-3.655-3.682-4.26 1.916-.605 2.798-1.765 2.798-3.68 0-1.84-.958-3.227-2.596-3.782-.933-.302-1.84-.403-4.11-.403zm1.866 7.235v-5.647h1.488c1.765 0 2.344.05 3 .304.958.35 1.512 1.258 1.512 2.418 0 1.06-.454 1.967-1.26 2.395-.705.403-1.513.53-3.15.53zm0 7.99V86.67h1.69c1.79 0 2.445.076 3.2.303 1.186.403 1.917 1.487 1.917 2.9 0 1.335-.554 2.37-1.487 2.772-.756.327-1.614.428-3.63.428h-1.69" fill="#161616" fill-rule="evenodd"/><path d="M108.783 82.713v7.31c0 1.638.1 2.37.478 3.025.632 1.21 1.968 1.916 3.53 1.916 1.54 0 2.47-.555 3.177-1.89.025.63.076 1.058.252 1.587h1.738c-.277-.88-.277-1.032-.277-3.63v-8.317h-1.763v6.78c0 1.185-.126 1.89-.48 2.496-.53.88-1.385 1.386-2.444 1.386-.858 0-1.588-.328-1.992-.908-.327-.453-.453-1.11-.453-2.445v-7.31h-1.764" fill="#161616"/><path d="M121.057 82.713c.277 1.11.277 1.21.277 4.058v7.89h1.764v-6.68c0-1.133.177-1.915.53-2.545.554-.932 1.538-1.487 2.62-1.487.984 0 1.69.403 2.068 1.134.278.58.328 1.01.328 2.824v6.755h1.765v-6.855c0-2.37-.052-2.697-.38-3.48-.53-1.21-1.79-1.94-3.427-1.94-1.59 0-2.8.68-3.606 2.067 0-.756-.075-1.235-.25-1.74h-1.69" fill="#161616"/><path d="M143.163 77.772h-1.766v6.63c-.832-1.412-1.814-2.017-3.377-2.017-2.8 0-4.69 2.596-4.69 6.403 0 3.756 1.89 6.176 4.79 6.176 1.54 0 2.52-.58 3.38-2.017-.027.202-.027.302-.027.43 0 .452.05.805.176 1.284h1.74c-.177-.705-.227-1.41-.227-3.528zm-4.84 6.15c1.89 0 3.1 1.866 3.1 4.765 0 2.9-1.21 4.74-3.15 4.74-1.917 0-3.126-1.816-3.126-4.715 0-2.975 1.21-4.79 3.176-4.79" fill="#161616" fill-rule="evenodd"/><path d="M156.115 88.99c.025-.228.025-.43.025-.505 0-3.705-1.89-6.1-4.84-6.1-3.125 0-5.143 2.546-5.143 6.428 0 3.756 2.043 6.15 5.244 6.15 2.195 0 3.707-1.058 4.437-3.125l-1.638-.202c-.68 1.31-1.463 1.815-2.773 1.815-2.168 0-3.38-1.56-3.454-4.46zm-8.09-1.387c.35-2.445 1.46-3.73 3.2-3.73 1.79 0 2.874 1.31 3.075 3.73h-6.276" fill="#161616" fill-rule="evenodd"/><path d="M167.028 85.99c-.125-2.32-1.587-3.605-4.133-3.605-2.444 0-4.11 1.36-4.11 3.378 0 1.664.883 2.546 3.203 3.252 2.067.655 2.217.706 2.62.957.556.33.808.757.808 1.412 0 1.26-.983 2.093-2.547 2.093-1.714 0-2.622-.832-2.773-2.52h-1.714c0 2.57 1.613 4.007 4.512 4.007 2.672 0 4.336-1.437 4.336-3.73 0-.833-.226-1.54-.68-2.068-.503-.58-1.235-.933-3.202-1.512-2.268-.656-2.772-1.034-2.772-2.017 0-1.06.932-1.79 2.293-1.79 1.487 0 2.27.68 2.445 2.143h1.713" fill="#161616"/><path d="M171.64 85.84c.252-1.337 1.11-1.943 2.647-1.943 1.765 0 2.445.68 2.445 2.47v.505c-2.22.378-3.328.63-4.487 1.06-1.816.68-2.773 1.915-2.773 3.578 0 2.093 1.512 3.454 3.856 3.454 1.64 0 2.8-.63 3.504-1.916.076.78.1 1.058.277 1.613h1.69c-.28-.83-.33-1.21-.33-3.15v-4.487c0-1.487-.05-2.067-.277-2.672-.453-1.234-1.89-1.965-3.83-1.965-2.648 0-4.21 1.21-4.463 3.454zm5.092 3.528c0 1.235-.15 2.04-.455 2.62-.504.934-1.512 1.49-2.67 1.49-1.388 0-2.32-.858-2.32-2.094 0-1.638 1.412-2.495 5.445-3.2v1.184" fill="#161616" fill-rule="evenodd"/><path d="M182.096 82.713v7.31c0 1.638.1 2.37.48 3.025.63 1.21 1.965 1.916 3.528 1.916 1.537 0 2.47-.555 3.176-1.89.025.63.076 1.058.252 1.587h1.74c-.277-.88-.277-1.032-.277-3.63v-8.317h-1.766v6.78c0 1.185-.126 1.89-.48 2.496-.53.88-1.386 1.386-2.445 1.386-.857 0-1.588-.328-1.99-.908-.328-.453-.455-1.11-.455-2.445v-7.31h-1.764" fill="#161616"/><path d="M202.588 85.99c-.127-2.32-1.588-3.605-4.135-3.605-2.445 0-4.11 1.36-4.11 3.378 0 1.664.884 2.546 3.202 3.252 2.067.655 2.22.706 2.622.957.554.33.806.757.806 1.412 0 1.26-.982 2.093-2.545 2.093-1.713 0-2.62-.832-2.773-2.52h-1.714c0 2.57 1.615 4.007 4.513 4.007 2.672 0 4.336-1.437 4.336-3.73 0-.833-.227-1.54-.682-2.068-.503-.58-1.235-.933-3.2-1.512-2.27-.656-2.775-1.034-2.775-2.017 0-1.06.934-1.79 2.295-1.79 1.488 0 2.27.68 2.445 2.143h1.715" fill="#161616"/><path d="M213.627 85.99c-.127-2.32-1.588-3.605-4.135-3.605-2.444 0-4.108 1.36-4.108 3.378 0 1.664.88 2.546 3.2 3.252 2.068.655 2.22.706 2.623.957.554.33.806.757.806 1.412 0 1.26-.984 2.093-2.546 2.093-1.714 0-2.622-.832-2.774-2.52h-1.713c0 2.57 1.613 4.007 4.512 4.007 2.672 0 4.336-1.437 4.336-3.73 0-.833-.227-1.54-.68-2.068-.505-.58-1.236-.933-3.203-1.512-2.268-.656-2.772-1.034-2.772-2.017 0-1.06.932-1.79 2.294-1.79 1.488 0 2.27.68 2.445 2.143h1.715" fill="#161616"/><path d="M225.396 86.595c-.252-2.723-1.765-4.21-4.285-4.21-3.1 0-5.066 2.445-5.066 6.327 0 3.782 1.992 6.252 5.067 6.252 2.622 0 4.16-1.538 4.387-4.41h-1.765c-.2 1.99-1.033 2.897-2.62 2.897-2.043 0-3.253-1.79-3.253-4.763 0-2.975 1.21-4.79 3.2-4.79 1.537 0 2.268.757 2.597 2.698h1.74" fill="#161616"/><path d="M228.468 77.772v16.89h1.764v-6.58c0-1.16.152-2.017.504-2.647.53-.932 1.463-1.487 2.547-1.487.957 0 1.664.403 2.066 1.134.302.555.377 1.084.377 2.824v6.755h1.765v-6.855c0-2.37-.1-3.05-.53-3.782-.605-1.008-1.865-1.638-3.3-1.638-1.463 0-2.547.555-3.43 1.74v-6.353h-1.764" fill="#161616"/><path d="M241.07 82.713v7.31c0 1.638.102 2.37.48 3.025.63 1.21 1.966 1.916 3.53 1.916 1.537 0 2.47-.555 3.175-1.89.025.63.076 1.058.253 1.587h1.74c-.28-.88-.28-1.032-.28-3.63v-8.317h-1.763v6.78c0 1.185-.126 1.89-.478 2.496-.53.88-1.387 1.386-2.446 1.386-.856 0-1.587-.328-1.99-.908-.33-.453-.454-1.11-.454-2.445v-7.31h-1.765" fill="#161616"/><path d="M261.563 85.99c-.127-2.32-1.588-3.605-4.135-3.605-2.444 0-4.108 1.36-4.108 3.378 0 1.664.883 2.546 3.2 3.252 2.068.655 2.22.706 2.623.957.554.33.806.757.806 1.412 0 1.26-.983 2.093-2.546 2.093-1.715 0-2.623-.832-2.773-2.52h-1.713c0 2.57 1.612 4.007 4.51 4.007 2.673 0 4.337-1.437 4.337-3.73 0-.833-.227-1.54-.68-2.068-.504-.58-1.236-.933-3.2-1.512-2.27-.656-2.775-1.034-2.775-2.017 0-1.06.933-1.79 2.294-1.79 1.487 0 2.268.68 2.444 2.143h1.715" fill="#161616"/><path d="M272.6 85.99c-.124-2.32-1.587-3.605-4.132-3.605-2.445 0-4.11 1.36-4.11 3.378 0 1.664.882 2.546 3.202 3.252 2.067.655 2.22.706 2.62.957.556.33.808.757.808 1.412 0 1.26-.983 2.093-2.545 2.093-1.715 0-2.623-.832-2.774-2.52h-1.715c0 2.57 1.613 4.007 4.513 4.007 2.672 0 4.335-1.437 4.335-3.73 0-.833-.227-1.54-.68-2.068-.504-.58-1.236-.933-3.202-1.512-2.268-.656-2.772-1.034-2.772-2.017 0-1.06.933-1.79 2.295-1.79 1.486 0 2.268.68 2.444 2.143h1.714" fill="#161616"/><path d="M102.45 61.152v2.394h3.352v2.697c-.958.68-2.344 1.11-3.504 1.11-2.797 0-4.385-2.143-4.385-5.9 0-3.755 1.562-5.974 4.21-5.974 1.94 0 3.05.983 3.326 2.95h2.772c-.076-1.564-.378-2.547-1.083-3.48-1.11-1.437-2.95-2.268-5.07-2.268-4.536 0-7.51 3.478-7.51 8.747 0 5.393 2.974 8.72 7.763 8.72 2.22 0 4.21-.655 6.152-2.016v-6.982h-6.026" fill="#161616"/><path d="M121.937 64.58v-.605c0-3.983-2.093-6.454-5.47-6.454-3.504 0-5.823 2.573-5.823 6.455 0 3.78 2.293 6.176 5.924 6.176 2.646 0 4.612-1.41 5.142-3.705l-2.747-.126c-.404.907-1.186 1.335-2.32 1.335-1.74 0-2.798-1.11-2.9-3.075zm-8.117-2.27c.403-1.613 1.26-2.394 2.622-2.394 1.36 0 2.117.78 2.37 2.395h-4.992" fill="#161616" fill-rule="evenodd"/><path d="M124.202 57.85c.252.63.328 1.21.328 2.293v9.68h3.1v-6.655c0-.807.025-1.11.15-1.462.28-.882 1.06-1.386 2.12-1.386.755 0 1.335.277 1.637.78.227.354.278.808.278 2.068v6.655h3.1v-6.78c0-1.84.732-2.723 2.244-2.723.73 0 1.31.25 1.612.705.252.353.328.807.328 1.89v6.908h3.1V62.84c0-2.37-.025-2.672-.403-3.454-.53-1.16-1.714-1.79-3.353-1.79-1.664 0-2.823.58-3.883 1.942-.73-1.336-1.813-1.94-3.45-1.94-1.59 0-2.724.58-3.656 1.84v-.228c0-.53-.076-.932-.252-1.36h-3" fill="#161616" fill-rule="evenodd"/><path d="M155.96 64.58v-.605c0-3.983-2.093-6.454-5.47-6.454-3.505 0-5.825 2.573-5.825 6.455 0 3.78 2.295 6.176 5.924 6.176 2.646 0 4.613-1.41 5.142-3.705l-2.748-.126c-.403.907-1.184 1.335-2.32 1.335-1.74 0-2.797-1.11-2.897-3.075zm-8.12-2.27c.405-1.613 1.263-2.394 2.624-2.394 1.36 0 2.117.78 2.37 2.395h-4.993" fill="#161616" fill-rule="evenodd"/><path d="M158.552 57.85v11.973h3.1V57.85zm1.613-5.168c-1.11 0-1.865.73-1.865 1.84 0 1.084.705 1.764 1.815 1.764 1.084 0 1.79-.706 1.79-1.815 0-1.057-.706-1.788-1.74-1.788" fill="#161616" fill-rule="evenodd"/><path d="M164.75 57.85c.33 1.032.38 1.562.38 3.327V69.823h3.1v-6.126c0-1.134.05-1.638.277-2.092.328-.807 1.11-1.285 1.992-1.285.755 0 1.335.327 1.637.957.227.454.303 1.06.303 2.32v6.226h3.1v-6.907c0-2.168-.1-2.773-.555-3.58-.63-1.083-1.94-1.74-3.428-1.74-1.46 0-2.672.606-3.554 1.79 0-.655-.075-1.16-.252-1.537h-3" fill="#161616"/><path d="M188.272 61.48c-.176-2.522-1.94-3.984-4.865-3.984-2.874 0-4.79 1.563-4.79 3.882 0 .857.303 1.64.832 2.168.478.48 1.158.807 2.47 1.21 2.117.63 2.117.63 2.47.78.655.28.857.506.857.985 0 .782-.706 1.286-1.89 1.286-1.488 0-2.17-.58-2.27-1.99h-2.923c0 2.847 1.815 4.335 5.32 4.335 3.073 0 4.864-1.436 4.864-3.856 0-.78-.228-1.488-.68-2.017-.48-.63-1.236-1.008-3.05-1.538-1.817-.53-2.067-.605-2.42-.832-.33-.177-.505-.505-.505-.857 0-.706.706-1.235 1.663-1.235 1.16 0 1.765.53 1.916 1.664h3" fill="#161616"/><path d="M193.812 61.43c.176-.934.857-1.388 2.043-1.388 1.31 0 1.814.504 1.814 1.815v.202c-3.253.58-3.43.604-4.513 1.032-1.765.655-2.724 1.916-2.724 3.58 0 2.143 1.615 3.403 4.362 3.403 1.59 0 2.646-.53 3.302-1.614v.254c0 .327.05.655.152 1.11h2.822c-.303-.63-.403-1.236-.403-2.673v-4.814c0-1.512-.127-2.243-.48-2.95-.554-1.133-2.042-1.79-4.11-1.79-1.537 0-2.9.38-3.805 1.06-.858.655-1.236 1.412-1.412 2.773zm3.857 3.376c0 .883-.05 1.387-.23 1.74-.3.706-1.083 1.16-2.015 1.16-1.058 0-1.814-.606-1.814-1.438 0-.503.253-.983.706-1.31.53-.378 1.31-.58 3.353-.832v.68" fill="#161616" fill-rule="evenodd"/><path d="M203.737 57.85c.252.63.328 1.21.328 2.293v9.68h3.102v-6.655c0-.807.024-1.11.15-1.462.278-.882 1.06-1.386 2.118-1.386.756 0 1.336.277 1.638.78.227.354.278.808.278 2.068v6.655h3.1v-6.78c0-1.84.73-2.723 2.245-2.723.73 0 1.31.25 1.613.705.252.353.328.807.328 1.89v6.908h3.1V62.84c0-2.37-.025-2.672-.403-3.454-.53-1.16-1.714-1.79-3.353-1.79-1.664 0-2.823.58-3.883 1.942-.73-1.336-1.813-1.94-3.452-1.94-1.588 0-2.722.58-3.656 1.84v-.228c0-.53-.075-.932-.253-1.36h-3" fill="#161616" fill-rule="evenodd"/><path d="M235.495 64.58v-.605c0-3.983-2.092-6.454-5.47-6.454-3.504 0-5.824 2.573-5.824 6.455 0 3.78 2.295 6.176 5.925 6.176 2.647 0 4.614-1.41 5.143-3.705l-2.748-.126c-.403.907-1.185 1.335-2.32 1.335-1.74 0-2.797-1.11-2.897-3.075zm-8.118-2.27c.404-1.613 1.262-2.394 2.623-2.394 1.36 0 2.117.78 2.37 2.395h-4.993" fill="#161616" fill-rule="evenodd"/><path d="M237.91 57.85c.102.655.127.88.127 1.562.024.882.024 1.588.024 2.118v8.293h3.103v-5.57c0-2.673.756-3.933 2.394-3.933.656 0 1.286.2 1.866.58v-3.152c-.504-.126-.606-.15-.932-.15-1.462 0-2.495.806-3.453 2.746.024-.276.024-.503.024-.63 0-.68-.073-1.335-.2-1.865h-2.95" fill="#161616"/></svg>
  <h2>
    Der Gemeinsame Bundesausschuss (G-BA) ist das oberste Beschlussgremium der gemeinsamen Selbstverwaltung der Ärzte, Zahnärzte, Psychotherapeuten, Krankenhäuser und Krankenkassen in Deutschland.
  </h2>
</div>


/*Downloaded from https://www.codeseek.co/megatronCGN/a-web-maker-experiment-JMVRqE */
    * {
  padding: 0;
  margin: 0;
}

.hero {
  height: 400px;
  display: flex;
  position: relative;
  background-color: hsl(33,100%,50%);
  //background-color: white;
  
  h2 {
	max-width: 80%;
    margin: 3em auto auto;
    color: white;
    font-family: sans-serif;
    letter-spacing: 0.05em;
    font-weight: 500;
	line-height: 1.25;
    text-shadow: 
      0 1px 2px hsla(23,100%,35%,1),
      0 0 15px hsla(23,100%,35%,.75),
      0 0 30px hsla(23,100%,35%,.75);
  }
  
  svg {
    width:150vw;
    height: auto;
    position: absolute;
    bottom: 0;
    transform: translate(-10%, 25%);
    opacity: .25;
  }
  
  path[fill='#ff8c00'] {
    fill: white;
  }
  
  path[fill='#161616'] {
    display: none;
  }
  
}


/*Downloaded from https://www.codeseek.co/megatronCGN/a-web-maker-experiment-JMVRqE */
    

Comments