We Care health website

Karthik G Krishnan — Tue, 21 Mar 2023 07:57:32 +0000

My friend and I created this prototype website designed to help people get medicine online and rescue those in emergency situations. Please take a look at the website.

This was built purely on HTML, CSS and JavaScript. Feel free to take a look at the source code on my Github repo

Here is how you can create an animated SVG blob!!

Karthik G Krishnan — Sun, 04 Sep 2022 11:11:18 +0000

Hey if you want to make your website look good with some animated SVG stuffs... here is the code which I used in my project.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100%" id="blobSvg">                        <defs>                        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">                            <stop offset="0%" style="stop-color: rgb(238, 205, 163);"></stop>                            <stop offset="100%" style="stop-color: rgb(239, 98, 159);"></stop>                        </linearGradient>                        </defs>
                            <mask id="mask0" mask-type="alpha">
                                <path id="blob" fill="url(#gradient)">                            <animate attributeName="d" dur="25000ms" repeatCount="indefinite" values="M440.5,320.5Q418,391,355.5,442.5Q293,494,226,450.5Q159,407,99,367Q39,327,31.5,247.5Q24,168,89,125.5Q154,83,219.5,68Q285,53,335.5,94.5Q386,136,424.5,193Q463,250,440.5,320.5Z;M453.78747,319.98894Q416.97789,389.97789,353.96683,436.87838Q290.95577,483.77887,223.95577,447.43366Q156.95577,411.08845,105.64373,365.97789Q54.33169,320.86732,62.67444,252.61056Q71.01719,184.3538,113.01965,135.21007Q155.02211,86.06634,220.52211,66.46683Q286.02211,46.86732,335.5,91.94472Q384.97789,137.02211,437.78747,193.51106Q490.59704,250,453.78747,319.98894Z;M411.39826,313.90633Q402.59677,377.81265,342.92059,407.63957Q283.24442,437.46649,215.13648,432.5428Q147.02853,427.61911,82.23325,380.9572Q17.43796,334.29529,20.45223,250.83809Q23.46649,167.38089,82.5856,115.05707Q141.70471,62.73325,212.19045,63.73015Q282.67618,64.72705,352.67308,84.79839Q422.66998,104.86972,421.43486,177.43486Q420.19974,250,411.39826,313.90633Z;M440.5,320.5Q418,391,355.5,442.5Q293,494,226,450.5Q159,407,99,367Q39,327,31.5,247.5Q24,168,89,125.5Q154,83,219.5,68Q285,53,335.5,94.5Q386,136,424.5,193Q463,250,440.5,320.5Z;"></animate>                        </path> 
                            </mask>
                            <g mask="url(#mask0)">
                                <path id="blob" fill="url(#gradient)">                            <animate attributeName="d" dur="25000ms" repeatCount="indefinite" values="M440.5,320.5Q418,391,355.5,442.5Q293,494,226,450.5Q159,407,99,367Q39,327,31.5,247.5Q24,168,89,125.5Q154,83,219.5,68Q285,53,335.5,94.5Q386,136,424.5,193Q463,250,440.5,320.5Z;M453.78747,319.98894Q416.97789,389.97789,353.96683,436.87838Q290.95577,483.77887,223.95577,447.43366Q156.95577,411.08845,105.64373,365.97789Q54.33169,320.86732,62.67444,252.61056Q71.01719,184.3538,113.01965,135.21007Q155.02211,86.06634,220.52211,66.46683Q286.02211,46.86732,335.5,91.94472Q384.97789,137.02211,437.78747,193.51106Q490.59704,250,453.78747,319.98894Z;M411.39826,313.90633Q402.59677,377.81265,342.92059,407.63957Q283.24442,437.46649,215.13648,432.5428Q147.02853,427.61911,82.23325,380.9572Q17.43796,334.29529,20.45223,250.83809Q23.46649,167.38089,82.5856,115.05707Q141.70471,62.73325,212.19045,63.73015Q282.67618,64.72705,352.67308,84.79839Q422.66998,104.86972,421.43486,177.43486Q420.19974,250,411.39826,313.90633Z;M440.5,320.5Q418,391,355.5,442.5Q293,494,226,450.5Q159,407,99,367Q39,327,31.5,247.5Q24,168,89,125.5Q154,83,219.5,68Q285,53,335.5,94.5Q386,136,424.5,193Q463,250,440.5,320.5Z;"></animate>                        </path>                                
                                <image class="home__blob-img" x="20" y="-30" href="imgg.jpg"/>
                            </g>
                        </svg>

it looks a bit messy but let me explain!!

what you see on the before the g tag is the animated svg that I created using an online blob generator, you can copy the code svg code form there itself. You can create what ever shape u likes. Then I added my jpeg image under the g tag, then only I can group my image with the svg. I also used a mask since the original blob contained some gradient colors and I wanted my image to fit inside the blob. You can copy the code from here and make changes as you wish.

hope u found it helpful :)

Hey I just created my first website

Karthik G Krishnan — Sat, 03 Sep 2022 11:25:53 +0000

this is my first personal website. It took me around one month to complete this project!!(I know it's a bit long time) but I enjoyed the journey very well. Of course I referred many articles videos and websites for building this web and I learned a lot from them. After so many sleepless nights, fixing bugs and changing designs, finally I hosted my website on GitHub. Please Take a look at my website . Your valuable suggestions are highly appreciated :)

DEV Community: Karthik G Krishnan

We Care health website

Here is how you can create an animated SVG blob!!

Hey I just created my first website